Running a local 'CDN'

Bosco has a command that allows you to mimic the structure of a CDN locally - this is to allow your code to not have a special 'development' mode that contains all of the un-minified JS and CSS. This command spins up a local HTTP server to serve up the assets.

All of the examples below use a service with the following configuration:

JSON

{
    "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"
            ]
        }
    }
}

Default 'local' mode

To launch bosco in local mode, simply type:

Text

bosco cdn

The default command will run across all repositories, pull together all of the source assets into HTML fragments for Compoxure (or your other code) to use.

• js.bottom: http://localhost:7334/resource-reviews/local/html/bottom.js.html
• js.bottom-v2: http://localhost:7334/resource-reviews/local/html/bottom-v2.js.html
• css.main: http://localhost:7334/resource-reviews/local/html/main.css.html
• css.main-v2: http://localhost:7334/resource-reviews/local/html/main-v2.css.html

The contents of the bottom JS fragment is:

HTML

<!-- Generated by Bosco -->
<script src="http://local.tescloud.com:7334/resource-reviews/local/js/report-review.js"></script>
<script src="http://local.tescloud.com:7334/resource-reviews/local/js/moderate-review.js"></script>
<script src="http://local.tescloud.com:7334/resource-reviews/local/js/add-review.js"></script>

As you can see, this mode does not minify the assets, and so you can't programmatically generate the url for any of the static asset bundles - as it hasn't actually created any of them!

The advantage of operating in this mode is that all of the javascript includes are broken out into the individual files that are included in the projects, so it makes it easier to debug. Note that in the minified mode you still get access to source maps, but that mode is slightly clunkier to work with.

📘

URL Pattern

http://localhost:7334/[service-name]/[version]/[file-type]/[bundle-name].[bundle-type]

Minified 'local' mode

If you want to run locally with minified assets, simply type:

Text

bosco cdn minify

This does the same process as above, but now minifies the static assets together into the bundles specified in the bosco-service.json file.

After running this step, you will have exactly the same HTML fragments:

• js.bottom: http://localhost:7334/resource-reviews/local/html/bottom.js.html
• js.bottom-v2: http://localhost:7334/resource-reviews/local/html/bottom-v2.js.html
• css.main: http://localhost:7334/resource-reviews/local/html/main.css.html
• css.main-v2: http://localhost:7334/resource-reviews/local/html/main-v2.css.html

But now the content of this file is different:

HTML

<!-- Generated by Bosco -->
<script src="http://local.tescloud.com:7334/resource-reviews/local/js/bottom.js"></script>

It now points to the minified file.

What this means is that you can have a composition layer (e.g. Compoxure) pull in exactly the same HTML fragment, and the assets will be served either minified or not depending on how you configure Bosco - it is transparent to the upstream projects.