](https://mattdesl.github.io/browserify-example)
8 |
9 | Click [here](https://mattdesl.github.io/browserify-example) to see the live demo. The source is [here](./index.js).
10 |
11 | ## Motivation
12 |
13 | This template is for developers looking to tinker with JavaScript and npm modules, without getting caught up in Gulp/Grunt scripts, Webpack configuration, React/Angular/etc, and other [complex modern practices](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.t213ju5oj). It tries to Keep It Simple, Stupid (KISS) without sacrificing the developer experience.
14 |
15 | It is the workflow I use for [prototyping](http://mattdesl.svbtle.com/some-javascript-sketches) with WebGL, canvas, and other APIs.
16 |
17 | This demo uses [ToneJS](https://www.npmjs.com/package/tone) to interface with WebAudio, but this workflow supports many npm modules such as:
18 |
19 | - [pixi.js](https://www.npmjs.com/package/pixi.js)
20 | - [lodash](https://www.npmjs.com/package/lodash)
21 | - [xhr](https://www.npmjs.com/package/xhr)
22 | - [object-assign](https://www.npmjs.com/package/object-assign)
23 | - [three](https://www.npmjs.com/package/three) (ThreeJS)
24 | - [dom-css](https://www.npmjs.com/package/dom-css)
25 |
26 | It uses [budo](https://github.com/mattdesl/budo) for development and bundles to a static JavaScript file with [browserify](https://github.com/substack/node-browserify) and [uglify-js](http://npmjs.com/package/uglify-js). It uses plain ES5 JavaScript (no transpilers) and CSS for styles, but I've included some instructions on [ES2015 Transpiling](#es2015-transpiling).
27 |
28 | ## Quick Start
29 |
30 | You can clone this template for a quick start, or follow the [Custom Setup](#custom-setup) to get this working from scratch.
31 |
32 | First, make sure `git`, `npm` (v3 or higher), and `node` (v6 or higher) is installed. It's recommended to download the latest versions of these tools.
33 |
34 | Now clone this repo and `cd` into it, then install the project's dependencies:
35 |
36 | ```sh
37 | git clone https://github.com/mattdesl/browserify-example.git
38 | cd browserify-example
39 |
40 | # now install dependencies
41 | npm install
42 | ```
43 |
44 | > :bulb: Also make sure you've fixed your [npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions) so you don't need to prefix everything with `sudo`
45 |
46 | Now you can run the development server:
47 |
48 | ```sh
49 | npm run start
50 | ```
51 |
52 | It will start a development server on [http://localhost:9966/](http://localhost:9966/). Now, when you save the [./index.js](./index.js) file, the browser page will reload. When you change [./style.css](./style.css), the changes will be injected into the page.
53 |
54 | You can publish a `bundle.js` file with the following command:
55 |
56 | ```sh
57 | npm run build
58 | ```
59 |
60 | Then, your static site is ready for a host like `gh-pages`, [surge.sh](https://surge.sh/) or DropBox.
61 |
62 | ## Custom Setup
63 |
64 | The above will get you started immediately, but you might be left wondering how this project was set up. Here's how you can do it from scratch.
65 |
66 | ### boilerplate
67 |
68 | Create a new folder and move into it:
69 |
70 | ```sh
71 | mkdir my-app
72 | cd my-app
73 | ```
74 |
75 | Stub a new `package.json` file, you can just use default answers if you like:
76 |
77 | ```sh
78 | npm init
79 | ```
80 |
81 | Now create an `index.js` file, something like this:
82 |
83 | ```js
84 | var url = require('url');
85 | console.log(url.parse(window.location.href));
86 | ```
87 |
88 | ### dependencies
89 |
90 | Once you've got a `package.json`, run the following:
91 |
92 | ```sh
93 | # install our client-side dependencies
94 | npm install tone --save
95 |
96 | # install some build/dev tools
97 | npm install budo browserify uglify-js --save-dev
98 | ```
99 |
100 | It might take a couple minutes to install. Once finished, it should update your `package.json` with the new dependencies.
101 |
102 | ### scripts
103 |
104 | Next, add a `"scripts"` field to your `package.json` file:
105 |
106 | ```json
107 | "scripts": {
108 | "start": "budo index.js:bundle.js --live",
109 | "build": "browserify index.js | uglifyjs -cm > bundle.js"
110 | }
111 | ```
112 |
113 | Now you can start the dev server:
114 |
115 | ```sh
116 | npm run start
117 | ```
118 |
119 | Open [http://localhost:9966/](http://localhost:9966/) and you should see our `console.log` in the DevTools.
120 |
121 | > :bulb: You can also run [budo from the command-line](https://github.com/mattdesl/budo/blob/master/docs/command-line-usage.md) for quick development.
122 |
123 | ### release
124 |
125 | To release, you need an [index.html](./index.html) and optional [style.css](./style.css). Make sure the HTML includes a `
132 |