AngularJS HTML5 nested routes - html

Angular: 1.1.5
I go to: http://xxxxx.com/route1/route2/route3
and /route3 gets triggered instead of route1/route2/route3
Works fine with HTML5 mode off ... :(
Nginx config
location / {
index index.html;
try_files $uri $uri/ /index.html?$args;
}
My app config
$routeProvider.when('/route1/route2/route3', {
templateUrl: '/views/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/route3', {
templateUrl: '/views/home.html',
controller: 'HomeCtrl'
});
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);
$location Log:
$$protocol: "http", $$host: "xxxxxx"…}
$$absUrl: "http://xxxxxxx.com/route1/route2/route3"
$$hash: ""
$$host: "10.44.11.73"
$$path: "/route3"
$$port: 80
$$protocol: "http"
$$replace: false
$$url: "/route3"
How can I change my settings to make HTML5 urls working with nested routes?

For single page apps, this is all you need in your NGINX config:
server
{
server_name example.com *.example.com;
access_log /var/log/nginx/example.com.access.log;
error_log /var/log/nginx/example.com.error.log;
root /var/www/html/example;
index index.html;
location / {
try_files $uri /index.html;
}
}

Add
<base href="/">
to your index.html.

Related

Nginx configuration for static html-css

I have the below configuration for nginx,
server {
listen 80;
root /vol/www/home;
index /index.html;
error_page 404 /404.html;
location = /404.html {
internal;
}
location / {
try_files $uri $uri/ =404;
}
location /about {
try_files /about.html =404;
}
}
this is working well, but when I select some paths in the home page say About Us page, the uri comes with the full filename including the ending .html. I was able to get ride of those by adding a separate location in the nginx configuration and changing all the href links to the location instead of filename. So that is one workaround to get ride that but to run locally without server it is not possible.
I have seen a rewrite config in nginx, but I was unsuccessful with that. So I am here to ask how do I setup the uri without a html part in it and without modifying the href path to a uri instead of filename.
My configuration is like so, but it is not working
server {
listen 80;
root /vol/www/home;
index /index.html;
error_page 404 /404.html;
location = /404.html {
internal;
}
location / {
rewrite ^\/(.*)(\.html)?$ /$1 last;
try_files $uri $uri/ /index.html =404;
}
}
A 500 error is thrown : rewrite or internal redirection cycle while processing "/"
replace this to
rewrite ^\/(.*)(\.html)?$ /$1 last;
try_files $uri $uri/ /index.html =404;
this
rewrite ^(/.*)\.html(\?.*)?$ $1$2 permanent;
rewrite ^/(.*)/$ /$1 permanent;
try_files $uri/index.html $uri.html $uri/ $uri =404;

Addresses with or without /index.html have different behaviors

I have this in my nginx configuration:
server {
listen 443 ssl;
server_name t.example.net;
include ssl.conf;
location / {
return 403;
}
location ~ ^/(\w+) {
return 403;
location ~ ^/(\w+)$ {
root /data/t/$1;
try_files /index.html =404;
}
location ~ ^/(\w+)/(.*)$ {
root /data/t/$1;
try_files $2 =404;
}
}
include favicon.conf;
access_log /var/log/nginx/t.log;
error_log /var/log/nginx/t.error.log;
}
In /data/t/lipsum/index.html, there is a image, which is located in /data/t/lipsum/bender.jpg:
<img src="bender.jpg" alt="Bender">
When visited from https://t.example.net/lipsum/index.html, the picture is fine, but it breaks when visited from https://t.example.net/lipsum.
If I change the img tag to src="lipsum/bender.jpg", the behavior is reversed: https://t.example.net/lipsum is fine and https://t.example.net/lipsum/index.html breaks.
How can I let them both work, or keep people from visiting /index.html?
I tested the configuration below on my server, which correctly maps the following URLs:
https://t.example.net/ # 403 forbidden
https://t.example.net/index.html # 403 forbidden
https://t.example.net/lipsum # /data/t/lipsum/index.html
https://t.example.net/lipsum/ # /data/t/lipsum/index.html
https://t.example.net/lipsum/foo # /data/t/lipsum/foo/index.html
server {
...
# forbid root URI
location ~ ^/(index.html)?$ {
return 403;
}
# require first URI part: /$1
# optionally match everything after: /$1$2
location ~ ^/([^/]+)(.*)? {
root /data/t/$1;
try_files $2 $2/index.html =404;
}
}

