Heroku - Trying to deploy a create-react-app + node backend + react router

Heroku - Trying to deploy a create-react-app + node backend + react router
0

#1

Hi FCC,

I’m trying to deploy my poll project but I am getting some really strange behaviour that I cannot explain. When i visit the site here the main landing page will load.

At the top of the page clicking on the “login” or “signup” buttons on the navbar successfully redirect to their respective pages (however if you view the app in the mobile view my MOBILE nav buttons do not redirect succesfully - no idea why the code is basically the same in each circumstance?)

Also - if i attempt to navigate the site using the url bar and go to /login for instance, I get a 404 error. I assume what is happening here is that heroku is looking to my node server to find where /login routes to and that route doesnt exist (my server only interacts with the database, bascially).

To fix this I have read online (here) that you can include a static.json file with this content:

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

this basically says for every route hit send the index.html file (which is where the react app is rendered) However - as i mentioned earlier if i try to hit https://swoodend-pollster.herokuapp.com/login via the url bar at the top of the browser and press enter it throws a 404 error.

Another issue I am having is that all the app itself wont talk to my server.

I created a Procfile in the root of the app to which contains web: node app.js so I am assuming my server is running. Yet every call I can make to it (when i try to login or register for example) returns a 503 error.

Does anyone have some deployment experience who could point in in the right direction?

Thanks FCC


#2

Have were you able to solve this issue? I am having the same issue (404 on routes). I am using react router 4 on my webapp and I have added that static.json file but the issue did not get resolved. If I changed to HashRouter, I can get all routes to work except my authentication callback (which is an error with auth0). I was able to use the Chrom Developer’s tools to see your code for the routing which is using BrowserRouter.


#3

It’s a known issue, I’m sure it has a section in the create react app readme. React router will cause 404s on Heroku, it won’t Just Work


#4

If I understand you problem correctly adding this to your backend routes should help:

app.get('/*', function(req, res) {
    res.sendFile('path to index.html');
})