Merge pull request #88 from shakacode/move-jquery_ujs-under-npm

Move jQuery and jQuery-ujs under /client and npm

Author: dylangrafmyre

Gemfile

@@ -18,8 +18,10 @@ gem "coffee-rails"
 # See https://github.com/sstephenson/execjs#readme for more supported runtimes
 # gem "therubyracer", platforms: :ruby
 
-# Use jquery as the JavaScript library
-gem "jquery-rails"
+# jquery as the JavaScript library has been moved under /client and managed by npm.
+# It is critical to not include any of the jquery gems when following this pattern or
+# else you might have multiple jQuery versions.
+
 # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
 gem "turbolinks"
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder

Gemfile.lock

@@ -108,10 +108,6 @@ GEM
     jbuilder (2.3.1)
       activesupport (>= 3.0.0, < 5)
       multi_json (~> 1.2)
-    jquery-rails (4.0.4)
-      rails-dom-testing (~> 1.0)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
     json (1.8.3)
     kgio (2.9.3)
     launchy (2.4.3)
@@ -275,7 +271,6 @@ DEPENDENCIES
   factory_girl_rails
   foreman
   jbuilder
-  jquery-rails
   launchy
   pg
   phantomjs

README.md

@@ -173,6 +173,17 @@ Be sure to see [assets.rake](https://github.com/shakacode/react-webpack-rails-tu
 The `webpack.rails.config.js` file generates client-bundle.js which is then included
 by the Rails asset pipeline.
 
+##jQuery with Rails and Webpack
+jQuery and jQuery-ujs are not required within `app/assets/javascript/application.js`
+and have been moved under`/client` and managed by npm. The modules are exposed via entry point
+by `webpack.common.config.js`.
+
+In `application.js`, it's critical that any libraries that depend on jQuery come after the inclusion 
+of the Webpack bundle, such as the twitter bootstrap javascript.
+
+Please refer to [Considerations for jQuery with Rails and Webpack](http://forum.railsonmaui.com/t/considerations-for-jquery-with-rails-and-webpack/344) for further info.
+
+
 ## Sass and images
 1. The Webpack server loads the images from the **symlink** of the
    `app/assets/images` directory.

app/assets/javascripts/application.js

@@ -9,14 +9,11 @@
 //
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
-//
-//= require jquery
-//= require jquery_ujs
-
-//= require bootstrap-sprockets
-
-// Important to import jquery_ujs before rails-bundle as that patches jquery xhr to use the authenticity token!
 
+// Need to be on top to allow Poltergeist test to work with React.
 //= require es5-shim/es5-shim
+
+// It is important that generated/client-bundle must be before bootstrap since it is exposing jQuery and jQuery-ujs
 //= require generated/client-bundle
+//= require bootstrap-sprockets
 //= require turbolinks