Nginx not loading the second angular app - javascript

Being new to Angular 4, Nodejs and Nginx i'm having trouble configuring Nginx to serve 2 different Angular apps. My problem is the following:
I generated two Angular 4 apps with the angular CLI and then modified them. Once done, I did a ng build on both of them to get the built files in the dist folder. The first app is the login page that does JWT Authentification with a backend in Nodejs. Once the auth is done it should redirect the user to the second app which is the actual website.
I use window.location.href='http://localhost:8080/app' in the login app to redirect to the second one.
Now since the second app is supposed to check the Token, it is stored in the browser's localStorage.
In order to keep this token, both the apps must be on the same address and port. Therefore I want to use NginX as a reverse proxy.
I installed Nginx and put the files of both apps in /var/www/html/angular/login/ and /var/www/html/angular/app/ respectively.
My Nginx sites-available/default file is the following:
#Default server configuration
server {
listen 8080 default_server;
#listen [::]:8080 default_server;
index index.html;
server_name localhost:8080/;
location / {
alias /var/www/html/angular/login/;
try_files $uri $uri/ /index.html;
}
location /app {
alias /var/www/html/angular/app;
try_files $uri $uri/ /index.html;
}
}
Now what's happening is that when I go on localhost:8080 I get my login app just as I should but when I authenticate, the url changes to localhost:8080/app as it should and the name of the app on the tab changes but the content of the app isn't loaded. It stays on the login page eventhough it seems to fetch the second app files...
It looks as if I had put the files of the login app in the /var/www/html/angular/app/ folder eventhough I didn't.
Any idea where it comes from?
The apps were tested before using ng serve on 2 different ports but I couldn't keep the token since localStorage is attached to a domain and port.

Related

When react app reload/refresh then it's says 404 not fount

I'm facing an issue that is when I reload/refresh my app then it says 404 error (remember it shows only on production) not development mode.
enter image description here
I tried it on
Vite and ReactJs
```.
Resolve the react 404 error.

This will vary depending on the hosting service. Nginx or Apache must be configured. If you have access to the configuration your domain server, you can add your domain config file below codes;
location / {
try_files $uri /index.html;
}
if you are use Netlify add the netlify.toml and paste the below codes.
[[redirects]]
from = "/*"
to = "/"
status = 200

Change localhost:4200 to something mysite:4200 in Angular 5

I want to change host name for testing purpose. I have tried
ng serve --host 0.0.0.0
but app again runs on localhost:4200. Is there a way that app runs on different host name (word) in browser?

If you're on Mac or Linux and just for local testing, you can edit /etc/hosts and add your own dns mapping. I'm sure you can do something similar on Windows.
For example you can add adding mysite to your hosts file:
127.0.0.1 mysite
Then you can access your app by going to http://mysite:4200.
Note that if making changes to your hosts file don't appear to work you may need to either reboot or make your OS reload your hosts file. See the bottom of this page for more information: https://www.imore.com/how-edit-your-macs-hosts-file-and-why-you-would-want

Add the next row to the end of your hosts file: 127.0.0.1 my.local.host
Start app: ng serve --host "my.local.host"

Single page applications Nginx Django Python and port forwarding

I want to run my single page app in production.
Since I'm using rest API and ajax calls to deliver the content from the backend to the front end for SEO reasons I need to have a no javascript version of my content available for the crawler bots.
I have a url for no javascript version of the content but since the webserver is running on port 8000 to access the no javascript files I need to navigate to mydomain.com:8000/nojs.
My apps url looks like the code below:
urlpatterns = [
url(r'^nojs/$', views.nojs),
url(r'^blog/all/$', views.allTitles),
url(r'^post/(?P<id>[\d+]+)/(?P<title>[\w+]+)/$', views.viewArticle)
]
and my nojs method is simply a hello message:
def nojs(request):
return HttpResponse("Hello")
I'm guessing I need to create some changes in my Nginx configuration to access the nojs method without using the 8000 port after my domain name.
How can I navigate to mydomain.com/nojs and get the hello message without using the 8000 port?

To access the files in the nojs folder I needed to add the following to the Nginx config file for the domain and that would forward the traffic from port 8000 to port 80.
location /nojs {
proxy_pass http://127.0.0.1:8000/nojs/; #or whatever port you are using
proxy_set_header Host $host;
}

How to redirect all Angular request to index.html in Nginx

I have create a simple Nginx config file to server an Angular like so:
server {
listen 80;
listen [::]:80;
root /path/to/apps/myapp/current/dist;
access_log /path/to/apps/myapp/current/log/nginx.access.log;
error_log /path/to/apps/myapp/current/log/nginx.error.log info;
index index.html;
location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
location / {
try_files $uri $uri/ =404;
}
}
And all works fine as expected. because I'm using Angular UI Router, I'd like to forward all pages to index.html so Angular will take over (so a request to example.com/users/new will be redirect by Nginx to index.html, for Angular UI to handle it) for pages reloads, links, etc.
How can I achieve this?
I've playing around with options like:
server {
#implemented by default, change if you need different ip or port
#listen *:80 | *:8000;
server_name test.com;
return 301 $scheme://www.test.com$request_uri;
}
As specified in this answer. But I couldn't anything similar to work based on all requests.
Suggestions will be much appreciated.

You've nearly got it. try_files is the correct one to use, as Richard shows, you just needed to add your index.html in the list. However, there is no need to remove the =404 from the end, in fact, its better not to.
location / {
try_files $uri $uri/ /index.html =404;
}
Once the above change is implemented, reload the config with sudo nginx -s reload
$uri will try the request as a file, if this fails, it moves to the
next one.
$uri/ will try the request as a folder /index.html will
then be tried, which sends all requests to your index.html where your
angular app will be able to route things (also make sure you use
html5mode to avoid the use of # in the url.
=404 will be your final fallback, basically saying: I've tried this as a file, folder, and via index.html. If index.html fails/does not
exist for whatever reason, we will serve a 404 error.
Why =404?
If all goes well, the last one is never used, and routing will just try file, folder, angular app. And that would be it. But I see it as good practice to have the =404 on the end to cover all bases.
Important note about index.html catchall
Regardless of whether or not you use the =404 in try_files, by directing everything to index.html, you basically lose the ability to serve 404 errors from your webserver, unless index.html does not exist (which is where =404 comes in). This means that you will need to handle 'Not Found' urls and missing pages within Angular JS, and you need to be ok with the fact that the error page you use will return a HTTP 200 response, rather than 404. (This is because the moment you direct to the index.html, you've served a page to the user, thus 200).
For added reassurance on the above, google try_files angular js and you will find most examples incorporate =404.
References:
http://nginx.org/en/docs/beginners_guide.html#control
http://ajbogh.blogspot.ca/2015/05/setting-up-angularjs-html5-mode-in.html (just one example)

You need to add the router to the end of your try_files directive, like this:
location / {
try_files $uri $uri/ /index.html;
}
See this document for more.

location / {
try_files $uri$args $uri$args/ index.html;
}
This worked for me

A Local Server Configuration for Single Page Applications

I am looking for a local server configuration that will correctly serve single page applications that utilize push state. This server configuration needs to serve the single page(index.html) for all configured routes but serve assets based on url requested. The Backbone router in the single page will handle customization based on the url.
url: /
serves: /index.html
url: /any/configured/path
serves: /index.html
You can use any server but I prefer one for development work that has a simple setup/install such as:
Python's SimpleHttpServer
connect (npm package)

Categories