Nginx 404 on page reload on Cloud Foundry

user_5740849 0
Viewed 1380

Problem:

I've deployed a React application to our internal cloud at my company. It works with Cloud Foundry. The app works really well, but there's one problem. Whenever I refresh the application and the URL isn't pointing to the root, for example myapp.ourcloud.com/my-route, I get a Error 404 from Nginx.

What I'm using:

The App is a simple React application. No special modules installed beside React Router V4. The Code is pretty simple, I'm using the BrowserRouter, as a child the application. There are only 3 components that ar simply routed with <Link To=.../> and <Route path={.../> ... as said, pretty basic.

What I've tried so far:

I have added a Staticfile in the root directory with pushstate: enabled as stated in the Cloud Foundry documentation.

cloud-foundry react-router-v4 reactjs routes nginx
2 Answers

I just found the answer by myself. I'll post it here for future users:

My manifest.yml file had the following content:

...
path: build/
...

You simply have to put the Staticfile inside the build/ folder from react and not in the project root. Also be careful, the Staticfile gets deleted everytime you build the project.

user_57408490

Serve index.html for all request and then the react router will manage all the routing.

If you however have endpoints or some backend routes you need to access, just make exception for these routes and serve index.html for everything else.

user_7046610
Related