Develop Reference

My Angular 6 routing returns 404 after page refresh behind Nginx proxy

I have my angular app running inside docker that exposed on port 83, and I also have a spring-boot rest app inside another docker that exposed on port 8083.
In the host server I have one Nginx server that reroute every requests using below config:
server {
listen 80;
server_name mydomain.com;
location / {
proxy_pass http://127.0.0.1:83;
}
}
server {
listen 80;
server_name rest.mydomain.com;
location / {
proxy_pass http://127.0.0.1:8083;
}
}
With above config, every request that uses mydomain.com will goes to my Angular 6 app, and every request that uses rest.mydomain.com will goes to my spring-boot rest app.
In the index page of my angular, I have a search form which will trigger the Routing module to open a search result page.
My app-routing.module.ts is like below:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomePgComponent } from './home-pg/home-pg.component';
import { ResultsPgComponent } from './results-pg/results-pg.component';
const routes: Routes = [
{ path: "", component: HomePgComponent },
{ path: "search", component: ResultsPgComponent }
];
#NgModule({
imports: [RouterModule.forRoot(
routes,
{ enableTracing: true }
)],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
export const RoutingComponents = [
HomePgComponent,
ResultsPgComponent
];
And the trigger on my search form is like below:
onSearchBtnClk(el) {
if (el.value.length > 0) {
console.log(">>> SEARCH ARGS = " + el.value);
this.router.navigate(['/search'], { queryParams: { q: el.value }});
this.newArgsEmitter.emit(el.value);
}
}
Everything works well, when I click the search button, my angular will open the search result page and shows the results.
My problem is, whenever I click REFRESH button on the browser, instead of a search page result, it shows 404 page. Why is this happen?
Any advice would be appreciated.
Thanks

You need to add a try_files statement, but because you are using a proxy_pass this makes things a bit more complicated. This is untested but you can try this:
server {
listen 80;
server_name mydomain.com;
try_files $uri $uri/ /index.html #proxy;
location #proxy {
proxy_pass http://127.0.0.1:83;
}
}
The “#” prefix defines a named location. Such a location is not used for a regular request processing, but instead used for request redirection. They cannot be nested, and cannot contain nested locations.
read more

It's because an Agular app is a single page app (SPA).
When you refresh the app your nginx config needs to always serve up index.html.
Currently, when you refresh say for example /some-path
nginx, by default, will look for a file called /some-path.html which obviously does not exist.
To always serve up index.html you need to tweak your nginx.conf something like this:
Nginx config for single page app with HTML5 App Cache
Here's an excerpt from the accepted answer at that link:
root /files/whatever/public;
index index.html;
location / {
try_files $uri /index.html =404;
}
# Proxy requests to "/auth" and "/api" to the server.
location ~ ^/(auth|api) {
proxy_pass http://application_upstream;
proxy_redirect off;
}
Also, just Google configure Nginx to serve Single Page Application

Assets not routing properly with NGNIX, Node 8.11 and Angular 6

I have an issue getting assets to load properly in our current setup. We use NGINX, Node 8.11, angular 6
In a nut shell, I had to do some parsing of request coming into our node server.js to get files to load properly for angular.
Here is the setup a typical application called heroes:
Nginx
location /heroes/ {
proxy_pass
http://unix:///myapps/tmp/node.sock;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header X-UA-Compatible "IE=edge";
}
Node Server.js
...
//==============================================================
// Point static path to dist
//=================================================================
app.use(express.static(__dirname + '/dist/'));
// set the static files location for the angular build
...
Node Server.js - create an allowed extension list
...
// Allowed extensions list can be extended depending on your own needs
const allowedExt = [
'.js',
'.ico',
'.css',
'.png',
'.jpg',
'.woff2',
'.woff',
'.ttf',
'.svg',
'.map',
'.otf',
'.eot',
'.gif'
];
...
Node Server.js - route files to the angular dist
...
// Redirect all the other requests
// TODO: This part is a hack.
//The main issue is express not serving up the static assets
app.get('*', (req, res) => {
if (allowedExt.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
var iFileStart=req.url.lastIndexOf("/");
var sFile=req.url.substring(iFileStart+1);
res.sendFile(path.resolve('dist/'+sFile));
} else {
res.sendFile(path.resolve('dist/index.html'));
}
});
...
Angular index.html
...
<base href="/heroes/">
...
With this setup - my apps work for the most part. I had to add a few more kludges into it for some other issues.
The problem is - express or my nginx setup wasn't routing the request for assets correctly before this hack. I'm pretty sure I shouldn't have to check file extensions and route them differently.
If I change the Node Server.js file to this:
app.get('*', (req, res) => {
res.sendFile(path.resolve('dist/index.html'));
});
Then I get this error in the browers:
JS files being served as html?
It seems that the files can be found but aren't being processed as JS files.
Any suggestions?

Ok, I figure out my own issue.
Had to edit the following:
NGINX:
location /heroes/ {
root /app/mydir/heroes/dist <--- added this
proxy_pass http://unix:///myapps/tmp/node.sock;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header X-UA-Compatible "IE=edge";
}
Server.js
...
//======================================================================
// Point static path to dist - false will cause a 404 if not found
//========================================================================
app.use(function (req, res, next) {
next();
}, express.static(__dirname+'/dist',{fallthrough:true}));
...
....
app.get('*', (req, res) => {
res.sendFile(path.resolve('dist/heores/index.html'));
});
...
angular.json
"outputPath": "dist/heroes",
Now everything works. Hopefully others will find this useful.

