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.
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 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'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.