2

I have been trying to build a Rails API with an integrated React front end and deploy it to Heroku. I am using create-react-app to build the React app in a directory called "client" within the Rails project folder. I run the Rails api on localhost:3001 and the React app on localhost:3000. And it works when I deploy it to Heroku except when I am using a React Router url and try to refresh the page, or if I try to copy and paste the URL in the browser. It's the same result on multiple browsers. For example if I go to the root url: https://appname.herokuapp.com it will display the React app with a navbar. If I click on "articles" it will take me to https://appname.herokuapp.com/articles and display the react articles page. However if I refresh the browser I just get an empty page. Same if I copy/paste this url in a browser.

I have followed three separate tutorials on deploying a Rails/React app to Heroku all from around 2018. They all mention this issue and offer the exact same solution.

In app/controllers/application_controller.rb add this action:

def fallback_index_html
  render :file => 'public/index.html'
end

And in the routes add this route at the bottom:

# config/routes.rb
get '*path', to: "application#fallback_index_html", constraints: ->(request) do
  !request.xhr? && request.format.html?
end

They all say this will work. But after trying three separate tutorials that all fail on the same issue I am at a loss. I know that on the page refresh the app is looking for the Rails routes not the React Router routes. The above solution is not working. Maybe something changed with Heroku, Rails or React that is preventing this from working now. How do I fix this?

Steve Carey
  • 2,876
  • 23
  • 34
  • What is being rendered if you refresh the website? Can you see any code, alert or console.log? Sounds like rails is correctly routing you to the react app, but react is not handling it correctly – Waclock Jul 04 '19 at 14:03
  • Nothing. Complete blank page. I added a console log to the articles component just to confirm and when I go to the articles link from the app, the console log message shows up in the Chrome console. When I refresh the page is completely blank and no console log message. I looked at the heroku logs and it is ignoring the react routes and going to the rails routes. And I confirmed the fallback_index_html action is being called. What is failing is the: render :file => 'public/index.html'. It seems to be doing/returning nothing. – Steve Carey Jul 05 '19 at 06:08

2 Answers2

3

I don't know if you are still searching for an answer to this, but you described my situation exactly. I eventually found this post that worked for me.

It looks like ActionController::API cannot render files, but ActionController::Base can. So changing your application controller's inheritance might solve it. The solution linked above gives a suggestion for avoiding bloat too.

cdallasanta
  • 31
  • 4
0

It seems that the OP has tried this, but this is what worked for me as well. I am running Rails 6 for the API with the front-end using webpacker and React. I was having this issue where if I reloaded the page on any page but the root domain then I'd get the error that the route can't be found.

I simply added the catch-all to routes.rb.

get '*path' => 'main#index'

To expand, I have one controller main_controller.rb that has one endpoint index.

I have the application controller like normal and my directory for the api.

My routes are the api controllers and this

  root 'main#index'
  get '*path' => 'main#index'

Hopefully that helps any with this issue and using the Rails 6 React stack.

marcus.salinas
  • 627
  • 4
  • 8