How to avoid adding ExpressJS app.get() for each of my html files?

Question

I have the following project structure (irrelevant files omitted for brevity):

- app
    - authentication
        - authentication.controller.js
        - authentication.routes.js
        - authentication.scss
        - registration.html
        - user.model.js
    - app.js
    - app.scss
- server
    - server.controller.js
    - server.js
    - server.routes.js
- views
    - index.html

The problem is that when I use an html file as a templateUrl for AngularJS routing, I get a 'cannot GET /path/to/someFile.html' error.

(function() {
    angular
        .module('appName', [
            'ngMessages',
            'ngResource',
            'ui.router'
        ])
        .config(function($stateProvider) {
            $stateProvider
                .state('registration', {
                    url: '/registration',
                    templateUrl: '/app/authentication/registration.html',
                    controller: 'AuthenticationController'
                });
        });
})();

Does that mean I have to add the following chunk of code in my server.js file for every html file I use?

app.get('/app/authentication/registration.html', function(request, response) {
    response.sendFile(path.resolve('app/authentication/registration.html'));
});

That seems like a huge pain. I currently also have to do that for each css and js file I have. I could use gulp to concatenate those, so I'd only have to have an app.get for one css and one js file, but I can't do that for html files.

Is there a better way to handle this? It doesn't make much sense to have an angular route AND an express route for each html file.

Answer 1

You can easily serve static files with Express:

app.use(express.static('views'));
// http://localhost/ -> views/index.html

to serve a directory to a specific path you can use:

app.use('/app', express.static('app'));
// http://localhost/app/authentication/registration.html
//      -> app/authentication/registration.html

This will resolve the paths and serve the pages.

If you only want to serve specific pages (e.g. views) I suggest you put it all in one directory and only serve that directory static.

See also: Express API