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 ?
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.
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
Folder structure is /var/www/test.website.org/app/assets and /var/www/test.website.org/app/index.html. There is an index.html file in the root. Nginx.conf contains
server_name test.website.org;
root /var/www/test.website.org;
index index.html;
location /app {
try_files $uri /app/index.html;
}
This URL will partially resolve: https://test.website.org/app/asset/0ba6c35604ad11ea99d50242ac110004
Expectation in this case is that the file does not exist and /app/index.html will be rendered. In fact, the index.html is rendered but the CSS in the assets folder is not.
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 am trying to configure CakePHP 3 on OSX running nginx. The default page reports that everything is working except URL rewriting. However, I have URL rewriting working for page URLs (just followed the instructions for nginx setup). The only thing that's not working is loading static assets from webroot. I've been digging through a ton of similar stackoverflow questions and none of the responses seem to work.
vhost file:
server {
listen 80;
server_name albums.dev;
root /Users/username/Sites/albums;
access_log /Library/Logs/default.access.log main;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include /usr/local/etc/nginx/conf.d/php-fpm;
}
}
Again: The entire CakePHP application seems to be working correctly, except the static assets in /webroot/ are coming up as 404.
change the root .. you must point to webroot of your project
if you want i can give my conf to you