I am using react router v4 which is running fine in the developement mode. I am using wepback to make bundle for production and using nginx. Routes and nested routes works fine in development mode, I am also using wepback in development mode. But after making production build and running it on nginx only index route renders.
I don't how to solve this issue. Any suggestions please
You need to serve index.html as an answer to any route, as shown here:
https://github.com/react-boilerplate/react-boilerplate/blob/master/app/.nginx.conf
location / {
# Set path
root /var/www/;
try_files $uri /index.html;
}
Related
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.
Problem:
We have a CRA (Create React App) application that we need to deploy to many different environments. We're using Kubernetes to spawn these environments so we will have many of them, the number is not fixed.
The problem is that those environments must be under the same domain name and must have the same path structure. (this is a business requirement and we cannot influence it).
Example of environments:
https://www.example.com/company/app-env01/react_application/
https://www.example.com/company/app-env02/react_application/
https://www.example.com/company/app-env03/react_application/
https://www.example.com/company/app-env-foo/react_application/
https://www.example.com/company/app-env-bar/react_application/
https://www.example.com/company/app/react_application/
So the fixed structure is: https://www.example.com/company/app[-____]/react_application/
The way to make it work on a single environment would be to specify PUBLIC_URL in package.json build script:
...
"build": "PUBLIC_URL=/company/app-env01/react_application react-scripts build",
...
This works fine for ONE environment only (env01 in this case), but we need to deploy a single build artifact (static file bundle) to MANY different environments, which have different PUBLIC_URLs.
Is this possible to achieve without building the application for every environment?
How we build the artifact:
Our deployment artifact is a Docker image, which is just Nginx serving previously built React static files.
How we perform routing:
The Browser is hitting our Kubernetes Ingress, which strips the path away and forwards the request to a Docker Container (in a K8S Pod) which is running Nginx. Nginx is serving the CRA static files under the root directory /.
Example:
Browser
↓
https://www.example.com/company/app-env01/react_application/
↓
Ingress
/
↓
Nginx
↓
Serves the CRA static files
This works fine, the problem (to me at least it seems) is in React Router. We are setting the basename dynamically, and it is being set correctly (https://reactrouter.com/web/api/BrowserRouter/basename-string). The problem (I assume) is in this PUBLIC_URL. Deploying the application without specifying it does not work. And it needs to be known at build time. That's the main issue.
IMPORTANT:
We are using React Router, so it must work properly when the application is deployed
We want to deploy a single build artifact (a single Docker Image) across all environments
Solution
#Emile got me thinking about using relative URLs again, along with configuring Nginx to handle it correctly. Thank you!
Adding this location block to the Nginx configuration solved the problem:
location ~ .(static)/(js|css|media)/(.+)$ {
root /usr/share/nginx/html;
try_files $uri $uri/ /$1/$2/$3;
}
Here's the full configuration (simplified for the sake of clarity):
server {
listen 80;
# This rule internally redirects any relative requests for static files so that they start from the root
# Example, it internally redirects `/RANDOM/SUBPATH/static/js/main.xxx.chunk.js` to `/static/js/main.xxx.chunk.js`
# Effectively, it strips everything that comes before `/static...`
location ~ .(static)/(js|css|media)/(.+)$ {
root /usr/share/nginx/html;
try_files $uri $uri/ /$1/$2/$3;
}
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Further explanation
The reason that using relative URLs originally did not work is:
This would work just fine:
/company/app-env01/react_application/static/js/xxxxxxxx.chunk.js
but this would not:
/company/app-env01/react_application/RANDOM/SUBPATH/static/js/xxxxxxxx.chunk.js
I needed a way to "strip off" the /RANDOM/SUBPATH part, whatever that part is, and I achieved it adding the Nginx location block listed above.
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 :)
Just started with using React. I have an app created with create-react-app which should be running on a sub-directory while making API calls to a different path.
React App:
location on server: /var/www/myapp/build
endpoint: https://foo.example.com/analytics
Data API endpoint: https://foo.example.com/api/data
Nginx setup
location /analytics {
root /var/www/myapp/build;
try_files $uri /index.html;
}
When setting "homepage":"https://foo.example.com/analytics" in the client's package.json, all the resource paths seem to be correct (i.e. https://foo.example.com/analytics/static/...), but when checking networking no request to .../api/data shows up in my browser's networking inspector and the app doesn't properly spawn.
Using absolute paths in the App's API call (fetch('https://foo.example.com/api/data') instead of fetch('/api/data')) doesn't seem to help, either.
When instead I set "homepage":"." in package.json and also change the Nginx config to serve the react build directory on server root, the app works.
server {
root /var/www/myapp/build;
}
However, in this case, the app is also available under https://foo.example.com, which is something I don't want.
I strongly suspect this has to do with routing, but couldn't figure out how to fix it. So any help would be much appreciated!
--- Edit / Solution ---
I doubt it's the most straight forward solution, but the following setup works for me:
React App
In package.json, set "homepage":"./analytics" before running npm run build
Nginx config:
location = /analytics {
root /var/www/myapp/build;
try_files /index.html =404;
}
location ~ ^/analytics(.*) {
root /var/www/myapp/build;
try_files $1 $1/ /index.html =404;
}
My understanding is that the initial setup using try_files $uri was looking for files in the root directory /var/www/myapp/build for the full uri rather than only the path that follows /analytics. E.g. when requesting ../analytics/css/styles.css it would check if a file (or directory) is available under /var/www/mayapp/build/analytics/css/styles.css which doesn't exist, so it kept serving the index.html as fallback. Hence the regex workaround.
Feedback to improve this solution still very welcome, though.
I was struggling with the same problem. Finally I was able to solve it using official documentation and a combination of answers:
Assumptions:
Your React App is based on create-react-app package (you are using react-router-dom).
You are using Nginx and the root path is being used by another service (or even another React/Gatsby App which is my case).
You want to deploy the React App on a subdirectory and be able to serve all statics of your React App from that subdirectory.
React App Changes:
Based on official documentation.
Update your BrowserRouter by adding a basename. Example: <BrowserRouter history={history} basename="/webapp">.
Specify a homepage on your package.json. Example: "homepage": "/webapp".
If you are referencing a static file by its relative path, you should add the subdirectory to that reference. Example: src="/static/logo/logo.png" becomes src="/webapp/static/logo/logo.png".
Nginx Changes:
location ^~ /webapp {
alias /var/www/myapp/build;
try_files $uri $uri/ /webapp/index.html;
}
Here is an example of nginx location configuration:
location ^~ /analytics {
alias /var/www/myapp/build;
subs_filter href="/ href="http://foo.example.com/analytics;
subs_filter src="/ src="http://foo.example.com/analytics;
}
The location is set to ^~ /analytics , meaning that the rules created in the location braces will become effective when somebody visits http://foo.example.com/analytics
The alias is set to the static build folder of create-react-app site /var/www/myapp/build. That’ll be served when the visitor hits your subdirectory url foo.example.com/analytics
Next, the two subs_filter lines replace any reference to href and src urls that start with the React app’s home directory / with the new complete URL. That will ensure all your CSS and JS files are located and served correctly by NGINX.
The final thing, in the case of Create-React-App is that any references to createBrowserHistory in your react router need to be replaced by createHashHistory, as Browser History won’t work with the above NGINX configuration.
My website is called derekdawsonspersonalwebsite.com and I wanted to serve a react app I made at derekdawsonspersonalwebsite.com/metronome/
I got this working by doing the following:
Added "homepage": "/metronome", to the package.json file
If you are using react router, add <BrowserRouter basename="/your_subdirectory">, in my case:
<BrowserRouter basename="/metronome">
<div>
<nav>
<Link to="/"></Link>
</nav>
<Switch>
<Route exact path="/" component={Metronome} />
</Switch>
</div>
</BrowserRouter>
yarn run build
I uploaded the contents of the build directory to this location on my server /var/www/personalwebsite.com/metronome
This is what my server block /etc/nginx/sites-available/personalwebsite.com looks like
server {
listen 443 ssl;
server_name derekdawsonspersonalwebsite.com www.derekdawsonspersonalwebsite.com;
ssl_certificate /home/derek/ssl/derekdawsonspersonalwebsite.com_chain.crt;
ssl_certificate_key /home/derek/ssl/derekdawsonspersonalwebsite.com_tld.key;
location / {
root /var/www/personalwebsite.com;
index index.html;
}
location /metronome {
root /var/www/personalwebsite.com;
index index.html;
}
}
server {
listen 80 default_server;
server_name derekdawsonspersonalwebsite.com www.derekdawsonspersonalwebsite.com;
return 301 https://$host$request_uri;
}
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.