@@ -6,3 +6,70 @@ All the code examples for the youtube series
6
6
## Ideas?
7
7
If you have any screencast you'd like to see or suggestions, please
8
8
[ open an issue here] ( https://github.com/shama/letswritecode/issues ) . Thanks!
9
+
10
+ ## Dev Setup
11
+ Throughout these videos I typically use the same development environment. This
12
+ is a guide through that development setup.
13
+
14
+ ### Dependencies
15
+ Rather than copying / pasting script tags into my HTML for 3rd party code, I use
16
+ [ npm] ( https://www.npmjs.com/ ) . The ` npm ` command comes with Node.js. When I run
17
+ ` npm install jquery ` , it downloads the 3rd party files into the ` node_modules/jquery/ `
18
+ folder.
19
+
20
+ The ` package.json ` file can hold those dependencies and versions, so the next
21
+ time you want to install those files, run ` npm install ` in the same folder.
22
+
23
+ ### Build Tool
24
+ [ Browserify] ( http://browserify.org/ ) is a tool that reads your JavaScript source
25
+ files and files you've installed with ` npm ` . Then outputs those files loaded in
26
+ the correct order to a single bundled file.
27
+
28
+ You can install the ` browserify ` command on your machine with: ` npm install browserify -g ` .
29
+
30
+ To create a bundled file, run ` browserify index.js -o bundle.js ` , where ` index.js `
31
+ is the entry point to all your scripts.
32
+
33
+ In your ` index.js ` file, you can include other files with ` require('./other.js') `
34
+ or a 3rd party file installed with ` npm ` by doing ` require('jquery') ` .
35
+
36
+ Once you have generated this ` bundle.js ` file, you can add a single script tag in
37
+ your HTML: ` <script src="bundle.js"></script> ` and host those assets like any
38
+ other HTML, JavaScript and CSS files.
39
+
40
+ ### Dev Server
41
+ While rapidly developing, running the ` browserify ` command every time you make
42
+ a change in the code can get tedious. Also having to FTP, git push or some other
43
+ method to deploy the code to a server can slow your development down.
44
+
45
+ I use a tool called [ budo] ( https://www.npmjs.com/package/budo ) which runs a server
46
+ locally on your machine (` http://localhost:9966 ` ) and automatically bundles your
47
+ code with Browserify as you refresh the page or live as you make changes if you
48
+ have the ` --live ` option on.
49
+
50
+ Install the ` budo ` command with: ` npm install budo ` and run the server with:
51
+ ` budo index.js ` . Now you can rapidly develop the code by viewing ` localhost:9966 ` .
52
+
53
+ For convenience, I add the ` budo ` command to the ` scripts ` section of my
54
+ ` package.json ` :
55
+
56
+ ``` json
57
+ {
58
+ "scripts" : {
59
+ "start" : " budo index.js"
60
+ }
61
+ }
62
+ ```
63
+
64
+ Now I only need to run ` npm start ` to start developing code.
65
+
66
+ ### Deployment
67
+ After you're done developing the code, run ` browserify index.js -o bundle.js ` to
68
+ create your JavaScript bundle. Add the script tag to your HTML:
69
+ ` <script src="bundle.js"></script> ` to load that JavaScript file.
70
+
71
+ Then upload those files to your remote server. Either via FTP/SFTP,
72
+ [ ` git ` deploying] ( https://www.youtube.com/watch?v=9qIK8ZC9BnU ) ,
73
+ [ heroku] ( https://devcenter.heroku.com/categories/deployment ) ,
74
+ [ firebase] ( https://firebase.google.com/docs/hosting/deploying ) or whatever method
75
+ you normally use to deploy your website.
0 commit comments