Hosting sails.js application from subdirectory

Question

Due to certain restrictions, I need to host my application from a subdirectory (e.g. hostname.domain.com/mysailsapp). The webserver is nginx and set to proxy connections to sails/node.

The issue I'm facing is that grunt automatically builds in the links to include frontend javascript/css/images/etc, but the entire sails app is expecting to be at the root level.

Everything works fine when I connect directly to sails via port 1337 as sails is at the root, but when connecting though the subdirectory URL proxied to sails this will not work.

I didn't see an easy way to configure sails to change this behavior and did not want to manually update the grunt build path.

Maybe I'm missing something else, but wanted to open this up on SO to see if there was another way or if I should open up a issue for sails to include such a configuration option.

Edit: Accessing via http://host.domain.com:1337/, the HTML source includes links like this:

<!--STYLES--> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.css"> <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css"> <!--STYLES END-->

These links work fine since you can access hosted from sails/node. http://host.domain.com:1337/bower_components/bootstrap/dist/css/bootstrap.css - Returns 200

Hosting the sails app from an nginx proxy, http://host1.domain.com/mysailsapp/, the sails/nginx return this HTML to the browser:

<!--STYLES--> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.css"> <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css"> <!--STYLES END-->

The browser then attempts to load the static assets via: http://host1.domain.com/bower_components/bootstrap/dist/css/bootstrap.css

This link will not work since the browser is attempting to load the static assets outside of the sub directory.

Answer 1

You can configure nginx to serve the static content from that url.

location /mysailsapp/ {
    alias /path/to/your/app/assets/;
}

Answer 2

Prorper way of doing this is hidding in official docs for sails grunt assets-linker plugin: https://github.com/Zolmeister/grunt-sails-linker where you should use absolute path but this seems doesn't work. So you can use little hack.

Trick would be to put var that represents your subdirectory name inside tasks/linkAssets.js like in example:

var subdirectory='/dashboard';

module.exports = function(grunt) {

    grunt.config.set('sails-linker', {
        devJs: {
            options: {
                startTag: '<!--SCRIPTS-->',
                endTag: '<!--SCRIPTS END-->',
                fileTmpl: '<script src="'+prefix+'%s"></script>',
                appRoot: '.tmp/public'
            },
            files: {
                '.tmp/public/**/*.html': require('../pipeline').jsFilesToInject,
                'views/**/*.html': require('../pipeline').jsFilesToInject,
                'views/**/*.ejs': require('../pipeline').jsFilesToInject
            }
        },

        devJsRelative: {
            options: {
                startTag: '<!--SCRIPTS-->',
                endTag: '<!--SCRIPTS END-->',
                fileTmpl: '<script src="'+prefix+'%s"></script>',
                appRoot: '.tmp/public',
                relative: true
            },
            files: {
                '.tmp/public/**/*.html': require('../pipeline').jsFilesToInject,
                'views/**/*.html': require('../pipeline').jsFilesToInject,
                'views/**/*.ejs': require('../pipeline').jsFilesToInject
            }
        },

and so on, i hope you get the point.

Answer 3

Sails (at least the version I'm using: 0.11) includes grunt tasks that link assets with the grunt-sails-linker's option "relative" set to "true", which avoids setting the initial "/" in the asset's URL. Those tasks names have the suffix "Relative", to differentiate them from their "default" counterparts that have "relative" set to "false".

For example, there is:

• devStylesRelative
• prodStylesRelative
• devJsRelative
• ... and so on

Also, there are alias tasks that run those "relative versions" instead of the "absolute ones". E.g. linkAssetsBuild

You can find these tasks being registered in tasks/config/sails-linker.js.

The solution I used, (although I'm not sure if it's the most standard one or not) is changing the default task to run linkAssetsBuild instead of linkAssets, to ensure that the tasks that are run when lifting sails are the "relative ones".

You can do this by modifying the file tasks/register/default.js.