{"_id":"54b3749ed8ea260b00e4e60f","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"},"githubsync":"","user":"54a3af95ad78941600ca2e2a","__v":5,"project":"54b2c91287873d1f00dbebdb","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-01-12T07:15:42.795Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"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.\n\nAll of the examples below use a service with the following configuration:\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]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Default 'local' mode\"\n}\n[/block]\nTo launch bosco in local mode, simply type:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"bosco cdn\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nThe 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.\n\n* **js.bottom**: http://localhost:7334/resource-reviews/local/html/bottom.js.html\n* **js.bottom-v2**: http://localhost:7334/resource-reviews/local/html/bottom-v2.js.html\n* **css.main**: http://localhost:7334/resource-reviews/local/html/main.css.html\n* **css.main-v2**: http://localhost:7334/resource-reviews/local/html/main-v2.css.html\n\nThe contents of the bottom JS fragment is:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Generated by Bosco -->\\n<script src=\\\"http://local.tescloud.com:7334/resource-reviews/local/js/report-review.js\\\"></script>\\n<script src=\\\"http://local.tescloud.com:7334/resource-reviews/local/js/moderate-review.js\\\"></script>\\n<script src=\\\"http://local.tescloud.com:7334/resource-reviews/local/js/add-review.js\\\"></script>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nAs 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!\n\nThe 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.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"URL Pattern\",\n  \"body\": \"http://localhost:7334/[service-name]/[version]/[file-type]/[bundle-name].[bundle-type]\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Minified 'local' mode\"\n}\n[/block]\nIf you want to run locally with minified assets, simply type:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"bosco cdn minify\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nThis does the same process as above, but now minifies the static assets together into the bundles specified in the bosco-service.json file.  \n\nAfter running this step, you will have **exactly the same HTML fragments**:\n\n* **js.bottom**: http://localhost:7334/resource-reviews/local/html/bottom.js.html\n* **js.bottom-v2**: http://localhost:7334/resource-reviews/local/html/bottom-v2.js.html\n* **css.main**: http://localhost:7334/resource-reviews/local/html/main.css.html\n* **css.main-v2**: http://localhost:7334/resource-reviews/local/html/main-v2.css.html\n\nBut now the content of this file is different:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n<!-- Generated by Bosco -->\\n<script src=\\\"http://local.tescloud.com:7334/resource-reviews/local/js/bottom.js\\\"></script>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nIt now points to the minified file.\n\nWhat 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.","excerpt":"","slug":"running-a-local-cdn","type":"basic","title":"Running a local 'CDN'"}

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: [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] [block:api-header] { "type": "basic", "title": "Default 'local' mode" } [/block] To launch bosco in local mode, simply type: [block:code] { "codes": [ { "code": "bosco cdn", "language": "text" } ] } [/block] 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: [block:code] { "codes": [ { "code": "<!-- Generated by Bosco -->\n<script src=\"http://local.tescloud.com:7334/resource-reviews/local/js/report-review.js\"></script>\n<script src=\"http://local.tescloud.com:7334/resource-reviews/local/js/moderate-review.js\"></script>\n<script src=\"http://local.tescloud.com:7334/resource-reviews/local/js/add-review.js\"></script>\n", "language": "html" } ] } [/block] 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. [block:callout] { "type": "info", "title": "URL Pattern", "body": "http://localhost:7334/[service-name]/[version]/[file-type]/[bundle-name].[bundle-type]" } [/block] [block:api-header] { "type": "basic", "title": "Minified 'local' mode" } [/block] If you want to run locally with minified assets, simply type: [block:code] { "codes": [ { "code": "bosco cdn minify", "language": "text" } ] } [/block] 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: [block:code] { "codes": [ { "code": "\n<!-- Generated by Bosco -->\n<script src=\"http://local.tescloud.com:7334/resource-reviews/local/js/bottom.js\"></script>\n", "language": "html" } ] } [/block] 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.