For clean urls in angularjs I must use $locationProvider.html5Mode(true); but when I refresh my page it shows a 404.
I've read that I need to configure server file.
Structure
/html -
/views -
home.html
about.html
contact.html
index.html
app.js
What I've done so far:
nginx.conf
server {
root /html/views;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
The Angular HTML5 location mode basically took advantage of HTML5 history API to "simulate" URL changes in client. But the URLs are probably not real (not exist) from the point of view from server therefore it's not possible to locate those pages on the server. There are generally two solutions can let server to know the URLs:
Use server-side rendering. This is widely used by another framework called ReactJS. And actually AngularJS 2.0 can work on a server too. Therefore it is possible to generate the real pages server-side and serve them to the client.
Use HTTP server rewrite techniques. This is what you are trying to do. The idea is to forward all related requests to a single AngularJS entrypoint HTML page, normally it's the index.html from the root.
For your case, assume the entrypoint of AngularJS is /index.html. Try this:
server {
root /html/views;
index index.html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
The previous solution is not perfect, because it will test every request arbitrarily. We can avoid unnecessary URL looking up by specify more detailed rules:
server {
root /html/views;
index index.html;
rewrite "^/users" /index.html last;
rewrite "^/pages" /index.html last;
...
}
Use regular expressions to match the URLs you want to serve with Angular.
Related
Ask a question, deploy React project with nginx, in order to configure the front-end routing of React Router, use $try_files for nginx to locate all routes into index.html, but there is a problem with this configuration,If you want to request other files, such as *.json, *.md, and if I request the json file in the directory, If the json file does not exist, the server will directly return the index.html file instead of returning 404. How to solve it?
location / {
alias /usr/local/var/www/;
index index.html;
try_files $uri index.html;
}
By default it looks like this:
try_files $uri $uri/ =404;
You don't need that index.html in try_files, since you have it as index option value.
The configuration file you have set for NGINX is always going to fall back to index.html, as it will attempt to match try_files in order. What you need to add is =404; or better yet, change:
try_files $uri index.html;
to the implementation found in user973254s answer. Otherwise, NGINX is always going to fall back to index.html.
Please see https://serverfault.com/questions/329592/how-does-try-files-work for a pretty detailed explanation. It directly addresses an instance where you append =404; to the try_files directive.
(Asked To Answer Via Queue)
I use nginx as my static file server for my NextJS application, in order to test it in dev environment. My application follows a pattern in which I have, normaly, the following routes:
someRoute/
index.tsx
register.tsx
[id].tsx
My nginx.conf file has the following content:
worker_processes 4;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html /register.html;
}
}
What is happening is that, when I create a docker image of the application using nginx, if i try to access someRoute/register or someRoute/123, I always get the localhost/index page. someRoute/index works fine, but the other two don't.
My guess is that when I try to navigate to someRoute/123 nginx expects to find 123.html inside $uri/, which of course won't happen, since it is a dynamic route. As per register.html, I really don't know what's wrong.
How do I get someRoute/register and someRoute/[id] working?
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 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
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.