{"_id":"59fb30941a8c8d002837cee0","category":{"_id":"59fb30931a8c8d002837cec5","version":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-04T12:30:55.321Z","from_sync":false,"order":4,"slug":"advanced-stuff","title":"Advanced stuff"},"user":"55e6dc8a2d0d3021000daf6e","project":"55e6dcb32d0d3021000daf70","parentDoc":null,"version":{"_id":"59fb30931a8c8d002837cec0","project":"55e6dcb32d0d3021000daf70","__v":2,"createdAt":"2017-11-02T14:49:55.750Z","releaseDate":"2017-11-02T14:49:55.750Z","categories":["59fb30931a8c8d002837cec1","59fb30931a8c8d002837cec2","59fb30931a8c8d002837cec3","59fb30931a8c8d002837cec4","59fb30931a8c8d002837cec5","59fb3502e786cb001c45ec9d"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-04T12:31:08.443Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":26,"body":"afterglow is open source, that means you can download the raw sources and do with it whatever you want to. Here's a short step by step introduction how to do so.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 1 - download the repo\"\n}\n[/block]\nYou'll find the repo [on github](https://github.com/moay/afterglow). Go ahead and download the entire repo.\n\nThere are lot's of files contained, most of them will be included in every build. The raw development versions are located in the `src` folder. You'll easily find afterglow's main file `afterglow.js` there, the rest of the folder structure should be self explaining.\n\nIf you want to test the raw version of afterglow for development purposes, there is a sandbox folder holding some files. The `index.html` puts the whole thing together using the raw files while the `releasetest.html` uses the compiled version (which is placed in the `dist` folder when compiling). You will probably have to upload all the stuff somewhere in order to make the Javascript work properly.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 2 - Install npm\"\n}\n[/block]\nafterglow is built using [gulp](http://gulpjs.com) which requires [npm](https://www.npmjs.com/) to be installed on your machine. There is a short post from the npm-team which explains npm installation [here](http://blog.npmjs.org/post/85484771375/how-to-install-npm).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 3 - install dependencies\"\n}\n[/block]\nWhen npm is running on you system, you will have to install the dependencies that are needed for the building process.\n\nTo do so, navigate to the repo folder and run this command in your terminal/command line:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install\",\n      \"language\": \"python\",\n      \"name\": \"command\"\n    }\n  ]\n}\n[/block]\nThis will install some dependencies and allow you to compile afterglow.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 4 - compile afterglow\"\n}\n[/block]\nAfter having made your changes you probably want to compile the whole thing. With the dependencies installed, thats rather easy.\n\nNavigate to your repo folder and run this command in your terminal/command line:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"gulp build\",\n      \"language\": \"python\",\n      \"name\": \"command\"\n    }\n  ]\n}\n[/block]\nThis will compile afterglow's final file named `afterglow.min.js` and place it in the `dist` folder.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Need help?\"\n}\n[/block]\nIf you get stuck or need help on something, just ask for it [in the forums](http://community.afterglowplayer.com). :-)","excerpt":"This page shows you how to customize afterglow and create your own build.","slug":"build-your-own","type":"basic","title":"Build your own"}

Build your own

This page shows you how to customize afterglow and create your own build.

afterglow is open source, that means you can download the raw sources and do with it whatever you want to. Here's a short step by step introduction how to do so. [block:api-header] { "type": "basic", "title": "Step 1 - download the repo" } [/block] You'll find the repo [on github](https://github.com/moay/afterglow). Go ahead and download the entire repo. There are lot's of files contained, most of them will be included in every build. The raw development versions are located in the `src` folder. You'll easily find afterglow's main file `afterglow.js` there, the rest of the folder structure should be self explaining. If you want to test the raw version of afterglow for development purposes, there is a sandbox folder holding some files. The `index.html` puts the whole thing together using the raw files while the `releasetest.html` uses the compiled version (which is placed in the `dist` folder when compiling). You will probably have to upload all the stuff somewhere in order to make the Javascript work properly. [block:api-header] { "type": "basic", "title": "Step 2 - Install npm" } [/block] afterglow is built using [gulp](http://gulpjs.com) which requires [npm](https://www.npmjs.com/) to be installed on your machine. There is a short post from the npm-team which explains npm installation [here](http://blog.npmjs.org/post/85484771375/how-to-install-npm). [block:api-header] { "type": "basic", "title": "Step 3 - install dependencies" } [/block] When npm is running on you system, you will have to install the dependencies that are needed for the building process. To do so, navigate to the repo folder and run this command in your terminal/command line: [block:code] { "codes": [ { "code": "npm install", "language": "python", "name": "command" } ] } [/block] This will install some dependencies and allow you to compile afterglow. [block:api-header] { "type": "basic", "title": "Step 4 - compile afterglow" } [/block] After having made your changes you probably want to compile the whole thing. With the dependencies installed, thats rather easy. Navigate to your repo folder and run this command in your terminal/command line: [block:code] { "codes": [ { "code": "gulp build", "language": "python", "name": "command" } ] } [/block] This will compile afterglow's final file named `afterglow.min.js` and place it in the `dist` folder. [block:api-header] { "type": "basic", "title": "Need help?" } [/block] If you get stuck or need help on something, just ask for it [in the forums](http://community.afterglowplayer.com). :-)