Deploying Create-React-App with Rails API on Heroku

Question

I'm having an issue getting my react /rails app to work on heroku. I've managed to get it deployed and the rails server starts but I'm not seeing my react app. I feel like I'm close but can't figure out what's missing.

So my process is currently to run npm run build locally from the client directory which builds a 'build' directory in client. I then commit the results of the build and push to Heroku with git push heroku master.

I then navigate to the heroku app in a browser where I'm only getting a blank white page which is an index file the I manually copied from the build dir to public. I'm not sure if the index file is correct but I just wanted to make sure i could hit something.

Ultimately, I would like to just push the repo and it automatically run the build. I've seen this mentioned various places but I always get a react-script does not exist error when I run npm run build on the server.

My configuration is as follows:

basic structure of app

/app - root of Rails app
/client - root of React app
/public - does display index page

root/client/package.json

{
    "name": "qc_react",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
        "react-scripts": "^0.8.4"
    },
    "dependencies": {
        "react": "^15.4.1",
        "react-dom": "^15.4.1",
        "react-router": "^3.0.0"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    },
    "cacheDirectories": [
        "node_modules",
        "client/node_modules"
    ],
    "proxy": "${API_URL}:${PORT}/v1/"
}

root/package.json

{
  "name": "web",
  "version": "1.0.0",
  "description": "This repo contains a web application codebase. Read instructions on how to install.",
  "main": "index.js",
  "scripts": {
    "build": "cd client" # not sure what to put here but this gets me past build failure
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://myrepo.git"
  },
  "author": "",
  "license": "ISC",
  "homepage": "https://myhomepage#readme"
}

Procfile

api: bundle exec puma -C config/puma.rb

Buildpacks

1. https://github.com/mars/create-react-app-buildpack.git
2. heroku/ruby

config/puma.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']     || 3001
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

Could you be more specific on how do you access the app via browser? — Sebastian
– Sebastian, Commented Jan 22, 2017 at 2:33
I just use the command heroku open which opens my default browser (chrome) to the url of the app. — Jason Stokes
– Jason Stokes, Commented Jan 22, 2017 at 2:44

yeasayer · Accepted Answer · 2017-05-10 20:12:21Z

3

That's because Rails is serving static files (including index.html) from /public. But your React app bundle is located inside /client/build. After build you need to copy these files back to Rails folder. The easiest way to do this is to add some scripts to your package.json:

"scripts": {
  ...
  "deploy": "cp -a build/. public",
  "heroku-postbuild": "npm run build && npm run deploy"
},

heroku-postbuild is executed automatically by Heroku after all dependencies are installed, just like normal postinstall hook.

Be careful with the paths for cp command. Your setup with 2 different package.json files is too complex. I recommend to use a single package.json inside root and set all paths accordingly.

answered May 10, 2017 at 20:12

yeasayer

8782 gold badges12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason Stokes · Accepted Answer · 2017-06-28 14:37:05Z

So I finally found the solution I was looking for. My code base has the following structure.

app/
client/
public/
...

I'm currently building my client solution as @yeasayer suggested above. After building and deploying my react project to the public folder in my rails api, I added the following to my routes:

... # api routes ...

get '/*path', to: 'react#index'

Then I created a react_controller and added the following contents:

class ReactController < ActionController::Base
  def index
      render :file => 'public/index.html', :layout => false
  end
end

Now any routes not caught by the api routes, will render the react app. I'm not sure why others don't use this structure instead of using react_on_rails or some other plugin to achieve the same result. This setup is a lot simpler than dealing with these other solutions but I'd like to hear any thoughts on why this solution is not a good idea.

awillis · Accepted Answer · 2017-01-22 02:54:22Z

0

I see you are using the create-react-app-buildpack, but I think your issue is that your react app is in a subdirectory. Buildpacks only get executed if heroku can detect a matching application in the directory and since your package.json in your root does not match create-react-app-buildpack I don't think it is being used.

What you might try is removing the root package.json and using this sub directory buildpack so you can specify the locations of each buildpack directory

edited Jan 22, 2017 at 2:54

answered Jan 22, 2017 at 2:35

awillis

13 bronze badges

1 Comment

Jason Stokes Over a year ago

I got the sub directory buildpack installed but I'm still not able to pull up the react app. The rails app appears to work as before but i don't see or know how to get to my react app. The rails app is just an api that I want to hit it for data. What I really want to see is the front end. Right now, I'm getting the same index.html file in my public folder. What was different is that I did see it build the react app. Just don't know how to get to it.

Collectives™ on Stack Overflow

Deploying Create-React-App with Rails API on Heroku

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related