Nginx and multiple React Web Apps - reactjs

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)

Related

serve react-flask app with nginx tutorial doesn't work

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.

Nginx multiple locations for multiple React application

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.

Changing conf in nginx for react router

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

How do I configure my Nginx server to work with a React app in a subfolder?

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.

nginx setup for angularjs and php5 rest

I'm trying to run an angularjs application along with an php application.
I made 2 folders ( client & api ) and I uploaded all my angular app files in client and all my php rest api into "api" directory.
I added into nginx:
location / {
try_files $uri /client/index.html;
}
location /api/ {
try_files $uri $uri/ /api/index.php$args;
}
location /static {
alias /var/www/www.sitename.com/htdocs/client/static/;
}
I'm wondering if is there a more elegant way to make this work, because right now if i want to add an exception to "location /" i need to go and modify nginx again.
Please advise.

Resources