This tutorial setups up a new Rails app with React on Rails, demonstrating Rails + React + Redux + Server Rendering.
After finishing this tutorial you will get application that can do the following (live on Heroku):
You can find here:
Old version of this app is here:
By the time you read this, the latest may have changed. Be sure to check the versions here:
##Setting up the environment
Trying out React on Rails is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 4.x and node version 5+. I recommend rvm and nvm to install Ruby and Node. Rails can be installed as ordinary gem.
nvm install node # download and install latest stable Node
nvm alias default node # make it default version
nvm list # check
rvm install 2.3.1 # download and install latest stable Ruby (update to exact version)
rvm use 2.3.1 --default # use it and make it default
rvm list # check
gem install rails # download and install latest stable Rails
Then we need to create a fresh Rails application as following:
cd <basic directory where you want to create your new Rails app>
rails new test-react-on-rails # any name you like
cd test-react-on-rails
Add React On Rails gem to your Gemfile (vim Gemfile or nano Gemfile or in IDE):
gem 'react_on_rails', '~>6' # use latest gem version > 6
put everything under git repository (or rails generate will not work properly)
# Here are git commands to make a new git repo and commit everything
git init
git add -A
git commit -m "Initial commit"
update dependencies and generate empty app via react_on_rails:install. If you haven't done first git commit it will generate error and you just need to commit.
bundle
rails generate react_on_rails:install
bundle && npm install
and then run server with
foreman start -f Procfile.dev
Visit http://localhost:3000/hello_world and see your React On Rails app running!
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
web: rails s -p 8080 -b 0.0.0.0
Then visit https://your-shared-addr.c9users.io:8080/hello_world
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.
app/assets/webpackclient/node_modules
Assuming you can login to heroku.com and have logged into to your shell for heroku.
- Visit https://dashboard.heroku.com/new and create an app, say named
my-name-react-on-rails:
Run this command that looks like this from your new heroku app
heroku git:remote -a my-name-react-on-rails
Set heroku to use multiple buildpacks:
heroku buildpacks:set heroku/ruby
heroku buildpacks:add --index 1 heroku/nodejs
- Delete the line with
sqliteand replace it with:
gem 'pg'
- Replace your
database.ymlfile with this (assuming your app name is "ror").
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_productionThen you need to setup postgres so you can run locally:
bundle
rake db:setup
rake db:migrate
I'd recommend adding this line to the top of your routes.rb. That way, your root page will go to the Hello World page for React On Rails.
root "hello_world#index"
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 push heroku master
Here it is:
Feedback is greatly appreciated! As are stars on github!