Angular 8 + Nginx - failed to load resource

I have an application written in Angular 8 that I'm serving on nginx. After the deployment I get an following error:
Failed to load resource: the server responded with a status of 404 ()
Additionally in the Dev Tools we can see such a message:
error: "404 Not Found404 Not Foundnginx/1.12.0
message: "Http failure response for https://myUrl/app/assets/config/endpoints.json: 404 OK
name: "HttpErrorResponse" ok: false status: 404 statusText:
"OK" url: "https://myUrl/app/assets/config/endpoints.json"
What I didn't understand why is the response stating "OK"? But it's not the main problem. The main problem is that I can't load this endpoints.json file neither access any file located under the assets dir.
When I directly go to the URI:
https://myUrl/app/someFile.png
then it's visible, but if I try to reach
https://myUrl/app/assets or https://myUrl/app/assets/logo.png
then i get an 404 error page.
It's served from a docker container and I saw that all files are there so the structure is as follows in
/usr/share/nginx/html/
-/
-index.html
-assets/
-------config/
-------------endpoints.json
-------images/
-------------logo.png
-polifills.js
-favicon.ico
The app was build with the --prod flag and the base href flag --base-href ./
As I see the favicon is loading and all the scripts in the main dir work fine. The problem is related to the assets dir...
Here are my files:
* nginx.conf
server {
listen 8888;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
}
Enpoints service (which is trying to get this endpoints.json
private enpoints$: Observable<Endpoint>;
private readonly ENDPOINT_URL = './assets/config/endpoints.json';
constructor(private http: HttpClient) {}
public loadEndpoints(): Observable<Endpoint> {
if (!this.enpoints$) {
this.enpoints$ = this.http.get<Endpoint>(this.ENDPOINT_URL).pipe(shareReplay(1));
}
return this.enpoints$;
}
Any suggestions?
Just figured it out. The issue was related to my nginx configuration.
I had to take the root path out of the location block so it's applicable to all locations. The official nginx pitfalls doc helped me here a lot.
Now my config file looks like that:
server {
listen 8888;
server_name localhost;
root /usr/share/nginx/html;
location / {
index index.html index.htm;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
location /assets {
try_files $uri $uri/ /index.html;
}
}
Although I think the second block isn't needed at all. I have to check it, and will reply.

Nginx access html resource with or without extension

I want to access HTML resources with or without extension. Currently, I defined two location blocks as defined below.
location = /home {
default_type "text/html";
alias /var/www/html/home.html;
}
location = /home.html {
default_type "text/html";
alias /var/www/html/home.html;
}
How the above configuration should be written in a single location block?
You can use try_files to test for various filename matches, for example:
root /var/www/html;
location / {
try_files $uri $uri.html $uri/ =404;
}
See this document for details.

ISPConfig Vhost allowing clean URLs in Laravel

I have an existing server which is working well hosting a number of sites using nginx and ISPconfig. However I have created a new site and wish to use Laravel.
I've installed Laravel successfully via composer and have got as far as seeing the familiar welcome blade displayed when I visit mywebsite.com/public
What I want to do next is make some clean urls. My experience with vhost files is somewhat limited and I'm having a bit of trouble with the config.
My routes file looks like this
Route::get('/', function () {
return view('welcome');
});
Route::get('/test', function () {
return view('test');
});
and I'd hoped to see mywebsite.com/test display the contents of test.blade.php
I'm aware I need to do some work with the vhost file before I can expect this to work but my experience with vhosts is limited and I'm at a bit of a loss.
My current file looks like this
server {
listen *:80;
server_name mywebsite.com ;
root /var/www/mywebsite.com/web;
index index.html index.htm index.php index.cgi index.pl index.xhtml;
error_page 400 /error/400.html;
error_page 401 /error/401.html;
error_page 403 /error/403.html;
error_page 404 /error/404.html;
error_page 405 /error/405.html;
error_page 500 /error/500.html;
error_page 502 /error/502.html;
error_page 503 /error/503.html;
recursive_error_pages on;
location = /error/400.html {
internal;
}
location = /error/401.html {
internal;
}
location = /error/403.html {
internal;
}
location = /error/404.html {
internal;
}
location = /error/405.html {
internal;
}
location = /error/500.html {
internal;
}
location = /error/502.html {
internal;
}
location = /error/503.html {
internal;
}
error_log /var/log/ispconfig/httpd/mywebsite.com/error.log;
access_log /var/log/ispconfig/httpd/mywebsite.com/access.log combined;
location ~ /\. {
deny all;
access_log off;
log_not_found off;
}
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location /stats/ {
index index.html index.php;
auth_basic "Members Only";
auth_basic_user_file /var/www/clients/client1/web5/web/stats/.htpasswd_stats;
}
location ^~ /awstats-icon {
alias /usr/share/awstats/icon;
}
location ~ \.php$ {
try_files /5e26a1d85cb98f7191261e023385e60d.htm #php;
}
location #php {
try_files $uri =404;
include /etc/nginx/fastcgi_params;
fastcgi_pass unix:/var/lib/php5-fpm/web5.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_intercept_errors on;
}
}
Now on another server I have this working with this simple directive
server {
root /var/www/public;
index index.php index.html index.htm;
server_name localhost;
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
}
But I am limited to what I can do with the vhost on the current server as ISPconfig writes most of it for me and it refuses to write the above config that worked elsewhere. Also I feel editing the file directly will be bad practice, I'd always be on edge that ISPconfig will rewrite the file for me, so I'm not really sure how best to proceed with this.
My options would be to just go ahead and edit the vhost and hope for the best, but if I do that how would I ensure ISPconfig could not overwrite the file without resorting to "hacky" methods?
Alternatively, is there a config I can enter via ISPconfig that will allow rewrites to happen properly in a way that suits Laravel? In this instance, any directive entered would need to take precedence over the ~ .php$ clause as that is written by ISPconfig before any directives entered via the control panel.
I just had the same problem recently. Digging the ISPConfig's sources, I understood it can insert/ merge/ delete location blocks of that default vhosts file. So i did the following:
Sites' menu > choose website > Options
Then I inputed the following on the "nginx Directives" field:
# redirect stuff to the public inner folder
location / {
root {DOCROOT}/public;
try_files /public/$uri /public/$uri/ /public/index.php?$query_string;
}
# merged the stuff people suggests for laravel inside the php block
# mind the 'merge' keyword that did the trick
location ~ \.php$ { ##merge##
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_intercept_errors off;
fastcgi_buffer_size 16k;
fastcgi_buffers 4 16k;
}
There is a slight problem with Danilo's answer. Php ran but assets like js/css/images stopped loading. Adding the following to nginx directives inside ISPConfig works for me:
location / {
root {DOCROOT}/public;
try_files $uri public/$uri/ /public/index.php?$query_string;
}
I am not expert with this but from my past experience if I have two domains I would define server blocks for each in two different files and place them in /etc/nginx/sites-available/site1.com and /etc/nginx/sites-available/site2.com
but it looks like you already have a website that you access using mywesite.com which is located at /var/www/mywebsite.com/web; (see the root value of your configuration file)
Now you install Laravel in test folder in /var/www/mywebsite.com/test location.
To access this you need can try adding following at the end of your ispconfig file.
Note how I used the relative path to laravel's public folder from the root of the server block.
location /../test/public {
try_files $uri $uri/ /index.php$is_args$args;
}
For more detailed tutorial try Nginx Server Block Setup.
Hope this helps,
K