Cannot GET / with gulp-connect-php

I'm using gulp-connect-php to try and run a php server locally with BrowserSync. Here's my gulp config file:
var gulp = require('gulp'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');
gulp.task('connect-sync', function() {
connect.server({}, function (){
browserSync({
server: {
baseDir: "app"
},
// proxy: '127.0.0.1:8000'
});
});
gulp.watch('**/*.php').on('change', function () {
browserSync.reload();
});
});
gulp.task( 'default', [ 'connect-sync' ] )
The above code works when I have a index.html file in my app directory but when I replace it with an index.php file I get the following message:
Cannot GET /
Not exactly sure what i've done wrong here?

What I understood from your question is that php serve is not recognizing .php files. There are 2 ways to get this work.
Apache (httpd.conf), search for DirectoryIndex and replace the line with this (will only work if you have dir_module enabled, but that's default on most installs) or add index.php
DirectoryIndex index.php index.phtml index.html index.htm
or
Create a .htaccess file in your web root.
Add the line...
DirectoryIndex index.php
Hope this helps!

You need to declare a index filename, add and index object to server.
...
browserSync({
server: {
baseDir: "app",
index: "/index.php"
},
});
...
You could also set browserSync startpage to /index.php instead of /
Edit I couldn't get startPath to work, so use index as in the example above.
...
browserSync({
server: {
baseDir: "app"
},
startPath: "/index.php"
});
...
#pramod-patil I don't think Apache directions will help here, since browserSync doesn't use Apache for serving PHP.

Why won't my grunt proxy work? - Grunt

I have been working on setting up a proxy with Grunt. I am able to connect to my Grunt server, but when I try to hit the proxy I get a 404. Here is my Gruntfile.js
"use strict";
module.exports = function(grunt) {
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
connect:{
development: {
port: 9000,
base: 'app',
keepalive: true,
livereload: {
options: {
middleware: function() {
return proxySnippet;
}
}
},
proxies: [{
context: '/name',
host: 'http://99.42.222.76:3000/users.json',
changeOrigin: true
}]
}
}
});
grunt.registerTask('server', ['configureProxies', 'connect']);
};
I have tried to use this blog to help me set up everything, but I still am not having any luck. Thanks in advance.

At least part of the issue is that you don't want to use the full URL in the host: of the proxy configuration. According to the docs (https://github.com/drewzboto/grunt-connect-proxy), the host should not include the http.
Quote:
options.host
Type: String
The host to proxy to. Should not start with the http/https protocol.
I think the proxies section you want should look like the below. The host indicates the IP address or host name to proxy to, the port indicates the port to proxy to, and the rewrite indicates a translation from /name to /users.json.
proxies: [{
context: '/name',
host: '99.42.222.76',
port: 3000',
changeOrigin: true,
rewrite: { '^/name': '/users.json' }
}]

Yeoman to use google app engine server

I setup Yeoman 1.0 beta to handle my js/css tasks. Everything works fine that, if I run grunt server, it starts up a static server and connects a browser session to port 9000 (livereload). js/css concat, minification are also working.
Now, is there a way I can make it to connect to a google app engine development server (instead of starting a static server). The server is running at port 8080 on localhost, and I want grunt to reload the webpage upon css/js files under watch. These files would be served by GAE server.
I see a section rolling your own at grunt-contrib-connect documentation, but not sure it means an external server. As far as I see, these are the relavent configuration from Gruntfile.js
connect: {
livereload: {
options: {
port: 8080, //*** was 9001 originally **
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
When I change the port number to 8080, and try to start, obviously it gives error.
Fatal error: Port 8080 is already in use by another process.
so, I don't want to start a new server, but connect through GAE server already running.
Thanks.

In order to use GAE server instead of nodejs server, we need to do the following.
* Compile your less/coffeescript, concat[, minify], copy your code to the location where the app engine code resides.
* Create a task in grunt.js to spawn a shell command to run app engine.
This is the example, that I used as reference. https://github.com/cowboy/grunt/tree/master/tasks
Following grunt.js file may help!
module.exports = function(grunt) {
grunt.initConfig({
....
});
grunt.registerTask('appengine-update', 'Upload to App Engine.', function() {
var spawn = require('child_process').spawn;
var PIPE = {stdio: 'inherit'};
var done = this.async();
spawn('appcfg.py', ['update', 'build/task-manager-angular'], PIPE).on('exit', function(status) {
done(status === 0);
});
});
grunt.registerTask('clean', 'Clean the whole build directory.', function() {
require('child_process').exec('rm -rdf build', this.async());
});
grunt.registerTask('run', 'Run app server.', function() {
var spawn = require('child_process').spawn;
var PIPE = {stdio: 'inherit'};
var done = this.async();
spawn('dev_appserver.py', ['.'], PIPE).on('exit', function(status) {
done(status === 0);
});
});
});
//....
//Other settings
//....
grunt.loadTasks('tasks');
grunt.loadNpmTasks('grunt-coffeelint');
grunt.registerTask('build', 'coffee less concat');
grunt.registerTask('deploy', 'coffee less concat build appengine-update');
grunt.registerTask('default', 'coffee less');
};

Found this Google App Engine management plugin for Grunt