Here's the deal: I set up the simplest nginx configuration for practicing angular and I configured the routeProvider to use html5mode. So far, so good! I set the base to '/', my links to /view1 and /view2 works fine, but only when I click these links in my index page. When I try to access them directly in the browser (or reload the page), nginx returns me a 403 forbidden. That's a simple configuration but I can't find a simple explanation about it :(
I want to set things up in a way that any route works fine without have to explicitly set it (one by one) in my nginx site.conf. By the way, permissions are good !
Here's the actual conf file:
server {
listen *:80;
server_name rbs.ang;
root /_dev/angularjs/app;
index index.html;
charset UTF-8;
location / {
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ index.html;
}
}
You need to configure a fallback route on your server to serve index.html file when a route is not matched.
This works:
location / {
try_files $uri $uri/ /index.html?$query_string;
}
Related
What I'm trying to achieve is to have a project use the subdomain as part of the request path for react SPA.
e.g. qem.xxx.com -> xxx.com/qem for a SPA where the file path doesn't change with the request.
I've been messing about for a while with rewrites but haven't been able to achieve it. Most of the resources seem to deal with the opposite, or with non-SPAs where the file path matches.
Here's the latest conf:
server {
listen ${NGINX_PORT};
server_name ${NGINX_HOST}
charset utf-8;
client_max_body_size 20M;
# what file to server as index
root /src/build;
index index.html index.htm;
error_page 503 #maintenance;
location #maintenance {
root /src;
rewrite ^(.*)$ /deploy/maintenance.html break;
}
location / {
# First attempt to serve request as file, then
# as directory, then fall back to redirecting to index.html
if (-f /src/maintenance.txt) {
return 503;
}
try_files $uri $uri/ #qem /index.html;
}
location #qem {
rewrite ^ /qem/$request_uri?;
try_files $uri $uri/ /index.html;
}
}
EDIT: Further details as requested:
NGINX_HOST=qem.xxx.com
Only one SPA application, so only one index.html in folder root
Have static resources that $uri and $uri/ match, all site content is served by index.html
Trying to achieve access to qem.xxx.com to serve as if the user accessed xxx.com/qem/ (i.e. this subdomain serves that part of SPA)
Currently semi-works in that it serves a blank page (200s).
Even just a general steer in the correct direction would be great!
Cheers,
Carl
I want to host a demo app on a subroute of my domain. When I place the app in the root of the domain and use the following configuration, it works:
server {
server_name domain.com www.domain.com;
root /var/www/my-app/build;
index index.html index.htm;
location / {
try_files $uri /index.html =404;
}
}
But when i move it to a subroute using the following configuration, it correctly fetches the initial index.html but then routes the static file requests (for css, js, images...) to index.html as well.
server {
listen 80;
server_name domain.com www.domain.com;
location / {
}
location /demo-apps/my-app{
root /var/www/my-app/build;
try_files $uri /index.html =404;
}
}
And I don't understand why. Here's a screen capture of the request which succeeds but returns the index.html file instad of the js file:
And here's the folder structure on the server:
As I understand it, the request from the first screen capture should match the $uri condition in the second location block and return the corresponding js file but, clearly, I'm wrong. What do I need to change for this to work?
Before anyone asks, yes, I did restart nginx.
The path to the file is constructed by concatenating the value of root with the value of $uri. So a request for /demo-apps/my-app/css/foo.css will be looked for at /var/www/my-app/build/demo-apps/my-app/css/foo.css, which is the wrong place.
You can use alias instead (see this document), for example:
location /demo-apps/my-app {
alias /var/www/my-app/build;
try_files $uri /demo-apps/my-app/index.html;
}
However, using alias and try_files together can be problematic. See this long term issue.
Or use a regular expression location (see this dcoument) to extract the latter part of the URI, for example:
location ~ ^/demo-apps/my-app(/.*)?$ {
root /var/www/my-app/build;
try_files $1 /index.html =404;
}
so I'm building a react site using browserHistory, my current Nginx setup serves index.html for all URLs, however I have split out my admin part of the site so I need any url under /admin to server admin.html but I can;t figure it out (not a server guy!).
This is my current config, any help would be greatly appreciated!
server {
listen 80;
server_name http://178.62.98.191/;
root /www/rawnet-one-web/dist;
index index.html index.htm;
rewrite ^/(.*)/$ $1 permanent;
location / {
auth_basic "Restricted";
auth_basic_user_file /www/.htpasswd;
try_files $uri /index.html;
}
}
Based on the examples in the location documentation, you should just have to define the /admin/ location and serve the /admin.html file for any location that matches it.
location /admin/ {
try_files $uri $uri/ /admin.html
}
If you want /admin to not have a trailing slash, you will need to hard code that location.
location = /admin {
try_files /admin.html
}
So I'm trying to run my angularJS app on the linux server, and when I access any url different from / the page is redirected to /, my config for nginx is:
server {
server_name localhost;
root /var/www/myproject/public;
index index.html;
location ~* \.(gif|jpg|jpeg|png|js|css)$ {
}
location / {
allow 127.0.0.1;
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ /index.html =404;
}
}
Just a fyi my app just doesn't make requests, just load a local json and navigate using #/page-name(the url is not going to nowhere, angular just use this to render templates in html, this templates is already inside html), nginx need config for accept urls with "#"? any config wrong in this snippet?
I solved this by using
$locationProvider.html5Mode(true).hashPrefix('!');
and this way I'm able to use routes without '#' :D
I'm writing an AngularJS single page application using nginx.
I just switched from apache to nginx, but I cant make my config file working.
I'm trying to rewrite everything to index.html to let Angular do the routing.
My nginx.conf is as follow:
server {
index index.html;
location / {
expires -1;
add_header Pragma "no-cache";
add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
try_files $uri $uri/ /index.html;
}
}
Is it possible to have my nginx.conf file in the project root like my .htaccess did?
You dont want nginx.conf in the project root and its not necessary. Also, you don't want direct changes to nginx.conf, you will instead want specific files for different websites in /etc/nginx/sites-available which you enable with a ln in /etc/nginx/sites-enabled.
As far as the config:
server {
root /var/www/mysite/; #or whereever your site files are
index index.html;
location /{
try_files $uri $uri/ =404;
}
}
You are missing the root portion which tells nginx where the site is located.