Merge pull request #19 from justin808/move-package-json-inside-webpack-directory

Move package json inside webpack directory, updated deps, using babel-loader, changed name of dir from /webpack to /client.

Author: justin808

.gitignore

@@ -15,10 +15,10 @@
 /log/*.log
 /tmp
 /public/assets
-webpack-bundle.js
-webpack-bundle.js.map
+client-bundle.js
+client-bundle.js.map
 .env
-/node_modules
+node_modules
 npm-debug.log
 
 # Ignore bundle dependencies

CHANGELOG.md

@@ -0,0 +1,3 @@
+v1.1 - Sunday, March 22, 2015
+------------------------------
+1. Changed /webpack directory to /client

Procfile.dev

@@ -1,3 +1,3 @@
 web: rails s -p 4000
-webpack: cd webpack && $(npm bin)/webpack -w --config webpack.rails.config.js
-hot: cd webpack && node server.js
+client: cd client && $(npm bin)/webpack -w --config webpack.rails.config.js
+hot: cd client && node server.js

README.md

@@ -2,6 +2,8 @@
 
 By Justin Gordon and the Rails On Maui Team, http://www.railsonmaui.com
 
+- If you came to here from the blog article, this example project has evolved. See CHANGELOG.md for 
+  what's changed.
 - Please email us at [[email protected]](mailto:[email protected]) if you have a ReactJs +
   Rails project.
 - Please file issues for problems and feature requests.
@@ -64,7 +66,7 @@ See package.json and Gemfile for versions
 Setup node and run the node server with file `server.js`.
 
 ```
-cd webpack
+cd client
 node server.js
 ```
 
@@ -85,11 +87,11 @@ Webpack ExtractTextPlugin can optionally be used to extract the CSS out of
 the JS bundle. We've chosen to let Rails handle CSS, SCSS, images, fonts.
 
 ```
-cd webpack
+cd client
 $(npm bin)/webpack -w --config webpack.rails.config.js
 ```
 
-`webpack-bundle.js` is generated and saved to `app/assets/javascripts`. This is included in the
+`client-bundle.js` is generated and saved to `app/assets/javascripts`. This is included in the
 Rails asset pipeline.
 
 Observe how the bundles are automatically re-generated whenever your JSX changes.
@@ -155,7 +157,7 @@ customize the Bootstrap Sass variables.
 
 # Notes on Rails assets
 ## Javascript
-The `webpack.rails.config.js` file generates webpack-bundle.js which is then included
+The `webpack.rails.config.js` file generates client-bundle.js which is then included
 by the Rails asset pipeline.
 
 ## Sass and images
@@ -232,5 +234,5 @@ shrinkwrap`.
 Special thanks to [JetBrains](https://www.jetbrains.com) for their great tools
 [RubyMine](https://www.jetbrains.com/ruby/) and [WebStorm](https://www.jetbrains.com/webstorm/).
 The developers of this project use RubyMine at the top level, mostly for Ruby work, and we use
-WebStorm opened up to the `webpack` directory to focus on JSX and Sass files.
+WebStorm opened up to the `client` directory to focus on JSX and Sass files.
 

app/assets/javascripts/application.js

@@ -17,5 +17,5 @@
 
 // Important to import jquery_ujs before rails-bundle as that patches jquery xhr to use the authenticity token!
 
-//= require webpack-bundle
+//= require client-bundle
 //= require turbolinks

app/assets/javascripts/comments.js.coffee

@@ -1,6 +1,6 @@
 // Customizations - needs to be imported first!
 // The _bootstrap-variables-customization.scss file is located under
-// webpack/assets/stylesheets, which has been added to the Rails asset
+// client/assets/stylesheets, which has been added to the Rails asset
 // pipeline search path. See config/application.rb.
 @import "bootstrap-variables-customization";
 

app/assets/javascripts/pages.js.coffee

@@ -2,7 +2,7 @@
 // with Rails vs. the Webpack Dev Server
 $rails: true;
 
-// Those scss files are located under webpack/assets/stylesheets,
+// Those scss files are located under client/assets/stylesheets,
 // which has been added to the Rails asset pipeline search path.
 // See config/application.rb.
 @import "bootstrap-custom";

app/assets/stylesheets/_bootstrap-custom.scss

@@ -0,0 +1,3 @@
+Please see parent directory README.md.
+
+(We may move client side specific README material here in the near future).

app/assets/stylesheets/application.css.scss

@@ -5,12 +5,12 @@ var React = require('react/addons');
 // the React Developer Tools: http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
 // require("expose?React!react");
 
-var Input = require('react-bootstrap/Input');
-var Button = require('react-bootstrap/Button');
-var Row = require('react-bootstrap/Row');
-var Col = require('react-bootstrap/Col');
-var Nav = require('react-bootstrap/Nav')
-var NavItem = require('react-bootstrap/NavItem')
+var Input = require('react-bootstrap/lib/Input');
+var Button = require('react-bootstrap/lib/Button');
+var Row = require('react-bootstrap/lib/Row');
+var Col = require('react-bootstrap/lib/Col');
+var Nav = require('react-bootstrap/lib/Nav')
+var NavItem = require('react-bootstrap/lib/NavItem')
 
 var marked = require("marked");