react_on_rails 11.2.2 → 12.0.0.pre.beta.3

data/docs/testimonials/testimonials.md

@@ -1,13 +1,13 @@
 # Testimonials
-# [HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./testimonials/hvmn.md)
+# [HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./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.
 
-Full writeup [here](./testimonials/hvmn.md).
+Full writeup [here](./hvmn.md).
 
 ---
 
-# [Leora from ResortPass](./testimonials/resortpass.md), December 10, 2018
+# [Leora from ResortPass](./resortpass.md), December 10, 2018
 
 Justin and his team were instrumental in assisting us in setting design foundations and standards for our transition to a react on rails application. Just three months of work with the team at Shaka code and we have a main page of our application server-side rendering at exponentially improved speeds. 
 

data/docs/tutorial.md

@@ -1,6 +1,8 @@
 # React on Rails Basic Tutorial
 
-This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 11.2.1.
+*Updated for Ruby 2.7.1, Rails 6.0.3.1, and React on Rails v12.0.0*
+
+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):
 
@@ -17,9 +19,9 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 
 _Note: some of the screen images below show the "npm" command. react_on_rails 6.6.0 and greater uses `yarn`._
 
-## Setting up the environment
+## Setting up your environment
 
-Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 5.x and node version 6+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
+Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 13+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
 
 ```
 nvm install node                # download and install latest stable Node
@@ -27,15 +29,15 @@ nvm alias default node          # make it default version
 nvm list                        # check
 
 brew install yarn               # you can use other installer if desired
-11\.\d+\.\d+
-rvm install 2.5.0               # download and install latest stable Ruby (update to exact version)
-rvm use 2.5.0 --default         # use it and make it default
+rvm install 2.7                 # download and install latest stable Ruby (update to exact version)
+rvm use 2.7 --default           # use it and make it default
 rvm list                        # check
 
 gem install rails               # download and install latest stable Rails
 gem install foreman             # download and install Foreman
 ```
 
+## Create a new Ruby on Rails App
 Then we need to create a fresh Rails application with webpacker react support as following.
 
 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).
@@ -43,98 +45,87 @@ First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If
 ```
 cd <directory where you want to create your new Rails app>
 
-# any name you like for the rails app
-rails new test-react-on-rails --webpack=react 
+# Any name you like for the rails app
+# Skip javascript so will add that next and get the current version 
+rails new --skip-sprockets -J --skip-turbolinks test-react-on-rails-v12-no-sprockets
 
 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** (*not for Rails > 5.2*), you will need to run these two commands as well:
+## Add the webpacker gem
 
 ```
-bundle exec rails webpacker:install
-bundle exec rails webpacker:install:react
+bundle add webpacker                 
+bundle add react_on_rails
 ```
 
-Add the **React On Rails** gem to your Gemfile:
+## Run the webpacker generator
 
 ```
-gem 'react_on_rails', '11.2.1'         # prefer exact gem version to match npm version
+bundle exec rails webpacker:install
+bundle exec rails webpacker:install:react
 ```
 
-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.
-
-Run `bundle` and commit the git repository (or `rails generate` will not work properly)
-
+Let's commit everything before installing React on Rails.
 
 ```
-bundle
-
 # Here are git commands to make a new git repo and commit everything.
 # Newer versions of Rails create the git repo by default.
 git add -A
 git commit -m "Initial commit"
 ```
 
-Install React on Rails: `rails generate react_on_rails:install` or `rails generate react_on_rails:install --redux`. You need to first git commit your files before running the generator, or else it will generate an error.
+## Add the **React On Rails** gem to your `Gemfile`:
+
+To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
+of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
 
 ```
-rails generate react_on_rails:install
-bundle && yarn
+gem 'react_on_rails', '12.0.0'         # prefer exact gem version to match npm version
 ```
 
-Then run server with static client side files:
+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.
 
-```
-foreman start -f Procfile.dev
-```
+Run `bundle` and commit the changes.
 
-To run with the webpack-dev-server:
-```
-foreman start -f Procfile.dev-server
 ```
+bundle
 
-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.
+git commit -am "Added React on Rails Gem"
+```
 
-## Using a pre-release of rails/webpacker
-Until `rails/webpacker` v4 ships, or if you ever want to try out the master branch, you can modify the React on Rails tutorial instructions slightly. You can see the sequence of commits here. To summarize:
+Install React on Rails: `rails generate react_on_rails:install`. You need to first git commit your files before running the generator, or else it will generate an error.
 
