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.
Related
I am following this tutorial in order to learn how to serve react and flask apps with one single nginx server.
I already reached the point in the tutorial where nginx should be serving the React app, but I still can only see default nginx page.
This is my nginx app configuration file /etc/nginx/sites-available/agroware:
server {
listen 80;
root /home/ubuntu/agroware/frontend/build;
index index.html;
location / {
try_files $uri $uri/ =404;
}
location /api {
include proxy_params;
proxy_pass http://localhost:5000;
}
}
I believe I am following the tutorial, but I cannot see the react app to this point.
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
I have a URL in the form of www.example.com, and am using nginx as the web server. When I go to www.example.com, the site works fine, however whenever I go to www.example.com/anyUri, I receive a 404. Here is the location element in my sites-available file:
location ~*/(.*) {
try_files $uri $uri/ = $404 ;
}
The website is built in React, so there is no real directory, but rather different routes. When I click on a link to navigate to a different route, it loads correctly, but if I try to access that same route directly through the URL, I receive the 404 as well. For example, if from my home page I click "Contact", the URL changes to www.example.com/contact and loads the "Contact" component as desired. If I refresh the page or type in www.example.com/contact manually, I receive the 404. I have my website set up to handle the nonexistent URIs accordingly, and do not need nginx to handle those. Instead, I want nginx to go to www.example.com/anyUri and let the website logic take over from there. I have tried looking up the different patterns online, however none seem to be working as desired.
This nginx.conf file is what I have been using - works like a charm for me.
server {
listen 80 default_server;
listen [::]:80 default_server;
root /your/web/root/path/nginx/html;
index index.html;
location / {
# Adds support for HTML5 history mode
try_files $uri $uri/ /index.html;
# -or-
# try_files $uri /index.html;
}
}
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 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.