Also consult the instructions for installing on a fresh Rails app, see the React on Rails Basic Tutorial.
If you have rails-5 API only project, first convert the rails-5 API only app to rails app before getting started.
-
Add the following to your Gemfile and
bundle install
. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in yourclient/package.json
file.gem "react_on_rails", "11.1.4" # Update to the current version gem "webpacker", "~> 3" # Newer versions might be supported
-
Run the following 2 commands to install Webpacker with React. Note, if you are using an older version of Rails than 5.1, you'll need to install webpacker with React per the instructions here.
$ bundle exec rails webpacker:install $ bundle exec rails webpacker:install:react
-
Commit this to git (or else you cannot run the generator unless you pass the option
--ignore-warnings
). -
See help for the generator:
$ rails generate react_on_rails:install --help
-
Run the generator with a simple "Hello World" example (more options below):
$ rails generate react_on_rails:install
-
Ensure that you have
foreman
installed:gem install foreman
. -
Start your Rails server:
$ foreman start -f Procfile.dev
-
Visit localhost:3000/hello_world. Note:
foreman
defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you canexport PORT=3000
to use the Rails default port of 3000. For the hello_world example this is already set.
See the Installation Overview for a concise set summary of what's in a React on Rails installation.
All JavaScript in React On Rails is loaded from npm: react-on-rails. To manually install this (you did not use the generator), assuming you have a standard configuration, run this command (assuming you are in the directory where you have your node_modules
):
$ yarn add react-on-rails --exact
That will install the latest version and update your package.json. NOTE: the --exact
flag will ensure that you do not have a "~" or "^" for your react-on-rails version in your package.json.
React on Rails users should set configuration value compile
to false, as React on Rails handles compilation for test and production environments.