react_on_rails 11.1.7 → 11.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f438e5ff9e6b2697d00f7232f748c3829b53099f5e048c68db7df913e7b0e778
-  data.tar.gz: a285c7806a308fafb386dd1e9800a3650349a0d38ff09c03ec190ee3f795075f
+  metadata.gz: 060b6f22c90e0e79b6a60244c979aae68cf0aae3d3cc67b171e41a0040a1e229
+  data.tar.gz: 2667ab4972d468cb44cdc42bb6abc3c0536a4a8f3d6ac346df83b0d1249e12d6
 SHA512:
-  metadata.gz: 153503d0d3913c8bdd74f818d5892da1d14aace2de687aa44b6539772dcef49d8555a4265f5ce56f531ea4fad428f882f0e66cf99e6149a7af1dd708e0c22201
-  data.tar.gz: 6766c004cbd7358501179fadfffe8e5c50682be85b38bcc5c147e5c72f92a15f2a1afcf6cf36303fe2f9e45e2b22cf6cf38234d93b63da3cc7cf1ba2b309d271
+  metadata.gz: fb989846fd0e2c0af268850ead6c293d158e37ed87c12ced4dd09f21380ee8a5d2d5ef95116e264991ec928085f24198519a93b45a2e29f8ff68301c25c899b3
+  data.tar.gz: 6bda13faa6e598b3b85d13bdaa2842a53f6548aacf6ac9237612c061371f115ec967f87ff7030fbebe1c51af466949e98c6f02db56acfd6b79aa85057caaa5be

data/CHANGELOG.md

@@ -16,6 +16,11 @@ Changes since last non-beta release.
 
 *Please add entries here for your pull requests that are not yet released.*
 
