Basics

Have Bosco manage your assets

At TES, Bosco also performs one additional key function - it manages our static asset pipeline.

Rationale

Why would you also get Bosco to manage your static assets? Well, for the following reasons:

  • It is already aware of all of the projects (which in our sort of architecture are a collection of services that support vertical and horizontal sections of our site).
  • It allows us to standardise the process by which assets are minified and uploaded to a CDN - not just in terms of tooling but also convention on urls and location.
  • It allows us to serve up assets locally in exactly the same way as we do when published on the CDN (so there is very limited change between development and production).
  • It is designed to work very well with Compoxure, with Bundle Version as the glue - but you can use it without these.

How it works

The static asset pipeline in Bosco is all about the bosco-service.json file, see below for an example of a file from one of our services:

{
    "tags":["review", "summary", "admin"],
    "service":{
        "name": "resource-reviews",
        "dependsOn":["infra-rabbitmq","infra-mongodb","infra-redis"]
    },
    "build":{
        "command":"node_modules/.bin/gulp build",
        "watch": {
            "command":"node_modules/.bin/gulp",
            "ready":"Finished 'default'"
        }
    },
    "assets": {
        "basePath": "/src/public",
        "js": {
            "bottom": [
                "js/report-review.js",
                "js/moderate-review.js",
                "js/add-review.js"
            ],
            "bottom-v2" : [
                "js/new-add-review.js"
            ]
        },
        "css": {
            "main-v2": [
                "css/main.css"
            ],
            "main": [
                "css/reviews.css"
            ]
        }
    }
}

The two sections that are important for the static asset pipeline are build and assets.

bosco-service.json: build

This section of the configuration is entirely optional - it allows you to specify a service specific build step that creates the files that are then referenced within the assets section.

If you do not provide this step, Bosco will just pull together (and minify) the assets for you. Doing this step however allows you to leverage all of the tools of something like Gulp.

"build":{
        "command":"node_modules/.bin/gulp build",
        "watch": {
            "command":"node_modules/.bin/gulp",
            "ready":"Finished 'default'"
        }
 }

The properties are as follows:

PropertyDescription
commandEnter the path to the command to run during the build process. This will be run in both cdn and s3push prior to serving or pushing any assets.
watchEnter the path to the command to run if you want to watch assets for changes.

Additionally provide some text that appears as the final line of the output of the build step so that Bosco knows it has completed.

bosco-service.json: assets

This section of the configuration actually allows you to specify the assets that Bosco needs to roll up into bundles for cdn or s3push.

"assets": {
        "basePath": "/src/public",
        "js": {
            "bottom": [
                "js/report-review.js",
                "js/moderate-review.js",
                "js/add-review.js"
            ],
            "bottom-v2" : [
                "js/new-add-review.js"
            ]
        },
        "css": {
            "main-v2": [
                "css/main.css"
            ],
            "main": [
                "css/reviews.css"
            ]
        },
       "img": {
            "images":[
                "img/lg-share-en.gif"
              ]
       }
    }
PropertySub-PropertyDescription
basePathThis is the base folder where all the assets are located - this is pre-pended to all urls in this section (so no need to repeat).
js"bundle name"Add the javascript files, grouped together into bundles.
css"bundle name"Add the css files, grouped together into bundles.
img"images"Add any images you want pushed to S3.