react_on_rails 11.0.5 → 13.4.0

data/docs/guides/render-functions-and-railscontext.md

@@ -0,0 +1,205 @@
+# Render-Functions and the Rails Context 
+
+## Render-Functions
+
+When you use a render-function to create react components (or renderedHtml on the server), or you
+used shared redux stores, you get two params passed to your function that creates a React component:
+
+1. `props`: Props that you pass in the view helper of either `react_component` or `redux_store`
+2. `railsContext`: Rails contextual information, such as the current pathname. You can customize
+   this in your config file. **Note**: The `railsContext` is not related to the concept of a
+   ["context" for React components](https://facebook.github.io/react/docs/context.html#how-to-use-context).
+
+These parameters (`props` and `railsContext`) will be the same regardless of either client or server
+side rendering, except for the key `serverSide` based on whether or not you are server rendering.
+
+While you could manually configure your Rails code to pass the "`railsContext` information" with
+the rest of your "props", the `railsContext` is a convenience because it's passed consistently to
+all invocations of Render-Functions.
+
+For example, suppose you create a "render-function" called MyAppComponent.
+
+```js
+import React from 'react';
+const MyAppComponent = (props, railsContext) => (
+  // NOTE: need to wrap in a function so this is proper React function component that can use
+  // hooks
+ 
+  // the props get passed again, but we ignore since we use a closure
+  // or should we
+  () =>
+      <div>
+        <p>props are: {JSON.stringify(props)}</p>
+        <p>railsContext is: {JSON.stringify(railsContext)}
+        </p>
+      </div>
+);
+export default MyAppComponent;
+```
+
+------------------------------
+
+_This would be alternate API where you have to call React.createElement and the React on Rails code doesn't do that._
+
+```js
+import React from 'react';
+const MyAppComponent = (props, railsContext) => (
+  // NOTE: need to wrap in a function so this is proper React function component that can use
+  // hooks
+  React.createElement(
+    () =>
+      <div>
+        <p>props are: {JSON.stringify(props)}</p>
+        <p>railsContext is: {JSON.stringify(railsContext)}
+        </p>
+      </div>,
+  props)
+);
+export default MyAppComponent;
+```
+
+------------------------------------
+
+*Note: you will get a React browser console warning if you try to serverRender this since the value of `serverSide` will be different for server rendering.*
+
+So if you register your render-function `MyAppComponent`, it will get called like:
+
+```js
+reactComponent = MyAppComponent(props, railsContext);
+```
+
+and, similarly, any redux store is always initialized with 2 parameters:
+
+```js
+reduxStore = MyReduxStore(props, railsContext);
+```
+
+Note: you never make these calls. React on Rails makes these calls when it does either client or server rendering. You will define functions that take these 2 params and return a React component or a Redux Store. Naturally, you do not have to use second parameter of the railsContext if you do not need it. If you don't take a second parameter, then you're probably defining a React function component and you will simply return a React Element, often just JSX.
+
+(Note: see below [section](#multiple-react-components-on-a-page-with-one-store) on how to setup redux stores that allow multiple components to talk to the same store.)
+
+The `railsContext` has: (see implementation in file [ReactOnRails::Helper](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb), method `rails_context` for the definitive list).
+
+```ruby
+  {
+    railsEnv: Rails.env
+    inMailer: in_mailer?,
+    # Locale settings
+    i18nLocale: I18n.locale,
+    i18nDefaultLocale: I18n.default_locale,
+    rorVersion: ReactOnRails::VERSION,
+    rorPro: ReactOnRails::Utils.react_on_rails_pro?
+    
+    # URL settings
+    href: request.original_url,
+    location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}": ""}",
+    scheme: uri.scheme, # http
+    host: uri.host, # foo.com
+    port: uri.port,
+    pathname: uri.path, # /posts
+    search: uri.query, # id=30&limit=5
+    httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"]
+
+    # Other
+    serverSide: boolean # Are we being called on the server or client? Note: if you conditionally
+     # render something different on the server than the client, then React will only show the
+     # server version!
+  }
+```
+
+Plus, you can add your customizations to this. See "rendering extension" below.
+
+## Rails Context
+
+The `railsContext` is a second param passed to your render-functions for React components. This is in addition to the props that are passed from the `react_component` Rails helper. For example:
+
+ERB view file: 
+
+```ruby
+  # Rails View
+  <%= react_component("HelloWorld", props: { name: "Stranger" }) %>
+```
+
+This is what your HelloWorld.js file might contain. The railsContext is always available for any parameters that you _always_ want available for your React components. It has _nothing_ to do with the concept of the [React Context](https://reactjs.org/docs/context.html).
+
+```js
+import React from 'react';
+
+export default (props, railsContext) => {
+  // Note, wrap in a function so this is React function component
+  return () => (
+    <div>
+      Your locale is {railsContext.i18nLocale}.<br/>
+      Hello, {props.name}!
+    </div>
+  );
+};
+``` 
+
+## Why is the railsContext only passed to render-functions?
+
+There's no reason that the railsContext would ever get passed to your React component unless the value is explicitly put into the props used for rendering. If you create a react component, rather than a render-function, for use by React on Rails, then you get whatever props are passed in from the view helper, which **does not include the Rails Context**. It's trivial to wrap your component in a "render-function" to return a new component that takes both:
+
+```js
+import React from 'react';
+import AppComponent from './AppComponent';
+const AppComponentWithRailsContext = (props, railsContext) => (
+  // Create a React Function Component so you can
+  // use the React Hooks API in this React Function Component
+  () => <AppComponent {...{...props, railsContext}}/>
+)
+export default AppComponentWithRailsContext;
+```
+
+Consider this line in depth:
+
+```js
+  <AppComponent {...{ ...props, railsContext }}/>
+```
+
+The outer `{...` is for the [JSX spread operator for attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) and the innner `{...` is for the [Spread in object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals).
+
+## Use Cases
+
+### Heroku Preboot Considerations
+
+[Heroku Preboot](https://devcenter.heroku.com/articles/preboot) is a feature on Heroku that allows for faster deploy times. When you promote your staging app to production, Preboot simply switches the production server to point at the staging app's container. This means it can deploy much faster since it doesn't have to rebuild anything. However, this means that if you use the [Define Plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) to provide the rails environment to your client code as a variable, that variable will erroneously still have a value of `Staging` instead of `Production`. The `Rails.env` provided at runtime in the railsContext is, however, accurate.
+
+### Needing the current URL path for server rendering
+
+Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server-render the code, your code will need to know the current URL/path. The new `railsContext` has this information. Your application will apply something like an "active" class on the server rendering.
+
+### Configuring different code for server side rendering
+
+Suppose you want to turn off animation when doing server side rendering. The `serverSide` value is just what you need.
+
+## Customization of the rails_context
+
+You can customize the values passed in the `railsContext` in your `config/initializers/react_on_rails.rb`. Here's how.
+
+Set the config value for the `rendering_extension`:
+
+```ruby
+  config.rendering_extension = RenderingExtension
+```
+
+Implement it like this above in the same file. Create a class method on the module called `custom_context` that takes the `view_context` for a param.
+
+See [spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example.
+
+```ruby
+module RenderingExtension
+
+  # Return a Hash that contains custom values from the view context that will get merged with
+  # the standard rails_context values and passed to all calls to render-functions used by the
+  # react_component and redux_store view helpers
+  def self.custom_context(view_context)
+    {
+     somethingUseful: view_context.session[:something_useful]
+    }
+  end
+end
+```
+
+In this case, a prop and value for `somethingUseful` will go into the railsContext passed to all react_component and redux_store calls. You may set any values available in the view rendering context.
+

data/docs/guides/rspec-configuration.md

@@ -0,0 +1,73 @@
+# RSpec Configuration
+_Click [here for minitest](https://www.shakacode.com/react-on-rails/docs/guides/minitest-configuration/)_
+
+# If your webpack configurations correspond to Shakapacker's default setup
+If you're able to configure your webpack configuration to be run by having your webpack configuration
+returned by the files in `/config/webpack`, then you have 2 options to ensure that your files are
+compiled by webpack before running tests and during production deployment:
+
+1. **Use Shakapacker's compile option**: Configure your `config/shakapacker.yml` so that `compile: true` is for `test` and `production`
+   environments. Ensure that your `source_path` is correct, or else `Shakapacker` won't correctly
+   detect changes.
+2. **Use the react_on_rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](https://www.shakacode.com/react-on-rails/docs/guides/configuration/).
+
+```yml
+  config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/shakapacker"
+```
+
+Which should you use? If you're already using the `Shakapacker` way to configure webpack, then
+you can keep things simple and use the `Shakapacker` options.
+
+# Checking for stale assets using React on Rails
+
+Because you will probably want to run RSpec tests that rely on compiled webpack assets (typically, your integration/feature specs where `js: true`), you will want to ensure you don't accidentally run tests on missing or stale webpack assets. If you did use stale Webpack assets, you will get invalid test results as your tests do not use the very latest JavaScript code.
+
+As mentioned above, you can configure `compile: true` in `config/shakapacker.yml` _if_ you've got configuration for
+your webpack in the standard `Shakapacker` spot of `config/webpack/<NODE_ENV>.js`
+
+ReactOnRails also provides a helper method called `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. Call this method from inside of the `RSpec.configure` block in your `spec/rails_helper.rb` file, passing the config as an argument. See file [lib/react_on_rails/test_helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/test_helper.rb) for more details. You can customize this to your particular needs by replacing any of the default components used by `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`.
+
+```ruby
+RSpec.configure do |config|
+  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+```
+
+You can pass one or more RSpec metatags as an optional second parameter to this helper method if you want this helper to run on examples other than where `:js`, `:server_rendering`, or `:controller` (those are the defaults). 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). The helper is configurable in terms of what command is used to prepare the files. If you don't specify these metatags for your relevant JavaScript tests, then you'll need to do the following.
+
+If you are using Webpack to build CSS assets, you should do something like this to ensure that you assets are built for any specs under `specs/requests` or `specs/features`:
+
+```ruby
+  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config, :requires_webpack_assets)
+  config.define_derived_metadata(file_path: %r{spec/(features|requests)}) do |metadata|
+    metadata[:requires_webpack_assets] = true
+  end
+```
+
+Please take note of the following:
+- If you are using Shakapacker, be **SURE** to configure the `source_path` in your `config/shakapacker.yml` unless you are using the defaults for Shakapacker.
+
+- This utility uses your `build_test_command` to build the static generated files. This command **must not** include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles. If you are using Shakapacker, the default value will come from the `config/shakapacker.yml` value for the `public_output_path` and the `source_path`
+
+- If you add an older file to your source files, that is already older than the produced output files, no new recompilation is done. The solution to this issue is to clear out your directory of webpack generated files when adding new source files that may have older dates.
+
+- By default, the webpack processes look in the webpack generated files folder, configured via the `config/shakapacker.yml` config values of `public_root_path` and `public_output_path`. If the webpack generated files folder is missing, is empty, or contains files in the `config.webpack_generated_files` list with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets.
+
+The following `config/react_on_rails.rb` settings **must** match your setup:
+```ruby
+  # Define the files we need to check for webpack compilation when running tests.
+  config.webpack_generated_files = %w( manifest.json )
+
+  # OR if you're not hashing the server-bundle.js, then you should include your server-bundle.js in the list.
+  # config.webpack_generated_files = %w( server-bundle.js manifest.json )
+
+  # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  # with rspec then this controls what yarn command is run
+  # to automatically refresh your webpack assets on every test run.
+  config.build_test_command = "yarn run build:test"
+```
+
+If you want to speed up the re-compiling process so you don't wait to run your tests to build the files, you can run your test compilation with the "watch" flags. For example, `yarn run build:test --watch`
+
+![2016-01-27_02-36-43](https://cloud.githubusercontent.com/assets/1118459/12611951/7c56d070-c4a4-11e5-8a80-9615f99960d9.png)
+
+![2016-01-27_03-18-05](https://cloud.githubusercontent.com/assets/1118459/12611975/a8011654-c4a4-11e5-84f9-1baca4835b4b.png)

data/docs/guides/tutorial.md

@@ -0,0 +1,371 @@
+# React on Rails Basic Tutorial
+
+_Also see the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr)_ 
+
+-----
+
+*Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v7*
+
+This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
+
+After finishing this tutorial you will get an application that can do the following (live on Heroku):
+
+![example](https://cloud.githubusercontent.com/assets/371302/17368567/111cc722-596b-11e6-9b72-ac5967a60e42.gif)
+
+You can find it here:
+* [Source code for this app in PR, using the --redux option](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/17) and [for Heroku](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/18).
+* [Live on Heroku](https://react-on-rails-redux-gen-8-0-0.herokuapp.com/)
+
+By the time you read this, the latest may have changed. Be sure to check the versions here:
+
+* https://rubygems.org/gems/react_on_rails
+* https://www.npmjs.com/package/react-on-rails
+
+# Table of Content:
+- [Installation](#installation)
+  - [Setting up your environment](#setting-up-your-environment)
+  - [Create a new Ruby on Rails App](#create-a-new-ruby-on-rails-app)
+  - [Add the Shakapacker and react_on_rails gems](#add-the-shakapacker-and-react_on_rails-gems)
+  - [Run the Shakapacker generator](#run-the-shakapacker-generator)
+  - [Run the React on Rails Generator](#run-the-react-on-rails-generator)
+  - [Setting up your environment variables](#setting-up-your-environment-variables)
+  - [Running the app](#running-the-app)
+- [HMR vs. React Hot Reloading](#hmr-vs-react-hot-reloading)
+- [Deploying to Heroku](#deploying-to-heroku)
+  - [Create Your Heroku App](#create-your-heroku-app)
+  - [Swap out sqlite for postgres](#swap-out-sqlite-for-postgres)
+- [Other features](#other-features)
+  - [Turning on Server Rendering](#turning-on-server-rendering)
+  - [Moving from the Rails default `/app/javascript` to the recommended `/client` structure](#moving-from-the-rails-default-appjavascript-to-the-recommended-client-structure)
+  - [Using HMR with the shakapacker setup](#using-hmr-with-the-shakapacker-setup)
+  - [Custom IP & PORT setup (Cloud9 example)](#custom-ip--port-setup-cloud9-example)
+  - [RubyMine performance tip](#rubymine-performance-tip)
+- [Conclusion](#conclusion)
+# Installation
+## Setting up your environment
+
+Trying out **React on Rails** is super easy, so long as you have the basic prerequisites.
+
+- **Ruby:** We support all active Ruby versions but recommend using the latest stable Ruby version. Solutions like [rvm](https://rvm.io) or [rbenv](https://github.com/rbenv/rbenv) make it easy to have multiple Ruby versions on your machine.
+- **Rails:** We support Rails 6 and later.
+- **Nodejs:** We support all [active Node versions](https://github.com/nodejs/release#release-schedule) but recommend using the latest LTS release of Nodejs for the longest support. Older inactive node versions might still work but is not guaranteed. We also recommend using [nvm](https://github.com/nvm-sh/nvm/) to ease using different node versions in different projects.
+- **yarn:** We use [yarn classic](https://classic.yarnpkg.com/) as our node package manager.
+- You need to have either [Overmind](https://github.com/DarthSim/overmind) or [Foreman](https://rubygems.org/gems/foreman) as a process manager.
+
+## Create a new Ruby on Rails App
+Then we need to create a fresh Rails application as follows.
+
+First, be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
+
+```bash
+# For Rails 6.x
+rails new test-react-on-rails --skip-javascript
+
+# For Rails 7.x
+rails new test-react-on-rails --skip-javascript
+
+cd test-react-on-rails
+```
+Note: You can use `--database=postgresql` option to use Postgresql for the database.
+
+## Add the Shakapacker and react_on_rails gems
+We recommend using the latest version of these gems. Otherwise, specify the
+exact versions of both the gem and npm packages. In other words, don't use
+the `^` or `~` in the version specifications.
+
+```bash
+bundle add react_on_rails --strict
+bundle add shakapacker --strict
+```
+
+Note: The 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.
+
+## Run the Shakapacker generator
+
+```bash
+bundle exec rails shakapacker:install
+```
+
+Commit all the changes so far to avoid getting errors in the next step.
+
+```bash
+git commit -am "Initial commit"
+```
+
+Alternatively, you can use `--ignore-warnings` in the next step.
+
+## Run the React on Rails Generator
+
+```bash
+rails generate react_on_rails:install
+```
+
+You will be prompted to approve changes in certain files. Press `enter` to proceed
+one by one or enter `a` to replace all configuration files required by the project.
+You can check the diffs before you commit to see what changed.
+
+Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
+If you want the redux install, run:
+
+```bash
+rails generate react_on_rails:install --redux
+```
+
+## Setting up your environment variables
+
+Add the following variable to your environment:
+
+```
+EXECJS_RUNTIME=Node
+```
+
+Then run the server with one of the following options:
+
+## Running the app
+
+```bash
+./bin/dev # For HMR
+# or
+./bin/dev-static # Without HMR, statically creating the bundles
+```
+
+Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
+
+# HMR vs. React Hot Reloading
+
+First, check that the `hmr` and the `inline` options are `true` in your `config/shakapacker.yml` file.
+
+The basic setup will have HMR working with the default Shakapacker setup. The basic
+[HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special
+React setup, will cause a full page refresh each time you save a file.
+
+# Deploying to Heroku
+
+## Create Your Heroku App
+*Assuming you can log in to heroku.com and have logged into your shell for Heroku.*
+
+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)
+
+Run this command that looks like this from your new Heroku app
+
+```bash
+heroku git:remote -a my-name-react-on-rails
+```
+
+Set heroku to use multiple buildpacks:
+
+```bash
+heroku buildpacks:set heroku/ruby
+heroku buildpacks:add --index 1 heroku/nodejs
+```
+
+## Swap out sqlite for postgres:
+Heroku requires your app to use Postgresql. If you have not setup your app
+with Postgresql, you need to change your app settings to use this database.
+
+Run the following command (in Rails 6+):
+
+```bash
+rails db:system:change --to=postgresql
+```
+
+If for any reason you want to do this process manually, run these two commands:
+
+```bash
+bundle remove sqlite3
+bundle add pg
+```
+
+![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
+
+Now replace your `database.yml` file with this (assuming your app name is "ror").
+
+```yml
+default: &default
+  adapter: postgresql
+  username:
+  password:
+  host: localhost
+
+development:
+  <<: *default
+  database: ror_development
+
+# Warning: The database defined as "test" will be erased and
+# re-generated from your development database when you run "rake".
+# Do not set this db to the same as development or production.
+test:
+  <<: *default
+  database: ror_test
+
+production:
+  <<: *default
+  database: ror_production
+```
+
+Then you need to setup postgres so you can run locally:
+
+```bash
+rake db:setup
+rake db:migrate
+```
+
+![08](https://cloud.githubusercontent.com/assets/20628911/17465016/1f3559f0-5cf4-11e6-8ab4-c5572e4644a5.png)
+
+Optionally you can add this line to your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
+
+```ruby
+root "hello_world#index"
+```
+
+![09](https://cloud.githubusercontent.com/assets/20628911/17465018/1f3b685e-5cf4-11e6-93f8-105fc48517d0.png)
+
+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` with the following content. This is what Heroku uses to start your app.
+
+```
+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 2020-06-04, the docs looked like this:
+
+`config/puma.rb`
+```rb
+workers Integer(ENV['WEB_CONCURRENCY'] || 2)
+threads_count = Integer(ENV['RAILS_MAX_THREADS'] || 5)
+threads threads_count, threads_count
+
+preload_app!
+
+rackup      DefaultRackup
+port        ENV['PORT']     || 3000
+environment ENV['RACK_ENV'] || 'development'
+
+on_worker_boot do
+  # Worker specific setup for Rails 4.1+
+  # See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot
+  ActiveRecord::Base.establish_connection
+end
+```
+
+Next, update your `package.json` to specify the version of yarn and node. Add this section:
+
+```json
+  "engines": {
+    "node": "16.19.0",
+    "yarn": "1.22.4"
+  },
+```
+
+Then after all changes are done don't forget to commit them with git and finally, you can push your app to Heroku!
+
+```bash
+git add -A
+git commit -m "Changes for Heroku"
+git push heroku master
+```
+
+Then run:
+
+```bash
+heroku open
+```
+
+and you will see your live app and you can share this URL with your friends. Congrats!
+
+# Other features
+## 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) %>
+```
+
+If you want to test this out with HMR, then you also need to add this line to your
+`config/intializers/react_on_rails.rb`
+
+```ruby
+  config.same_bundle_for_client_and_server = true
+```
+
+More likely, you will create a different build file for server rendering. However, if you want to
+use the same file from the shakapack-dev-server, you'll need to add that line.
+
+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](https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/)
+  + [React Server Rendering](https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/)
+
+## 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:
+
+```bash
+mv app/javascript client
+```
+
+2. Edit your `/config/shakapacker.yml` file. Change the `default/source_path`:
+
+```yml
+source_path: client
+```
+
+## Using HMR with the shakapacker setup
+
+Start the app using `overmind start -f Procfile.dev` or `foreman start -f Procfile.dev`.
+
+When you change and save a JSX file, 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:
+
+* [webpack-dev-server](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack-dev-server.md)
+* [DevServer](https://webpack.js.org/configuration/dev-server/)
+* [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/)
+
+React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by `shakapcker`.
+
+
+## Custom IP & PORT setup (Cloud9 example)
+
+In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example, to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
+
+``` Procfile.dev
+web: rails s -p 8080 -b 0.0.0.0
+```
+
+Then visit https://your-shared-addr.c9users.io:8080/hello_world
+
+## RubyMine performance tip
+
+It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
+
+* Generated files, per the settings in your `config/shakapacker.yml`, which default to `public/packs` and `public/packs-test`
+* `node_modules`
+
+# Conclusion
+
+* Browse the docs on [our documentation website](https://www.shakacode.com/react-on-rails/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.