How to run React and Rails on the same server


When I started learning Rails, I was building the front side with VIEW using ERB, I overheard that SPA is popular these days.

For the time being, I decided to run it on another server and somehow cleared the CORS restrictions etc., and it became possible to exchange Rails and React safely.

How do you deploy this one on heroku dyno? .. .. When I was worried, there was an easy-to-understand article on Heroku's official blog, and I was finally able to build it.

I thought it would be helpful if there were similar people, so I posted it.


--Only the minimum necessary parts are quoted from the Heroku blog article. --Basic installation of Ruby, Rails, Node, npm OR yarn, etc. --Have created a Rails app --I have created a React app with create-react-app --Has hosted on Heroku (deployed on git)

Reference article: A Rock Solid, Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku

Creating a Rails app

Create a rails app with the rails new command.

Don't forget to switch to api mode with the --api command

rails new rails_app --api

Let's check if the created application starts.


cd rails_app
rails s

Creating a React app

Build a React app with the name client on the Rails app root directory.


npm create-react-app client

Just like Rails, let's see if React works.


cd client
npm start 

At this rate, React and Rails will have different ports during development. Add the settings to package.json.


  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001", #Add here

This setting makes the Rails recognize that the React app is running on port 3001.

React --Rails Local Edition

Create a task for launching the local environment.

Write a command to launch React and Rails in Procfile and call it in a Rails task.

Procfile is a file used on heroku and can be described by process type: command.

<process type>: <command>

This time, write the start command of Rails application and React application with the file name in the root directory.

web: cd client && PORT=3000 npm start
api: PORT=3001 && bundle exec rails s

I want to keep the calling command simple, so I'll make it a task.


namespace :start do
    desc 'Start development server'
    task :dev do
      exec 'heroku local -f'

Kick the procfile startup command with task.

rake start:dev

I think both React and Rails have been launched.

If it is difficult to understand from the log on the terminal, it will be easier to understand if Rails side returns some Json so that it can be fetched from React side.

React --Rails Heroku

Deployment on Heroku, the main theme.

First, create a package.json file in the root directory.

Write a command to create a React static file in the Rails public directory.


    "name": "list-of-ingredients",
    "license": "MIT",
    "engines": {
      "node": "10.15.3",
      "yarn": "1.15.2"
    "scripts": {
      "build": "yarn --cwd client install && yarn --cwd client build",
      "deploy": "cp -a client/build/. public/",
      "heroku-postbuild": "yarn build && yarn deploy"

Create a Procfile for production and write the rails start command.

If necessary, write the migrate command after release.


web: bundle exec rails s
release: bin/rake db:migrate

Use CLI to create dyno on heroku and configure build pack.

Creating an app

heroku apps:create

Build pack settings

heroku buildpacks:add heroku/nodejs --index 1
heroku buildpacks:add heroku/ruby --index 2

Now that you're ready on heroku, push with git.

git add .
git commit -m "React - Rails"
git push heroku master

Open the app.

heroku open


Did everyone move safely?

I would appreciate it if you could tell me if there is a better way.

If it doesn't work, please read the following reference article!

Reference article: A Rock Solid, Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku

Recommended Posts

How to run React and Rails on the same server
How to place and share SwiftLint config files on the server
How to terminate rails server
(Ruby on Rails6) How to create models and tables
What to do if the rails server doesn't run out on AWS cloud9
How to deploy jQuery on Rails
How to use Ruby on Rails
How to deploy Bootstrap on Rails
How to run JavaFX on Docker
[With back tricks] How to introduce React to the simplest Rails
[Ruby On Rails] How to search and save the data of the parent table from the child table
[Rails] How to get the URL of the transition source and redirect
How to run a mock server on Swagger-ui using stoplight/prism (using AWS/EC2/Docker)
[Rails / Heroku / MySQL] How to reset the DB of Rails application on Heroku
How to install and configure the monitoring tool "Graphite" on Ubuntu
How to display products by category on the same list screen
[Rails] How to put a crown mark on the ranking function
Install Ubuntu20.04 on RaspberryPi 4 and build Kubernetes to run the container
Things to remember and concepts in the Ruby on Rails tutorial
Install Webpacker and Yarn to run Rails
[Ruby on Rails] How to use CarrierWave
[Rails] How to use the map method
How to change the timezone on Ubuntu
How to find the tens and ones
[Ruby on Rails] How to use redirect_to
[Android] How to turn the Notification panel on and off using StatusBarManager
[Java] How to retrieve the parameters passed from html on the server side
How to solve the local environment construction of Ruby on Rails (MAC)!
[Rails] How to create a table, add a column, and change the column type
How to debug the processing in the Ruby on Rails model only on the console
[Ruby On Rails] How to search the contents of params using include?
[Rails] How to decide the destination by "rails routes"
[Ruby on Rails] How to log in with only your name and password using the gem devise
[Ruby on Rails] How to display error messages
How to add / remove Ruby on Rails columns
Ssh login to the app server on heroku
[Rails MySQL] How to reset DB on heroku
How to build API with GraphQL and Rails
Compile and run Java on the command line
How to find the total score and average score
[Ruby on Rails] How to install Bootstrap in Rails
[Rails] How to get success and error messages
[Ruby on Rails] How to use session method
[Java] Memo on how to write the source
How to run NullpoMino 7.5.0 on Ubuntu 20.04.1 64bit version
Rails scope anti-patterns and how to eliminate them
How to check Rails commands in the terminal
[Ruby on Rails] How to make the link destination part of the specified id
[Ruby on Rails] Change the update date and creation date to your favorite notation
[Ruby on Rails] Rails tutorial Chapter 14 Summary of how to implement the status feed
How to find the distance and angle between two points on a plane
[Ruby on Rails] How to Japaneseize the error message of Form object (ActiveModel)
How to share on the host side (windows) and guest side (CentOS 7) with VirtualBox
How to write Rails
Test run on rails
How to set the display time to Japan time in Rails
How to run the SpringBoot app as a service
What to do if the Rails server can't start
[Ruby on Rails] How to write enum in Japanese
How to run javafx with Raspberry Pi Posted on 2020/07/12
How to remove the underline displayed by Rails link_to