-Don't `run rails new with the --webpack=react option`. Instead, add the webpacker gem to the Gemfile such that it points to master, like this if `11.2.1` is the version you want.
+Note, using `redux` is no longer recommended as the basic installer uses React Hooks. 
+If you want the redux install: `rails generate react_on_rails:install --redux`
 
-```ruby
-gem 'webpacker', github: "rails/webpacker"
-gem 'react_on_rails', '11.2.1' # always use exact version
 ```
-
-Then run these commands:
-
-```sh
-bundle exec rails webpacker:install
-yarn add "rails/webpacker" # because the installer has a bug that puts in an invalid version in your package.json.
-bundle exec rails webpacker:install:react
-yarn add --dev webpack-dev-server
-run rails generate react_on_rails:install && bundle && yarn
+rails generate react_on_rails:install
 ```
 
-### Custom IP & PORT setup (Cloud9 example)
+Then run server with a static client bundle. Static means that the bundle is saved in your
+public/webpack/packs directory.
 
-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`.
+```
+foreman start -f Procfile.dev
+```
 
-``` Procfile.dev
-web: rails s -p 8080 -b 0.0.0.0
+## To run with the webpack-dev-server:
+```
+foreman start -f Procfile.dev-hmr
 ```
 
-Then visit https://your-shared-addr.c9users.io:8080/hello_world 
+Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
 
+# HMR vs. React Hot Reloading
 
-## RubyMine
+First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
 
-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/webpacker.yml`, which default to `public/packs` and `public/packs-test`
-* `node_modules`
+The basic setup will have HMR working with the default webpacker 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
 
@@ -157,17 +148,16 @@ Set heroku to use multiple buildpacks:
 
 ### Swap out sqlite for postgres by doing the following:
 
-1. Delete the line with `sqlite` and replace it with:
+Run these two commands:
 
-```ruby
-   gem 'pg'
 ```
-
-2. Run `bundle`
+bundle remove sqlite3
+bundle add pg
+```
 
 ![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
 
-3. Replace your `database.yml` file with this (assuming your app name is "ror").
+### Replace your `database.yml` file with this (assuming your app name is "ror").
 
 ```yml
 default: &default
@@ -195,7 +185,6 @@ production:
 Then you need to setup postgres so you can run locally:
 
 ```
-bundle
 rake db:setup
 rake db:migrate
 ```
@@ -219,7 +208,7 @@ Create `/Procfile`. 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 2018-10-13, the docs looked like this:
+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
@@ -240,10 +229,19 @@ on_worker_boot do
 end
 ```
 
+Next, update your `package.json` to specify the version of yarn and node. Add this section:
+
+```json
+  "engines": {
+    "node": "13.9.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!
 
 ```
-git add -a
+git add -A
 git commit -m "Changes for Heroku"
 git push heroku master
 ```
@@ -256,7 +254,6 @@ 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`:
@@ -265,10 +262,20 @@ You can turn on server rendering by simply changing the `prerender` option to `t
 <%= 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 webpack-dev-server, you'll need to add that line.
+
 Then push to Heroku:
 
 ```
-git add -a
+git add -A
 git commit -m "Enable server rendering"
 git push heroku master
 ```
@@ -309,7 +316,7 @@ mv app/javascript client
 
 ## Using HMR with the rails/webpacker setup
 
-Start the app using `foreman start -f Procfile.dev-server`.
+Start the app using `foreman start -f Procfile.dev-hmr`.
 
 When you change a JSX file and save, the browser will automatically refresh!
 
@@ -318,11 +325,30 @@ So you get some basics from HMR with no code changes. If you want to go further,
 * 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.
 
+
+### 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
+
+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/webpacker.yml`, which default to `public/packs` and `public/packs-test`
+* `node_modules`
+
+
+
+
 ## 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)

data/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest/presets/js-with-ts',
+  testEnvironment: 'jsdom',
+};

data/lib/generators/react_on_rails/base_generator.rb

@@ -33,7 +33,7 @@ module ReactOnRails
                         app/views/layouts/hello_world.html.erb
                         config/initializers/react_on_rails.rb
                         Procfile.dev
