How to route to multiple Angular apps via Express?

Question

The problem, I have a server and client folder, instead client I have 2 Angular apps: 1 for website and 1 for dashboard.

https://github.com/leongaban/bitage/tree/website

Currently after I run the server, and hit the path / you get routed to the website app, once there I can't seem to route out to the dashboard app.

Folder structure: server/ client/ website/ dashboard/

The main.js inside of server/ which correctly routes to the website app, but can't route to dashboard/

//website api
=============
var website = express.Router();
app.use('/', website);
app.use('/', express.static("../client/website/"));
console.log(__dirname + "../client/website/");

website.use(function(req, res, next) {
    console.log(req.method, req.url);

    next();
});

website.get('/', function(req, res) {
    var path = 'index.html';
    res.sendfile(path, { 'root': '../client/website/' });
});

//dashboard api
===============
var dashboard = express.Router();
app.use('/dashboard', dashboard);
app.use('/', express.static("../client/dashboard/"));
console.log(__dirname + "../client/dashboard/");

dashboard.use(function(req, res, next) {
    console.log(req.method, req.url);

    next();
});

dashboard.get('/dashboard', function(req, res) {
    var path = 'index.html';
    res.sendfile(path, { 'root': '../client/dashboard/' });
});

The mainController routes config of the website:

.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('home', { url: '/home' })

            .state('about', {
                url: '/about',
                templateUrl: 'views/about.html'
            })

            .state('login', {
                url: '/login',
                templateUrl: 'views/login.html'
            })

            .state('register', {
                url: '/register',
                templateUrl: 'views/register.html'
            });

        $urlRouterProvider.otherwise('/home');
}])

Once I hit http://localhost:9999/ the website Angular app takes over: http://localhost:9999/#/home And I'm in the website views and cannot switch routes and see the dashboard app.

Below is the config in the mainController for the dashboard app

.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider

            .state('wallet', { url: '/wallet' })

            .state('wallet', {
                url: '/wallet',
                templateUrl: 'views/wallet.html'
            })

            .state('accounts', {
                url: '/accounts',
                templateUrl: 'views/accounts.html'
            })

            .state('settings', {
                url: '/settings',
                templateUrl: 'views/settings.html'
            })

            .state('help', {
                url: '/help',
                templateUrl: 'views/help.html'
            });

        $urlRouterProvider.otherwise('wallet');
}])

---

How would you change the routes in the Express app (main.js) to allow me to change Angular apps?

ie:
http://localhost:9999/#/home = website
http://localhost:9999/#/dashboard = dashboard

Answer 1

The easiest way of doing this would be to change this line in your server:

app.use('/', express.static("../client/dashboard/"));

to this:

app.use('/', express.static("../client/"));

and in your Angular apps:

        .state('about', {
            url: '/about',
            templateUrl: 'dashboard/views/about.html'
        })

However, you may run into issues down the line with having one backend serve two front-ends. Have you considered separating your server out into two apis so as to separate concerns?

Another (perhaps more industry-standard) way of accomplishing this would be to use nginx to serve your static assets and act as a reverse-proxy to serve up static API routes for each backend.

Things to consider. I don't mean to over supply you with information or send you down rabbit trails without actually answering your question. So let me know if the first option works, or partially works, but you'd like to expand on it to obtain additional functionality.