Handle MEAN stack application address without '#' snippet

Edit 1: Here is the mini-code I did it to reproduce the bug. Follow README.md

to install.

Edit 2: Finally I found one solution. Also, $locationProvider.html5Mode(true);

( $locationProvider.hashPrefix('')

NOT NECESSARY for me) and <base href="/" />

, I need to add the following in routes/index.js

, not app.js

. Then we don't need to add anything else to app.js

either nginx or apache like this thread .

var express = require('express');
var router = express.Router();
var path = require('path');
... ...
router.get('*', function(req, res) {
    res.sendfile('./views/index.html'); // load our public/index.html sendFile
    // res.sendFile('index.html', { root: path.join(__dirname, 'views') }); // does not work
});

      

        
        
        
      

    

One problem: in the server console, it gives express deprecated res.sendfile: Use res.sendFile instead routes/index.js:461:9

. But res.sendFile('index.html', { root: path.join(__dirname, 'views') });

can't help it, it returns 404 error.

My express version ~4.14.0

... Does anyone know how to fix this?

OP:

I am developing on Mac with Apache a MEAN stack application that can be queried https://localhost:3000/#/home

. In production with an NGINX server, the application can be requested   https://www.myapp.io/#/home

. The fragment identifier is #

required in all cases because of angular ui-router

.

So, I wanted to make a nice url without #

(eg https://www.myapp.io/home

, https://localhost:3000/home

). I did the following:

• added $locationProvider.html5Mode(true); $locationProvider.hashPrefix('')
  
  in app.config(['$stateProvider'...
  
  .

• added <base href="/" />
  
  toindex.html
  
  

As a result, it https://localhost:3000/#/home

automatically changes to https://localhost:3000/home

in the browser bar, similar to https://www.myapp.io/#/home

.

However, direct entry https://localhost:3000/home

or https://www.myapp.io/home

in the browser will throw an error (I don't know how to turn the previous one <h1><%= message %></h1><h2><%= error.status %></h2><pre><%= error.stack %></pre>

into error.ejs

before error.html

), so I don't have more details).

So, now you need to do https://localhost:3000/home

and https://www.myapp.io/home

.

Following this thread , I added the following to app.js

:

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));    
app.all('/*', function(req, res, next) {
    res.sendFile('index.html', { root: __dirname });
});

      

        
        
        
      

    

And on Apache Mac, here's mine httpd-vhosts.conf

, after restarting apache

, https://localhost:3000/home

still returning an error.

<VirtualHost *:443>
    ServerName localhost
    DocumentRoot "/Users/SoftTimur"

    SSLEngine on
    SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
    SSLCertificateFile /etc/apache2/ssl/localhost.crt
    SSLCertificateKeyFile /etc/apache2/ssl/localhost.key

    <Directory "/Users/SoftTimur">
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]

        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

      

        
        
        
      

    

In production, this is an NGINX server block. NGINX https://www.myapp.io/home

still returns error after restarting .

server {
    listen 443 ssl;

    server_name myapp.io www.myapp.io;

    ssl_certificate /etc/letsencrypt/live/myapp.io/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myapp.io/privkey.pem;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:EC$
    ssl_session_timeout 1d;
    ssl_stapling on;
    ssl_stapling_verify on;
    add_header Strict-Transport-Security max-age=15768000;

    index index.html;

    root /opt/myapp;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~ /.well-known {
        allow all;
    }

    location / {
        proxy_set_header    Host                $host;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto   $scheme;
        proxy_set_header    Accept-Encoding     "";
        proxy_set_header    Proxy               "";
        proxy_pass          https://127.0.0.1:3000;

        # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove sock$

        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
    }
}

      

        
        
        
      

    

Can anyone please help?