This question already has answers here:
React-router and nginx
(16 answers)
Closed 1 year ago.
Hi I uploaded my react app on server and make it live. It's working fine but whenever I refresh any page of application. it's returning 404 error. what should I do ?
When your app load. The react-router handle Router. The Route change is handled by Router itself but on refreshing the request goes to nginx where that specific route doesn't exist.
To resolve this issue you need to load root file. try this solution.
cd /etc/nginx/sites-available
sudo nano default
in default file update location
location {
try_files $uri /index.html;
}
there please add this in your nginx.conf
location / {
try_files $uri /index.html;
}
The problem is whenever you are trying to refresh the page it cannot find that route on nginx hence you get 404 whereas when you are browsing the app it just works fine because those things are handled by browser itself.
Related
If I go to the url of the web application I am creating I can see my whole React code under the "debugger tab" when using Firefox. I guess it can be seen in any browser.
Specifically, I go to Webpack field and I can see whatever file/code I want. However, if I go to Reddit and try to do the same I get the following error when trying to open a file:
Error while fetching an original source: NetworkError when attempting to fetch resource.
I suspect this is related to source maps. What is the best way to handle this in real production systems? I need to generate maps in order to give them to Sentry. Can I block them at nginx somehow? If this is the way to go of course.
This is my front-end nginx configuration used for serving my React application:
location / {
# serve bundle
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
So I have a SPA that I built using Create-React-App. It works completely fine for local dev, and I wanted to deploy the built app using nginx.
I set up my Dockerfile and nginx.conf, and at first all seemed to run fine. But then, I noticed weirdest issue.
Most of the app is working fine, but when I try to access a nested URL directly (i.e. not by navigating to it through the app -> This works fine. Problem happens only when I access the URL directly, or refresh the page), there are errors in the console/network while fetching the built files. Say I'm accessing localhost:3000/app/potato, I see my browser is trying to access files from localhost:3000/app/static/js/2.ebff4827.chunk.js (instead of localhost:3000/static/js/2 .ebff4827.chunk.js)
Accessing localhost:3000/app works fine, but localhost:3000/app/ (with trailing /) has the same weird behaviour.
As a result, the browser fails to load the page...
Here's my nginx.conf (although I don't believe this to cause my error, as I set it up with a blank CRA and it worked fine https://github.com/piaverous/cra-nginx-demo):
server {
listen 3000;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Does anyone have any clue on what could be causing the issue ? I'm totally at a loss here
So it turns out this problem came from my webpack build.
In my package.json, i had homepage: "./", which caused the path resolving issues.
Just removing this field seemed to fix this issue ! Nginx config was fine :)
I have a react website which I am hosting inside a Docker container that is running Nginx, which I have running on Port 3000. I then have an instance of Nginx on my host machine, which I have a reverse proxy pointing to 127.0.0.1:3000.
Everything works fine, except I have a Twitter authentication call, which uses a callback. When the url points back to mysite.com/authenticated, this is asking Nginx for the path which of course falls over.
I have scoured the internet and have found many posts indicating I should have this in my nginx default file:
location / {
proxy_pass 127.0.0.1:3000;
try_files $uri $uri/ /index.html;
}
When I then navigate to my website, even the root, I am getting unexpected token < in the console errors.
What could be causing this issue?
Lets say you are calling external twitter api http://twitter/auth.com/twitter/authentication for authentication.
And in your react action file you have give url as /twitter/authentication to call.For this case following will be the configuration.
server {
location / {
proxy_pass http://127.0.0.1:3000;
}
location /twitter/authentication {
proxy_pass http://twitter/auth.com;
}
}
You have to write every location config inside server in nginx config.
After any modification in this config, you have restart nginx.
For me it was the link to app.js
<script src="/app/bundle.js"></script>
When I tried to reach my App at
http://localhost:8080/serv9090
the browser tried to find /app/bundle.js via
http://localhost:8080/app/bundle.js
Which is not found at localhost:8080 (nginx)
For a first try I changed
<script src="/app/bundle.js"></script>
to
<script src="http://localhost:8080/serv9090/app/bundle.js"></script>
This worked fine.
Hope this helped.
I solved this issue by adding the following into the nginx conf file:
location ~ .(static)/(js|css|media)/(.+)$ {
try_files $uri $uri/ /$1/$2/$3;
}
I am trying to configure CakePHP 3 on OSX running nginx. The default page reports that everything is working except URL rewriting. However, I have URL rewriting working for page URLs (just followed the instructions for nginx setup). The only thing that's not working is loading static assets from webroot. I've been digging through a ton of similar stackoverflow questions and none of the responses seem to work.
vhost file:
server {
listen 80;
server_name albums.dev;
root /Users/username/Sites/albums;
access_log /Library/Logs/default.access.log main;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include /usr/local/etc/nginx/conf.d/php-fpm;
}
}
Again: The entire CakePHP application seems to be working correctly, except the static assets in /webroot/ are coming up as 404.
change the root .. you must point to webroot of your project
if you want i can give my conf to you
This question already has answers here:
React Router BrowserRouter leads to "404 Not Found - nginx " error when going to subpage directly without through a home-page click
(5 answers)
Closed 5 years ago.
I have a react frontend app that uses react-router to create different routes. On development server its working fine but when I build the project it gives me 404 while accessing it with different routes directly. Website perfectly opens with xyz.net. And it gives 404 when I try to access it with xyz.net/login.
Here is my nginx conf
server {
listen 80;
server_name xyz.net www.xyz.net;
root /root/frontend/react/build/;
index index.html;
location /api/ {
include proxy_params;
proxy_pass http://localhost:8000/;
}
}
This worked for me when I ran into this issue:
location / {
#...
try_files $uri $uri/ /index.html$is_args$args;
#...
}
However, I've encountered errors in other projects using *.ejs templates for development builds, and *.html plugins for production builds with webpack. The answer to which I found here:
React-router issue when refreshing URLs with SSL Enabled
Hope that helps.