Updates to generator, docs, webpack config

Objective of these changes is to make the generator simpler, partly by
simplfying the default behavior of ReactOnRails.

* combined webpack files into one webpack config, fixed corresponding
  tests and code. cleaned up some documentation.
* removed jquery, fixed some linting. removed lodash completely
* changed asset compliation checks
* moved files from server rendering to base for templates
* changed server-bundle to webpack-bundle
* added prodcution build command and test build command. changed configuration
  to test build command to be more explicit. changed around some readmes
* changed build:dev to build:development

.gitignore

@@ -28,3 +28,5 @@ npm-debug.*
 spec/dummy/client/npm-debug.log.*
 
 /gen-examples
+
+.DS_Store

CHANGELOG.md

@@ -5,6 +5,14 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
 ## [Unreleased]
 ##### Added
 - Non-digested version of assets in public folder [#413](https://github.com/shakacode/react_on_rails/pull/413) by [alleycat-at-git]
+##### Changed
+- Only one webpack config is generated for server and client config. Package.json files were changed to reflect this [#398](https://github.com/shakacode/react_on_rails/pull/398).
+- Added npm_build_test_command to allow developers to change what npm command is automatically run from rspec [#398](https://github.com/shakacode/react_on_rails/pull/398).
+##### Removed
+- Server rendering is no longer an option in the generator and is always accessible [#398](https://github.com/shakacode/react_on_rails/pull/398).
+- removed lodash, jquery, and loggerMiddleware from the generated code [#398](https://github.com/shakacode/react_on_rails/pull/398).
+- removed webpack watch check for test helper automatic compilation [#398](https://github.com/shakacode/react_on_rails/pull/398).
+
 
 ##### Changed
 - Replace URI with Addressable gem. See [#405](https://github.com/shakacode/react_on_rails/pull/405) by [lucke84]

README.md

@@ -161,8 +161,6 @@ In most cases, you should use the `prerender: false` (default behavior) with the
 
 Now the server will interpret your JavaScript using [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [therubyracer](https://github.com/cowboyd/therubyracer) as ExecJS's runtime. The generator will automatically add it to your Gemfile for you.
 
-Note that **server-rendering requires globally exposing your components by setting them to `global`, not `window`** (as is the case with client-rendering). If using the generator, you can pass the `--server-rendering` option to configure your application for server-side rendering.
-
 In the following screenshot you can see the 3 parts of React on Rails rendering:
 
 1. A hidden HTML div that contains the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads to convert take this data and build initialize React components.
@@ -265,27 +263,30 @@ In this case, a prop and value for `somethingUseful` will go into the railsConte
 ### Globally Exposing Your React Components
 Place your JavaScript code inside of the provided `client/app` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **expose your components globally and then mount them with helpers inside of your Rails views**.
 
-+ *Normal Mode (JavaScript is Rendered on client):*
 
-  If you are not server rendering, `clientRegistration.jsx` will have
+
+*Default Mode (works for server and client rendering):*
+  This is an example of how to expose a component to the `react_component` view helper.
 
   ```javascript
+  // client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx
   import HelloWorld from '../components/HelloWorld';
   import ReactOnRails from 'react-on-rails';
   ReactOnRails.register({ HelloWorld });
   ```
-+ *Server-Side Rendering:*
-
-  If you are server rendering, `serverRegistration.jsx` will have this. Note, you might be initializing HelloWorld with version specialized for server rendering.
 
+*Separated Server-Side Rendering:*
+
+  You can add a separate webpack configuration file for server rendering that has a separate entry file. ex. 'serverHelloWorldApp.jsx'. Note, you might be initializing HelloWorld with version specialized for server rendering.
+
   ```javascript
   import HelloWorld from '../components/HelloWorld';
   import ReactOnRails from 'react-on-rails';
   ReactOnRails.register({ HelloWorld });
   ```
-
+ 
   In general, you may want different initialization for your server rendered components.
-
+ 
 See below section on how to setup redux stores that allow multiple components to talk to the same store.
 
 ## ReactOnRails View Helpers API

app/helpers/react_on_rails_helper.rb

@@ -270,7 +270,7 @@ def server_rendered_react_component_html(props, react_component_name, dom_id,
     # On server `location` option is added (`location = request.fullpath`)
     # React Router needs this to match the current route
 
-    # Make sure that we use up-to-date server-bundle
+    # Make sure that we use up-to-date webpack-bundle
     ReactOnRails::ServerRenderingPool.reset_pool_if_server_bundle_was_modified
 
     # Since this code is not inserted on a web page, we don't need to escape props

docs/additional-reading/heroku-deployment.md

@@ -84,9 +84,7 @@ namespace :assets do
 
   desc "Compile assets with webpack"
   task :webpack do
-    sh "cd client && npm run build:client"
-    # If you are doing server rendering
-    # sh "cd client && npm run build:server"
+    sh "cd client && npm run build:production"
   end
 
   task :clobber do

docs/additional-reading/node-server-rendering.md

@@ -3,7 +3,7 @@
 ### Warning: this is an experimental feature
 
 The default server rendering exploits ExecJS to render react components.
-Node server rendering allows you to use separate NodeJS process as a renderer. The process loads server-bundle.js and
+Node server rendering allows you to use separate NodeJS process as a renderer. The process loads webpack-bundle.js and
 then executes javascript to render the component inside its environment. The communication between rails and node occurs
 via socket (`client/node/node.sock`)
 

docs/additional-reading/rspec-configuration.md

@@ -12,10 +12,10 @@ RSpec.configure do |config|
 You can pass an RSpec metatag as an optional second parameter to this helper method if you want this helper to run on examples other than where `js: true` (default). The helper will compile webpack files at most once per test run. The helper will not compile the webpack files unless they are out of date (stale).
 
 Please take note of the following:
-- This utility assumes your build tasks for the static generated files are `npm run build:client` and `npm run build:server` and do not have the `--watch` option enabled.
+- This utility uses your `npm_build_test_command' to build the static generated files. This command should not include the `--watch` option.
 - By default, the webpack processes look for the `app/assets/webpack` folders. If this folder is missing, is empty, or contains files with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets. You can override this inside of `config/initializers/react_on_rails.rb` by passing a filepath (relative to the root of the app) to the `generated_assets_dir` configuration option.
 
-If you want to speed up the re-compiling process, you can call `npm run build:dev:client` (and `npm run build:dev:server` if doing server rendering) to have webpack run in "watch" mode and recompile these files in the background, which will be much faster when making incremental changes than compiling from scratch.
+If you want to speed up the re-compiling process, you can call `npm run build:development` to have webpack run in "watch" mode and recompile these files in the background, which will be much faster when making incremental changes than compiling from scratch.
 
 [spec/dummy](../../spec/dummy) contains examples of how to set the proc files for this purpose.
 

docs/additional-reading/webpack.md

@@ -12,8 +12,6 @@ You need both include `react-dom/server` and `react` as values for `entry`, like
     // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
     vendor: [
       'babel-core/polyfill',
-      'jquery',
-      'jquery-ujs',
       'react',
       'react-dom',
     ],
@@ -25,14 +23,6 @@ and you need to expose them:
       // React is necessary for the client rendering:
       {test: require.resolve('react'), loader: 'expose?React'},
       {test: require.resolve('react-dom'), loader: 'expose?ReactDOM'},
-      {test: require.resolve('jquery'), loader: 'expose?jQuery'},
-      {test: require.resolve('jquery'), loader: 'expose?$'},
-```
-
-`webpack.server.config.js` is similar, but substitute:
-
-```
- entry: ['./yourCode', 'react-dom/server', 'react'],
 ```
 
 and use this line rather than `{test: require.resolve('react-dom'), loader: 'expose?ReactDOM'},`:

docs/api/ruby-api-hot-reload-view-helpers.md

@@ -13,8 +13,7 @@ static vs. hot is picked based on whether `ENV["REACT_ON_RAILS_ENV"] == "HOT"`
 
  <!-- These do not use turbolinks, so no data-turbolinks-track -->
  <!-- This is to load the hot assets. -->
- <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
-                                      'http://localhost:3500/app-bundle.js']) %>
+ <%= env_javascript_include_tag(hot: ['http://localhost:3500/webpack-bundle.js') %>
 
  <!-- These do use turbolinks -->
  <%= env_javascript_include_tag(static: 'application_static',

docs/basics/generator.md

@@ -14,7 +14,6 @@ Usage:
 
 Options:
   -R, [--redux], [--no-redux]                          # Install Redux gems and Redux version of Hello World Example
-  -S, [--server-rendering], [--no-server-rendering]    # Add necessary files and configurations for server-side rendering
 
 Runtime options:
   -f, [--force]                    # Overwrite files that already exist
@@ -33,7 +32,7 @@ The generated client code follows our organization scheme. Each unique set of fu
 
 Inside of the generated "HelloWorld" domain you will find the following folders:
 
-+  `startup`: two types of files, one that return a container component and implement any code that differs between client and server code (if using server-rendering), and a `clientRegistration` file that exposes the aforementioned files (as well as a `serverRegistration` file if using server rendering). These registration files are what webpack is using as an entry point.
++  `startup`: This contains the entry point files for webpack. It defaults to a single file that is used for server and client compilation, but if these need to be different, then you can create two webpack configurations with separate endpoints.
 + `containers`: "smart components" (components that have functionality and logic that is passed to child "dumb components").
 + `components`: includes "dumb components", or components that simply render their properties and call functions given to them as properties by a parent component. Ultimately, at least one of these dumb components will have a parent container component.
 

lib/generators/USAGE

@@ -1,99 +1,13 @@
 Description:
 
-The react_on_rails:install generator combined with the example pull requests of
-generator runs will get you up and running efficiently. There's a fair bit of
-setup involved when integrating Webpack with Rails. Defaults for options
-are such that the default is for the flag to be off. For example, the default for
-`-R` is that redux is off, and the default of -b is that skip-bootstrap is off.
+The react_on_rails:install generator integrates webpack with rails with ease. You can pass the redux option if you'd like to have redux setup for you automatically.
 
 * Redux
 
     Passing the --redux generator option causes the generated Hello World example
     to integrate the Redux state container framework. The necessary node modules
     will be automatically included for you.
 
-    The generator uses the organizational `paradigm of "bundles"`. These are like
-    application domains and are used for grouping your code into webpack bundles
-    in case you decide to create different bundles for deployment. This is also
-    useful for separating out logical parts of your application. We recommend that
-    that each bundle will have it's own Redux store. If you have code that you
-    want to reuse across bundles, such as middleware or common utilities, place them
-    under `/client/app/lib`. You can then import them in your client code:
-    `import MyModule from 'lib/MyModule'`; since we have configured webpack to
-    automatically resolve the word lib to point to this folder.
-
-* Using Images and Fonts
-
-    The generator has amended the folders created in `client/assets/` to Rails's
-    asset path. We recommend that if you have any existing assets that you want
-    to use with your client code, you should move them to these folders and use
-    webpack as normal. This allows webpack's development server to have access
-    to your assets, as it will not be able to see any assets in the default Rails
-    directories which are above the `/client` directory.
-
-    Alternatively, if you have many existing assets and don't wish to move them,
-    you could consider creating symlinks from `client/assets` that point to your
-    Rails assets folders inside of `app/assets/`. The assets there will then be
-    visible to both Rails and webpack.
-
-* Bootstrap Integration
-
-    React on Rails ships with Twitter Bootstrap already integrated into the build.
-    Note that the generator removes require_tree in both the application.js and
-    application.css.scss files. This is to ensure the correct load order for the
-    bootstrap integration, and is usually a good idea in general. You will therefore
-    need to explicitly require your files.
-
-    How the Bootstrap library is loaded depends upon whether one is using the Rails
-    server or the HMR development server.
-
-    1. Bootstrap via Rails Server
-
-        The Rails server loads bootstrap-sprockets, provided
-        by the bootstrap-sass ruby gem (added automatically to your Gemfile by
-        the generator), via the `app/assets/stylesheets/_bootstrap-custom.scss`
-        partial.
-
-        This allows for using Bootstrap in your regular Rails stylesheets. If you
-        wish to customize any of the Bootstrap variables, you can do so via the
-        `client/assets/stylesheets/_pre-bootstrap.scss` partial.
-
-    2. Bootstrap via Webpack Dev Server
-
-        The webpack dev server does not go through Rails but instead loads bootstrap
-        via the `bootstrap-sass-loader` webpack loader. You can configure the loader
-        via the `client/bootstrap-sass-config.js` file.
-
-    3. Keeping Custom Bootstrap Configurations Synced
-
-        Because the webpack dev server and Rails each load Bootstrap via a different
-        file (explained in the two sections immediately above), any changes to
-        the way components are loaded in one file must also be made to the other
-        file in order to keep styling consistent between the two. For example,
-        if an import is excluded in _bootstrap-custom.scss, the same import should
-        be excluded in `bootstrap-sass-config.js` so that styling in the Rails
-        server and the webpack dev server will be the same.
-
-    4. Skip Bootstrap Integration
-
-        Bootstrap integration is enabled by default, but can be disabled by passing
-        the --skip-bootstrap flag (alias -b). When you don't need Bootstrap in your
-        existing project, just skip it as needed.
-
-* JavaScript Linters
-
-    JavaScript linters are enabled by default, but can be disabled by passing the
-    --skip-js-linters flag (alias j), and those that run in Node have been added to
-    `client/package.json` under devDependencies.
-
-* Ruby Linters
-
-    Ruby linters are disabled by default, but can be enabled by passing the
-    `--ruby-linters` flag when generating. These linters have been added to your
-    Gemfile in addition to the the appropriate Rake tasks.
-
-    We really love using all the linters! Give them a try.
-
 *******************************************************************************
 
 After running the generator, you will want to:
@@ -102,14 +16,7 @@ After running the generator, you will want to:
 
 Then you may run
 
-    npm run
-
-And you will see several useful commands:
-
-    express-server
-      echo 'visit http://localhost:4000' && cd client && npm start
-    rails-server
-      echo 'visit http://localhost:3000/hello_world' && foreman start -f Procfile.dev
+    foreman start -f Procfile.dev
 
 More Details: