CODEWITHSUNDEEP
reactjsnginxroutescloud-foundryreact-router-v4
Twinfriends
Twinfriends

Reputation: 1997

Nginx 404 on page reload on Cloud Foundry

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.

Upvotes: 2

Views: 1923

Answers (2)

Twinfriends
Twinfriends

Reputation: 1997

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.

Upvotes: 2

Mario Nikolaus
Mario Nikolaus

Reputation: 2406

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.

Upvotes: 0

Related Questions