{"_id":"54b3643373abe90b00106f7a","__v":4,"category":{"_id":"54b35d86aad2810b009507d7","__v":4,"pages":["54b3643373abe90b00106f7a","54b3749ed8ea260b00e4e60f","54b374aed8ea260b00e4e611","54b374d273abe90b00106fa5"],"version":"54b2c93f336cfb0b00608c28","project":"54b2c91287873d1f00dbebdb","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-01-12T05:37:10.271Z","from_sync":false,"order":2,"slug":"static-assets","title":"Static Assets"},"version":{"_id":"54b2c93f336cfb0b00608c28","forked_from":"54b2c91287873d1f00dbebde","project":"54b2c91287873d1f00dbebdb","__v":4,"createdAt":"2015-01-11T19:04:31.031Z","releaseDate":"2015-01-11T19:04:31.031Z","categories":["54b2c93f336cfb0b00608c29","54b2cb87db3c741400eac8c2","54b35d86aad2810b009507d7","54b35d91aad2810b009507d8"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.4.0","version":"0.4.0"},"project":"54b2c91287873d1f00dbebdb","user":"54a3af95ad78941600ca2e2a","githubsync":"","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-01-12T06:05:39.732Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"At TES, Bosco also performs one additional key function - it manages our static asset pipeline.  \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Rationale\"\n}\n[/block]\nWhy would you also get Bosco to manage your static assets?  Well, for the following reasons:\n\n* 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).\n* 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.\n* 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).\n* It is designed to work very well with [Compoxure](https://github/tes/compoxure), with [Bundle Version](https://github.com/tes/bundle-version) as the glue - but you can use it without these.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How it works\"\n}\n[/block]\nThe 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"tags\\\":[\\\"review\\\", \\\"summary\\\", \\\"admin\\\"],\\n    \\\"service\\\":{\\n        \\\"name\\\": \\\"resource-reviews\\\",\\n        \\\"dependsOn\\\":[\\\"infra-rabbitmq\\\",\\\"infra-mongodb\\\",\\\"infra-redis\\\"]\\n    },\\n    \\\"build\\\":{\\n        \\\"command\\\":\\\"node_modules/.bin/gulp build\\\",\\n        \\\"watch\\\": {\\n            \\\"command\\\":\\\"node_modules/.bin/gulp\\\",\\n            \\\"ready\\\":\\\"Finished 'default'\\\"\\n        }\\n    },\\n    \\\"assets\\\": {\\n        \\\"basePath\\\": \\\"/src/public\\\",\\n        \\\"js\\\": {\\n            \\\"bottom\\\": [\\n                \\\"js/report-review.js\\\",\\n                \\\"js/moderate-review.js\\\",\\n                \\\"js/add-review.js\\\"\\n            ],\\n            \\\"bottom-v2\\\" : [\\n                \\\"js/new-add-review.js\\\"\\n            ]\\n        },\\n        \\\"css\\\": {\\n            \\\"main-v2\\\": [\\n                \\\"css/main.css\\\"\\n            ],\\n            \\\"main\\\": [\\n                \\\"css/reviews.css\\\"\\n            ]\\n        }\\n    }\\n}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nThe two sections that are important for the static asset pipeline are build and assets.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"bosco-service.json: build\"\n}\n[/block]\nThis 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.\n\nIf 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" \\\"build\\\":{\\n        \\\"command\\\":\\\"node_modules/.bin/gulp build\\\",\\n        \\\"watch\\\": {\\n            \\\"command\\\":\\\"node_modules/.bin/gulp\\\",\\n            \\\"ready\\\":\\\"Finished 'default'\\\"\\n        }\\n }\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nThe properties are as follows:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Property\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"command\",\n    \"0-1\": \"Enter the path to the command to run during the build process.  This will be run in both [cdn](doc:cdn) and [s3push](doc:s3push) prior to serving or pushing any assets.\",\n    \"1-0\": \"watch\",\n    \"1-1\": \"Enter the path to the command to run if you want to watch assets for changes.\\n\\nAdditionally provide some text that appears as the final line of the output of the build step so that Bosco knows it has completed.\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"bosco-service.json: assets\"\n}\n[/block]\nThis section of the configuration actually allows you to specify the assets that Bosco needs to roll up into bundles for [cdn](doc:cdn) or [s3push](doc:s3push).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" \\\"assets\\\": {\\n        \\\"basePath\\\": \\\"/src/public\\\",\\n        \\\"js\\\": {\\n            \\\"bottom\\\": [\\n                \\\"js/report-review.js\\\",\\n                \\\"js/moderate-review.js\\\",\\n                \\\"js/add-review.js\\\"\\n            ],\\n            \\\"bottom-v2\\\" : [\\n                \\\"js/new-add-review.js\\\"\\n            ]\\n        },\\n        \\\"css\\\": {\\n            \\\"main-v2\\\": [\\n                \\\"css/main.css\\\"\\n            ],\\n            \\\"main\\\": [\\n                \\\"css/reviews.css\\\"\\n            ]\\n        },\\n       \\\"img\\\": {\\n            \\\"images\\\":[\\n                \\\"img/lg-share-en.gif\\\"\\n              ]\\n       }\\n    }\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Property\",\n    \"h-1\": \"Sub-Property\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"basePath\",\n    \"0-2\": \"This 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).\",\n    \"1-0\": \"js\",\n    \"1-1\": \"\\\"bundle name\\\"\",\n    \"1-2\": \"Add the javascript files, grouped together into bundles.\",\n    \"2-0\": \"css\",\n    \"2-1\": \"\\\"bundle name\\\"\",\n    \"2-2\": \"Add the css files, grouped together into bundles.\",\n    \"3-0\": \"img\",\n    \"3-1\": \"\\\"images\\\"\",\n    \"3-2\": \"Add any images you want pushed to S3.\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]","excerpt":"Have Bosco manage your assets","slug":"basics","type":"basic","title":"Basics"}

Basics

Have Bosco manage your assets

At TES, Bosco also performs one additional key function - it manages our static asset pipeline. [block:api-header] { "type": "basic", "title": "Rationale" } [/block] 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](https://github/tes/compoxure), with [Bundle Version](https://github.com/tes/bundle-version) as the glue - but you can use it without these. [block:api-header] { "type": "basic", "title": "How it works" } [/block] 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: [block:code] { "codes": [ { "code": "{\n \"tags\":[\"review\", \"summary\", \"admin\"],\n \"service\":{\n \"name\": \"resource-reviews\",\n \"dependsOn\":[\"infra-rabbitmq\",\"infra-mongodb\",\"infra-redis\"]\n },\n \"build\":{\n \"command\":\"node_modules/.bin/gulp build\",\n \"watch\": {\n \"command\":\"node_modules/.bin/gulp\",\n \"ready\":\"Finished 'default'\"\n }\n },\n \"assets\": {\n \"basePath\": \"/src/public\",\n \"js\": {\n \"bottom\": [\n \"js/report-review.js\",\n \"js/moderate-review.js\",\n \"js/add-review.js\"\n ],\n \"bottom-v2\" : [\n \"js/new-add-review.js\"\n ]\n },\n \"css\": {\n \"main-v2\": [\n \"css/main.css\"\n ],\n \"main\": [\n \"css/reviews.css\"\n ]\n }\n }\n}", "language": "json" } ] } [/block] The two sections that are important for the static asset pipeline are build and assets. [block:api-header] { "type": "basic", "title": "bosco-service.json: build" } [/block] 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. [block:code] { "codes": [ { "code": " \"build\":{\n \"command\":\"node_modules/.bin/gulp build\",\n \"watch\": {\n \"command\":\"node_modules/.bin/gulp\",\n \"ready\":\"Finished 'default'\"\n }\n }", "language": "json" } ] } [/block] The properties are as follows: [block:parameters] { "data": { "h-0": "Property", "h-1": "Description", "0-0": "command", "0-1": "Enter the path to the command to run during the build process. This will be run in both [cdn](doc:cdn) and [s3push](doc:s3push) prior to serving or pushing any assets.", "1-0": "watch", "1-1": "Enter the path to the command to run if you want to watch assets for changes.\n\nAdditionally provide some text that appears as the final line of the output of the build step so that Bosco knows it has completed." }, "cols": 2, "rows": 2 } [/block] [block:api-header] { "type": "basic", "title": "bosco-service.json: assets" } [/block] This section of the configuration actually allows you to specify the assets that Bosco needs to roll up into bundles for [cdn](doc:cdn) or [s3push](doc:s3push). [block:code] { "codes": [ { "code": " \"assets\": {\n \"basePath\": \"/src/public\",\n \"js\": {\n \"bottom\": [\n \"js/report-review.js\",\n \"js/moderate-review.js\",\n \"js/add-review.js\"\n ],\n \"bottom-v2\" : [\n \"js/new-add-review.js\"\n ]\n },\n \"css\": {\n \"main-v2\": [\n \"css/main.css\"\n ],\n \"main\": [\n \"css/reviews.css\"\n ]\n },\n \"img\": {\n \"images\":[\n \"img/lg-share-en.gif\"\n ]\n }\n }", "language": "json" } ] } [/block] [block:parameters] { "data": { "h-0": "Property", "h-1": "Sub-Property", "h-2": "Description", "0-0": "basePath", "0-2": "This 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).", "1-0": "js", "1-1": "\"bundle name\"", "1-2": "Add the javascript files, grouped together into bundles.", "2-0": "css", "2-1": "\"bundle name\"", "2-2": "Add the css files, grouped together into bundles.", "3-0": "img", "3-1": "\"images\"", "3-2": "Add any images you want pushed to S3." }, "cols": 3, "rows": 4 } [/block]