My react app has following routes
localhost
localhost/ca/:num
localhost/cr/:num
All three are working fine in localhost
When I use nginx localhost only works. sub paths /ca /cr are not working. I have changed the conf file as below
location / {
root html;
index index.html index.htm;
try_files $uri /index.html;
}
How to run these paths and get the dynamic :num value as well
Related
I have 2 different React apps using React Router. I have the following structure on my Nginx conf:
# This is to serve main React App
location / {
root /apps/www;
index index.html index.htm;
try_files $uri /index.html;
}
# This is to serve secondary React App
location /report {
root /apps/www/report;
try_files $uri =404;
}
I have put both build files on the corresponding root folder.
However, when I open https://hostname/report, instead of going to the secondary React app, it goes to the main app, handled by its React Router, then redirected to NotFound page.
How to make Nginx location handle the routing to /apps/www/report ?
It seems you are using root directive incorrectly (check the difference between root and alias nginx directives). I think you should use a config like
root /apps/www;
index index.html index.htm;
# This is to serve main React App
location / {
try_files $uri /index.html;
}
# This is to serve secondary React App
location /report {
try_files $uri /report/index.html;
}
You may also need to rebuild your second React app according to your /report prefix since all links to its assets should be generated with this prefix (or they obviously would be served with your first app). Check this article for example.
I want to do some A/B testing in a React Web App and decided to duplicate it.
So I'm tring to set one app in the root location (example.com) and the other into a sub-folder (example.com/bversion).
For this, I'm using nginx for serve both versions.
server {
listen 80;
server_name example.com;
root /var/www/html/a_version;
location / {
try_files $uri /index.html;
}
location /bversion {
root /var/www/html/b_version;
try_files $uri /index.html;
}
}
The problem is that Ngnix never resolve /bversion. Always return the root A version of my app.
If I remove try_files in both locations, I lose the possibility to access directly to some specific pages of the application (e.g. example.com/hello or example.com/bversion/hello)
I bundle my react app using the npm run-script build, then copy the build output files into the Nginx docker image along with the nginx.config file. When I run the created Docker image, the css and images does not load properly in the first time - because of this UI components are rendered misaligned. However, if I navigate back to the home page from other pages all the components loads properly (the css, images and other material ui components, alignments). I see this is something related to static resources loading from the the relative path, but couldn't figure out a fix.
My React app configuration
I have set homepage in package.json - homepage: "/home/".
Also have tried to set PUBLIC_URL variable in the .env file
Nginx.conf
server {
listen 8080 default_server;
root /var/www;
index index.html index.htm;
location ~* \.(?:manifest|appcache|html?|xml|json)$ {
expires -1;
}
location ~* \.(?:css|js)$ {
try_files $uri =404;
expires 1y;
access_log off;
add_header Cache-Control "public";
}
location ~ ^.+\..+$ {
try_files $uri =404;
}
location /home/ {
try_files $uri $uri/ /home/index.html;
}
}
Did I miss anything?
I'm trying to get an nginx server for my react application. I have the following directory structure.
/node_modules
- react
- react-dom
...
/dist
- index.html
- bundle.js
- styles.css
My current nginx configuration file looks like this:
server {
listen 80;
server_name localhost;
location /node_modules {
root /var/www/app;
}
location / {
root /var/www/app/dist;
autoindex on;
try_files $uri /index.html =404;
}
}
The actual problem that I'm having is that try_files is not behaving as I think it should. Every file is being load correctly except for bundle.js and styles.css. When this two files are requested nginx is serving index.html instead of them. Based on my configuration, try_files is not finding bundle.js in /var/www/app/dist/bundle.js (I verified the file is in the correct place) and then using index.html as the fallback.
Any ideas on why this could be happening ?
I am trying to deploy a React application in a subfolder on my Nginx server.
The location of this React app is structured like: www.example.com/reactApp.
I tried to set up my current nginx.conf like so:
server {
..other configs..
location /reactApp {
root /var/www;
index reactApp/index.html;
try_files $uri $uri/ /index.html;
}
..other configs..
}
This has not worked. What do I need to change to fix my subfolder routing?
The last component of the try_files statement should be a URI. Assuming that your index.html file is located under the /var/www/reactApp subfolder, you should use:
location /reactApp {
root /var/www;
index index.html;
try_files $uri $uri/ /reactApp/index.html;
}
See this document for more.