1

I'm using nginx with the deployment of my website on my local server.

The website is a single page create react app running on the server. I have a domain, www.test.com for example, and i want the single page app to be found on www.test.com/first-website. From reading online I'm supposed to use the rewrite directive.

This is my current config:

http { upstream sensory-showcase { server 127.0.0.1:5000; } server { listen 80; location /sensory-solution-for-firefighters { rewrite ^/sensory-solution-for-firefighters $1 break; proxy_pass http://sensory-showcase/; } } } events { }

From this the url resolves without an nginx 500 error however it just shows a blank white page. And i have to have a trailing /, eg www.test.com/first-website/ . Without the trailing / it errors.

I just note, when I didnt have the rewrite directive in, and left the location at just / the site loaded fine.

Improve this question
2
  • Are you using another webservice to serve your html files ? I mean whats running on port 5000 ? Commented Jan 22, 2021 at 18:53
  • rewrite is required only if your React router is working in history mode - so that it always serves index.html even if you try to directly open some route. No rewrite is needed in hash mode. Commented Jan 22, 2021 at 19:46

1 Answer 1

Reset to default
4

Try this, it will fallback to the index.html of your single page app, which will do the routing:

 location /first-website { try_files $uri $uri.html $uri/ /first-website/index.html; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Can you explain what this does?
try_files $uri $uri/ /app/index.html; attempts to serve the requested URI. If the file doesn't exist, it falls back to serving /app/index.html, allowing client-side routing to handle the request.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.