+### [11.1.8] - 2018-10-14
+
+#### Improved
+- Improved tutorial and support for HMR when using `rails/webpacker` for Webpack configuration. [PR 1156](https://github.com/shakacode/react_on_rails/pull/1156) by [justin808](https://github.com/justin808).
+
 ### [11.1.7] - 2018-10-10
 #### Fixed
 - Fixed bug where intl parsing would fail when trying to parse integers or blank entries. by [sepehr500](https://github.com/sepehr500)
@@ -834,7 +839,8 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/11.1.7...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/11.1.8...master
+[11.1.8]: https://github.com/shakacode/react_on_rails/compare/11.1.7...11.1.8
 [11.1.7]: https://github.com/shakacode/react_on_rails/compare/11.1.6...11.1.7
 [11.1.6]: https://github.com/shakacode/react_on_rails/compare/11.1.5...11.1.6
 [11.1.5]: https://github.com/shakacode/react_on_rails/compare/11.1.4...11.1.5

data/README.md

@@ -6,8 +6,6 @@ React on Rails integrates Rails with (server rendering of) Facebook's [React](ht
 
 Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? [Contact me](mailto:justin@shakacode.com).
 
-ShakaCode is **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded developers that wish to work on our projects, including [Hawaii Chee](https://www.hawaiichee.com). Your main coding interview will be pairing with us on our open source! We're getting into [Reason](https://reasonml.github.io/)!
-
 # Intro
 
 ## Project Objective
@@ -16,8 +14,9 @@ To provide an opinionated and optimal framework for integrating Ruby on Rails wi
 
 ## Features and Why React on Rails?
 
-Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"? Server rendering, often used for SEO and performance, is not offered by rails/webpacker.
+Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"? 
 
+1. Server rendering, often used for SEO crawler indexing and UX performance, is not offered by rails/webpacker.
 1. The easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate 1request to your API.
 1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/reactjs/react-router) integration.
 1. [Internationalization (I18n) and (localization)](https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md)
@@ -37,6 +36,7 @@ React on Rails Pro provides Node server rendering and other performance enhancem
 
 ![2018-09-11_10-31-11](https://user-images.githubusercontent.com/1118459/45467845-5bcc7400-b6bd-11e8-91e1-e0cf806d4ea4.png)
 
+* [HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./docs/testimonials/hvmn.md)
 * [HVMN’s 90% Reduction in Server Response Time from React on Rails Pro](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
 * [Egghead React on Rails Pro Deployment Highlights](https://github.com/shakacode/react_on_rails/wiki/Egghead-React-on-Rails-Pro-Deployment-Highlights)
 
@@ -59,6 +59,10 @@ Please [email me (Justin Gordon), the creator of React on Rails](mailto:justin@s
 
 ## Testimonials for Hiring ShakaCode and our "Pro Support"
 
+[HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./docs/testimonials/hvmn.md)
+
+> The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint.
+
 From Kyle Maune of Cooper Aerial, May 4, 2018
 
 ![image](https://user-images.githubusercontent.com/1118459/40891236-9b0b406e-671d-11e8-80ee-c026dbd1d5a2.png)
@@ -288,7 +292,7 @@ Here are some highly recommended next articles to read:
 1. [How React on Rails Works](./docs/basics/how-react-on-rails-works.md)
 1. [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
 1. [Webpack Configuration](./docs/basics/webpack-configuration.md)
-1. [View Helpers API](./docs/view-helpers-api.md) 
+1. [View Helpers API](./docs/api/view-helpers-api.md) 
 1. [Caching and Performance: React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
 1. [Deployment](docs/basics/deployment.md).
 
@@ -326,6 +330,9 @@ The following companies support this open source project, and ShakaCode uses the
 
 Aloha and best wishes from Justin and the ShakaCode team!
 
+# Work with Us
+ShakaCode is **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded, remote-first, developers that wish to work on our projects, including [Hawaii Chee](https://www.hawaiichee.com). Your main coding interview will be pairing with us on our open source! We're getting into [Reason](https://reasonml.github.io/)!
+
 # License
 
 The gem is available as open source under the terms of the [MIT License](LICENSE.md).

data/SUMMARY.md

@@ -6,6 +6,8 @@
   + [React on Rails Basic Installation Tutorial](./docs/tutorial.md)
   + [Webpack Configuration](./docs/basics/webpack-configuration.md)
   + [How React on Rails Works](./docs/basics/how-react-on-rails-works.md)
+  + [Client vs. Server Rendering](./docs/basics/client-vs-server-rendering.md)
+  + [React Server Rendering](./docs/basics/react-server-rendering.md)
   + [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
   + [Generator Functions and the RailsContext](docs/basics/generator-functions-and-railscontext.md)
   + [Caching and Performance: React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
@@ -50,7 +52,7 @@
   + [Setting up Hot Reloading during Rails Development, API docs](./docs/api/ruby-api-hot-reload-view-helpers.md)
   + [Developing with the Webpack Dev Server](./docs/additional-reading/webpack-dev-server.md)
   + [Webpack, the Asset Pipeline, and Using Assets w/ React](./docs/additional-reading/rails-assets-relative-paths.md)
-  + [Hot Reloading of Assets For Rails Development](./docs/additional-reading/hot-reloading-rails-development.md)
+  + [Hot Reloading of Assets For Rails Development for Asset Pipeline](docs/additional-reading/hot-reloading-rails-development-asset-pipeline.md)
 
 ## **[CONTRIBUTING](CONTRIBUTING.md)**
   + [Generator Testing](./docs/contributor-info/generator-testing.md)

data/docs/additional-reading/{hot-reloading-rails-development.md → hot-reloading-rails-development-asset-pipeline.md}

@@ -1,19 +1,9 @@
-# Live Reloading vs. Hot Reloading (aka HMR)
-
-The use of the [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) provides "Live Reloading" by default. The difference between live and hot reloading is that live reloading will act similarly to hitting refresh in the browser. Hot reloading will attempt to preserve the state of any props.
-
-See the Webpack document [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) for more details on the concepts of live vs. hot reloading.
-
-The remainder of this document discusses HMR.
-
-# Using the Webpacker Webpack setup
-
-If you are using the default Webpacker setup of running the dev server with `bin/webpack-dev-server`, see the [Webpacker Webpack Dev Server discussion of HMR](https://github.com/rails/webpacker/blob/master/docs/webpack-dev-server.md#hot-module-replacement).
+*This document should only be referenced if you're **NOT** using the current technique of the rails/webpacker helpers to place your client-side assets in your `/public` directory.*
 
 
 # Hot Reloading of Assets For Rails Development
 
-_Note, this document is not yet updated for React on Rails v8+. See [PR #865](https://github.com/shakacode/react_on_rails/pull/865) for a detailed example of doing hot reloading using V8+ with Webpack v2. Any volunteers to update this page? See [#772](https://github.com/shakacode/react_on_rails/issues/772) and [#361](https://github.com/shakacode/react-webpack-rails-tutorial/issues/361)._
+_See [PR #865](https://github.com/shakacode/react_on_rails/pull/865) for a detailed example of doing hot reloading using V8+ with Webpack v2. See [#772](https://github.com/shakacode/react_on_rails/issues/772) and [#361](https://github.com/shakacode/react-webpack-rails-tutorial/issues/361)._
 
 ------
 

data/docs/basics/generator-details.md

@@ -44,7 +44,7 @@ More Details:
 Another good option is to create a simple test app per the [Tutorial](../tutorial.md).
 
 # Understanding the Organization of the Generated Client Code
-The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `client/app/bundles`. This encourages for modularity of *domains*.
+The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `app/javascript/app/bundles`. Note, the recommended for bigger projects is `client/app/bundles`. This encourages for modularity of *domains*.
 
 Inside of the generated "HelloWorld" domain you will find the following folders:
 

data/docs/basics/react-server-rendering.md

@@ -1,5 +1,7 @@
 # React Server Rendering
 
+See also [Client vs. Server Rendering](./client-vs-server-rendering.md)
+
 ## What is Server Rendering?
 
 Here's a [decent article to introduce you to server rendering](https://medium.freecodecamp.org/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e). Note, React on Rails takes care of calling the methods in [ReactDOMServer](https://reactjs.org/docs/react-dom-server.html).
@@ -8,7 +10,7 @@ During the Rails rendering of HTML per a browser request, the Rails server will
 
 The default JavaScript interpretter is [ExecJS](https://github.com/rails/execjs). If you want to maximize the perfomance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
 
-See [this note](basics/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering)
+See [this note](./how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering)
 
 
 ## How do you do Server Rendering with React on Rails?

data/docs/basics/recommended-project-structure.md

@@ -17,7 +17,7 @@ app/javascript:
 The problems with this structure and using rails/webpacker to configure Webpack for you:
 
 1. No support for different entry points for server rendering.
-2. Webpacker adds an ex``tra layer of abstraction over Webpack, which you probably don't want.
+2. Webpacker adds an extra layer of abstraction over Webpack, which you probably don't want.
 
 This default rails/webpacker configuration is used for the generator because:
 
@@ -28,6 +28,29 @@ This default rails/webpacker configuration is used for the generator because:
 
 Thus, the generator structure and using rails/webpacker for Webpack configuration **is not recommended** for any commercial projects, especially those that will use server rendering. Instead, the recommended structure is shown in this example app: [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and described below.
 
+## Steps to convert from the generator defaults to use the recommended `/client` directory structure.
+
+1. Move the directory:
+
+```
+mv app/javascript client
+```
+
+2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+
+```yml
+  source_path: client
+```
+
+## Moving node_modules from `/` to `/client` with a custom webpack setup.
+
+`rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration (which is highly recommended!).
+
+1. Move the `/package.json` to `/client/package.json`
+2. Create a `/pacage.json` that delegates to `/client/package.json`. See the example in [spec/dummy/package.json](../../spec/dummy/package.json).
+3. See the webpack configuration in [spec/dummy/client](../../spec/dummy/client) for a webpack configuration example.
+
+
 ## JavaScript Assets
 1. `/client`: All client side JavaScript goes under the `/client` directory. Place all the major domains of the client side app under client.
 1. `/client/app`: All application JavaScript. Note the adherence to the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#naming-conventions) where we name the files to correspond to exported Objects (PascalCase) or exported functions (camelCase). We don't use dashes or snake_case for JavaScript files, except for possibly some config files.

data/docs/basics/webpack-configuration.md

@@ -1,5 +1,16 @@
 # Webpack Configuration: custom setup for Webpack or rails/webpacker?
 
+## Webpack vs. rails/webpacker 
+
+[Webpack](https://webpack.js.org) is the JavaScript npm package that prepares all your client-side assets. The Rails asset pipeline used to be the preferable way to prepare client-side assets. 
+
+[rails/webpacker](https://github.com/rails/webpacker) is the Ruby gem that mainly gives us 2 things:
+
+1. View helpers for placing the Webpack bundles on your Rails views. React on Rails depends on these view helpers.
+2. A layer of abstraction on top of Webpack customization. This is great for demo projects, but most real world projects will want a customized version of Webpack.
+
+# React on Rails
+
 Version 9 of React on Rails added support for the rails/webpacker view helpers so that Webpack produced assets would no longer pass through the Rails asset pipeline. As part of this change, React on Rails added a configuration option to support customization of the node_modules directory. This allowed React on Rails to support the rails/webpacker configuration of the Webpack configuration.
 
 A key decision in your use React on Rails is whether you go with the rails/webpacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.

data/docs/misc-pending/manual-installation-overview.md

@@ -24,7 +24,7 @@ The default path: `public/webpack` can be loaded with webpackConfigLoader as sho
 1. Add  `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
 1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](../../spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
 1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
-1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files. For more information on hot reloading, see [Hot Reloading of Assets For Rails Development](../additional-reading/hot-reloading-rails-development.md)
+1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files. For more information on hot reloading, see [Hot Reloading of Assets For Rails Development](../additional-reading/hot-reloading-rails-development-asset-pipeline.md)
 1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/additional-reading/heroku-deployment.md)
 
 If I missed anything, please submit a PR or file an issue.

data/docs/testimonials/hvmn.md

@@ -0,0 +1,25 @@
+# HVMN Testimonial, Written by Paul Benigeri, October 12, 2018
+
+For some years, we used React on Rails for server-side rendering at [HVMN](https://hvmn.com). Our entire backend was already built in Rails, and we love React. As a content & e-commerce site, server-side rendering is critical, for UX performance and SEO crawler indexing.
+
+During the 12 months leading up to our React on Rails Pro transition, our traffic grew 10x. Our team of 2 engineers was focused on shipping features, and we started to face performance issues. We had some fragment caching of our React server rending, but it didn’t work that well.
+
+I discussed our growing pains with Justin, and as it turned out, ShakaCode just came out with React on Rails Pro and set it up on [egghead.io](https://egghead.io). The performance improvements were impressive, and Justin’s team was an ideal partner to help with the integration.
+
+We decided to give it a shot. Over three weeks, the ShakaCode team helped us migrate to React on Rails Pro, set up Webpack v4, migrated our entire asset pipeline to Webpack v4.
+
+Results were great. Our blog and product pages are 80-90% faster after that effort. The improved fragment caching was quick to set up and made a huge dent in our average server response times. We also observed an additional drop in response times when ShakaCode shipped the standalone Node server-side React renderer.
+
+Working with ShakaCode was a pleasure. Justin is one of the smartest Rails architects I know, and his team was responsive and productive.
+
+The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint.
+
+If you have any questions, please reach out.
+
+Paul Benigeri
+[paul@hvmn.com](mailto:paul@hvmn.com)
+[LinkedIn](https://www.linkedin.com/in/benigeri/)
+
+Related Article: [HVMN’s 90% Reduction in Server Response Time from React on Rails Pro](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
+
+[![image](https://user-images.githubusercontent.com/1118459/46911126-577abd00-ceee-11e8-86c6-6703ff80fc2f.png)](https://www.linkedin.com/in/benigeri/)

data/docs/{testimonials.md → testimonials/testimonials.md}

@@ -1,9 +1,16 @@
 # Testimonials
+[HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./testimonials/hvmn.md)
+
+> The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint.
+
+---
 
 From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
 
 ![2017-01-30_11-33-59](https://cloud.githubusercontent.com/assets/1118459/22443635/b3549fb4-e6e3-11e6-8ea2-6f589dc93ed3.png)
 
+---
+
 From Kyle Maune of Cooper Aerial, May 4, 2018
 
 ![image](https://user-images.githubusercontent.com/1118459/40891236-9b0b406e-671d-11e8-80ee-c026dbd1d5a2.png)

data/docs/tutorial.md

@@ -47,9 +47,10 @@ cd <directory where you want to create your new Rails app>
 rails new test-react-on-rails --webpack=react 
 
 cd test-react-on-rails
+bundle
 ```
 
-Note: if you are installing React On Rails in an existing app or an app that uses Rails pre 5.1.3, you will need to run these two commands as well:
+Note: if you are installing React On Rails in an existing app or an app that uses **Rails pre 5.1.3** (*not for Rails > 5.2*), you will need to run these two commands as well:
 
 ```
 bundle exec rails webpacker:install
@@ -59,7 +60,7 @@ bundle exec rails webpacker:install:react
 Add the **React On Rails** gem to your Gemfile:
 
 ```
-gem 'react_on_rails', '11.1.4'         # prefer exact gem version to match npm version
+gem 'react_on_rails', '11.1.7'         # prefer exact gem version to match npm version
 ```
 
 Note: Latest released React On Rails version is considered stable. Please use the latest version to ensure you get all the security patches and the best support.
@@ -89,7 +90,7 @@ and then run server with
 foreman start -f Procfile.dev
 ```
 
-Visit http://localhost:3000/hello_world and see your **React On Rails** app running!
+Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
 Note, foreman defaults to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.
 
 ### Custom IP & PORT setup (Cloud9 example)
@@ -115,7 +116,7 @@ It's super important to exclude certain directories from RubyMine or else it wil
 ### Create Your Heroku App
 *Assuming you can login to heroku.com and have logged into to your shell for heroku.*
 
-1. Visit https://dashboard.heroku.com/new and create an app, say named `my-name-react-on-rails`:
+1. Visit [https://dashboard.heroku.com/new](https://dashboard.heroku.com/new) and create an app, say named `my-name-react-on-rails`:
 
 ![06](https://cloud.githubusercontent.com/assets/20628911/17465014/1f29bf3c-5cf4-11e6-869f-4215987ae854.png)
 
@@ -137,10 +138,11 @@ Set heroku to use multiple buildpacks:
    gem 'pg'
 ```
 
-![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
+2. Run `bundle`
 
+![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
 
-2. Replace your `database.yml` file with this (assuming your app name is "ror").
+3. Replace your `database.yml` file with this (assuming your app name is "ror").
 
 ```yml
 default: &default
@@ -185,11 +187,15 @@ root "hello_world#index"
 
 Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
 
+Create `/Procfile`. This is what Heroku uses to start your app.
+
 `Procfile`
 ```
 web: bundle exec puma -C config/puma.rb
 ```
 
+Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of 2018-10-13, the docs looked like this:
+
 `config/puma.rb`
 ```rb
 workers Integer(ENV['WEB_CONCURRENCY'] || 2)
@@ -212,9 +218,90 @@ end
 Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
 
 ```
-git add -A
-git commit -m "Latest changes"
+git add -a
+git commit -m "Changes for Heroku"
 git push heroku master
 ```
 
-Feedback is greatly appreciated! As are stars on github! If you want personalized help, don't hesitate to get in touch with us at [contact@shakacode.com](mailto:contact@shakacode.com).
+Then run:
+
+```
+heroku open
+```
+
+and you will see your live app and you can share this URL with your friends. Congrats!
+
+
+## Turning on Server Rendering
+
+You can turn on server rendering by simply changing the `prerender` option to `true`:
+
+```erb
+<%= react_component("HelloWorld", props: @hello_world_props, prerender: true) %>
+```
+
+Then push to Heroku:
+
+```
+git add -a
+git commit -m "Enable server rendering"
+git push heroku master
+```
+
+When you look at the source code for the page (right click, view source in Chrome), you can see the difference between non-server rendering, where your DIV containing your React looks like this:
+
+```html
+<div id="HelloWorld-react-component-b7ae1dc6-396c-411d-886a-269633b3f604"></div>
+```
+
+versus with server rendering:
+
+```html
+<div id="HelloWorld-react-component-d846ce53-3b82-4c4a-8f32-ffc347c8444a"><div data-reactroot=""><h3>Hello, <!-- -->Stranger<!-- -->!</h3><hr/><form><label for="name">Say hello to:</label><input type="text" id="name" value="Stranger"/></form></div></div>
+```
+
+For more details on server rendering, see:
+
+  + [Client vs. Server Rendering](./basics/client-vs-server-rendering.md)
+  + [React Server Rendering](./basics/react-server-rendering.md)
+
+## Moving from the Rails default `/app/javascript` to the recommended `/client` structure
+
+ShakaCode recommends that you use `/client` for your client side app. This way a non-Rails, front-end developer can be at home just by opening up the `/client` directory.
+
+
+1. Move the directory:
+
+```
+mv app/javascript client
+```
+
+2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+
+```yml
+  source_path: client
+```
+
+## Using HMR with the rails/webpacker setup
+
+Start the app using `foreman start -f Procfile.dev-server`.
+
+When you change a JSX file and save, the browser will automatically refresh!
+
+So you get some basics from HMR with no code changes. If you want to go further, take a look at these links:
+
+* https://github.com/rails/webpacker/blob/master/docs/webpack-dev-server.md
+* https://webpack.js.org/configuration/dev-server/
+* https://webpack.js.org/concepts/hot-module-replacement/
+* https://gaearon.github.io/react-hot-loader/getstarted/
+* https://github.com/gaearon/react-hot-loader
+
+React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by rails/webpacker.
+
+## Conclusion
+
+* Browse the docs either on the [gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) or in the [docs directory on github](https://github.com/shakacode/react_on_rails/tree/master/docs)
+
+Feedback is greatly appreciated! As are stars on github! 
+
+If you want personalized help, don't hesitate to get in touch with us at [contact@shakacode.com](mailto:contact@shakacode.com). We offer [React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki) and consulting so you can focus on your app and not on how to make Webpack plus Rails work optimally.

data/lib/react_on_rails/helper.rb

@@ -405,7 +405,9 @@ module ReactOnRails
 
     # Returns object with values that are NOT html_safe!
     def server_rendered_react_component(render_options)
-      return { "html" => "", "consoleReplayScript" => "" } unless render_options.prerender
+      if !render_options.prerender || ReactOnRails::Utils.server_bundle_path_is_http?
+        return { "html" => "", "consoleReplayScript" => "" }
+      end
 
       react_component_name = render_options.react_component_name
       props = render_options.props

data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -95,19 +95,21 @@ module ReactOnRails
           end
         end
 
+        def read_bundle_js_code
+          server_js_file = ReactOnRails::Utils.server_bundle_js_file_path
+          File.read(server_js_file)
+        rescue StandardError => e
+          msg = "You specified server rendering JS file: #{server_js_file}, but it cannot be "\
+                "read. You may set the server_bundle_js_file in your configuration to be \"\" to "\
+                "avoid this warning.\nError is: #{e}"
+          raise ReactOnRails::Error, msg
+        end
+
         def create_js_context
           return if ReactOnRails.configuration.server_bundle_js_file.blank?
 
-          server_js_file = ReactOnRails::Utils.server_bundle_js_file_path
+          bundle_js_code = read_bundle_js_code
 
-          begin
-            bundle_js_code = File.read(server_js_file)
-          rescue StandardError => e
-            msg = "You specified server rendering JS file: #{server_js_file}, but it cannot be "\
-                "read. You may set the server_bundle_js_file in your configuration to be \"\" to "\
-                "avoid this warning.\nError is: #{e}"
-            raise ReactOnRails::Error, msg
-          end
           # rubocop:disable Layout/IndentHeredoc
           base_js_code = <<-JS
 #{console_polyfill}
@@ -118,7 +120,10 @@ module ReactOnRails
           file_name = "tmp/base_js_code.js"
           begin
             if ReactOnRails.configuration.trace
-              Rails.logger.info { "[react_on_rails] Created JavaScript context with file #{server_js_file}" }
+              Rails.logger.info do
+                "[react_on_rails] Created JavaScript context with file "\
+                "#{ReactOnRails::Utils.server_bundle_js_file_path}"
+              end
             end
             ExecJS.compile(base_js_code)
           rescue StandardError => e

data/lib/react_on_rails/utils.rb

@@ -64,6 +64,10 @@ exitstatus: #{status.exitstatus}#{stdout_msg}#{stderr_msg}
       [stdout, stderr, status]
     end
 
+    def self.server_bundle_path_is_http?
+      server_bundle_js_file_path =~ %r{https?://}
+    end
+
     def self.server_bundle_js_file_path
       # Either:
       # 1. Using same bundle for both server and client, so server bundle will be hashed in manifest

data/lib/react_on_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactOnRails
-  VERSION = "11.1.7".freeze
+  VERSION = "11.1.8".freeze
 end

data/lib/react_on_rails/webpacker_utils.rb

@@ -4,6 +4,11 @@ module ReactOnRails
       ReactOnRails::Utils.gem_available?("webpacker")
     end
 
+    def self.dev_server_running?
+      return false unless using_webpacker?
+      Webpacker.dev_server.running?
+    end
+
     def self.bundle_js_file_path_from_webpacker(bundle_name)
       # Note Webpacker 3.4.3 manifest lookup is inside of the public_output_path
       # [2] (pry) ReactOnRails::WebpackerUtils: 0> Webpacker.manifest.lookup("app-bundle.js")

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "11.1.7",
+  "version": "11.1.8",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 11.1.7
+  version: 11.1.8
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-10-11 00:00:00.000000000 Z
+date: 2018-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: addressable
@@ -361,7 +361,7 @@ files:
 - docs/additional-reading/elastic-beanstalk.md
 - docs/additional-reading/foreman-issues.md
 - docs/additional-reading/heroku-deployment.md
-- docs/additional-reading/hot-reloading-rails-development.md
+- docs/additional-reading/hot-reloading-rails-development-asset-pipeline.md
 - docs/additional-reading/images.md
 - docs/additional-reading/node-dependencies-and-npm.md
 - docs/additional-reading/rails-assets-relative-paths.md
@@ -407,7 +407,8 @@ files:
 - docs/misc/code_of_conduct.md
 - docs/misc/doctrine.md
 - docs/misc/rails3.md
-- docs/testimonials.md
+- docs/testimonials/hvmn.md
+- docs/testimonials/testimonials.md
 - docs/tutorial.md
 - lib/generators/USAGE
 - lib/generators/react_on_rails/base_generator.rb