-                        Procfile.dev-server]
+                        Procfile.dev-hmr]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
@@ -107,7 +107,7 @@ module ReactOnRails
                 foreman start -f Procfile.dev
 
             - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
-              and bin/webpack-dev-server. Or use Procfile.dev-server.
+              and bin/webpack-dev-server. Or use Procfile.dev-hmr.
 
             - To server render, change this line app/views/hello_world/index.html.erb to
               `prerender: true` to see server rendering (right click on page and select "view source").

data/lib/generators/react_on_rails/dev_tests_generator.rb

@@ -50,7 +50,7 @@ module ReactOnRails
         contents = File.read(package_json)
         replacement_value = <<-STRING
   "scripts": {
-    "postinstall": "yarn link react-on-rails",
+    "postinstall": "yalc link react-on-rails",
         STRING
         new_client_package_json_contents = contents.gsub(/ {2}"scripts": {/,
                                                          replacement_value)

data/lib/generators/react_on_rails/generator_helper.rb

@@ -15,13 +15,11 @@ module GeneratorHelper
   end
 
   def setup_file_error(file, data)
-    # rubocop:disable Layout/IndentHeredoc
-    <<-MSG
-#{file} was not found.
-Please add the following content to your #{file} file:
-#{data}
+    <<~MSG
+      #{file} was not found.
+      Please add the following content to your #{file} file:
+      #{data}
     MSG
-    # rubocop:enable Layout/IndentHeredoc
   end
 
   def empty_directory_with_keep_file(destination, config = {})

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev

@@ -4,4 +4,6 @@ web: rails s -p 3000
 # Next line runs a watch process with webpack to compile the changed files.
 # When making frequent changes to client side assets, you will prefer building webpack assets
 # upon saving rather than when you refresh your browser page.
-client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack -w'
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/webpack
+client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr

@@ -0,0 +1,26 @@
+# Procfile for development using HMR
+
+web: rails s -p 3000
+
+# Note, hot and live reloading don't work with the default generator setup on
+# top of the rails/webpacker Webpack config with server rendering.
+# If you have server rendering enabled (prerender is true), you either need to
+# a. Ensure that you have dev_server.hmr and dev_server.inline BOTH set to false,
+#    and you have this option in your config/initializers/react_on_rails.rb:
+#      config.same_bundle_for_client_and_server = true
+#    If you have either config/webpacker.yml option set to true, you'll see errors like
+#    "ReferenceError: window is not defined" (if hmr is true)
+#    "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
+# b. Skip using the webpack-dev-server. bin/webpack --watch is typically
+     fast enough.
+# c. See the React on Rails README for a link to documentation for how to setup
+#    SSR with HMR and React hot loading using the webpack-dev-server only for the
+#    client bundles and a static file for the server bundle.
+
+# Run the webpack-dev-server for client and maybe server files
+webpack-dev-server: bin/webpack-dev-server
+
+# Keep the JS fresh for server rendering. Remove if not server rendering.
+# Especially if you have not configured generation of a server bundle without a hash.
+# as that will conflict with the manifest created by the bin/webpack-dev-server
+# rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,45 +1,25 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 
-export default class HelloWorld extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired, // this is passed from the Rails view
-  };
+const HelloWorld = (props) => {
+  const [name, setName] = useState(props.name);
 
-  /**
-   * @param props - Comes from your rails view.
-   */
-  constructor(props) {
-    super(props);
+  return (
+    <div>
+      <h3>Hello, {name}!</h3>
+      <hr />
+      <form>
+        <label htmlFor="name">
+          Say hello to:
+          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </form>
+    </div>
+  );
+};
 
-    // How to set initial state in ES6 class syntax
-    // https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
-    this.state = { name: this.props.name };
-  }
+HelloWorld.propTypes = {
+  name: PropTypes.string.isRequired, // this is passed from the Rails view
+};
 
-  updateName = (name) => {
-    this.setState({ name });
-  };
-
-  render() {
-    return (
-      <div>
-        <h3>
-          Hello, {this.state.name}!
-        </h3>
-        <hr />
-        <form >
-          <label htmlFor="name">
-            Say hello to:
-          </label>
-          <input
-            id="name"
-            type="text"
-            value={this.state.name}
-            onChange={(e) => this.updateName(e.target.value)}
-          />
-        </form>
-      </div>
-    );
-  }
-}
+export default HelloWorld;