@@ -42,13 +42,13 @@ What belongs in your JavaScript Starter Kit?
4242
4343### JavaScript Editors
4444
45- - Atom
45+ - #### Atom
4646
47- - WebStorm ** (author's favorite)**
47+ - #### WebStorm ** (author's favorite)**
4848
49- - Brackets
49+ - #### Brackets
5050
51- - VSCode ** (author's choice)**
51+ - #### VSCode ** (author's choice)**
5252
5353
5454### EditorConfig
@@ -66,20 +66,27 @@ Selected npm, pretty much the defacto standard now
6666
6767### Security Scanning for Packages
6868
69- - retire.js
70- - Node Security Platform ** (author's choice)**
71- - nsp check
69+ - #### retire.js
70+ 71+ - #### Node Security Platform ** (author's choice)**
72+ 73+ - ` nsp check `
7274
7375
7476## Module #4 : Development Webserver
7577
76- - http-server
78+ - #### http-server
79+ 7780 - Ultra-simple
7881 - Single command serves up server
79- - live-server
82+ 83+ - #### live-server
84+ 8085 - Lightweight
8186 - Support live-reloading
82- - Express ** (author's choice)**
87+ 88+ - #### Express ** (author's choice)**
89+ 8390 - Comprehensive
8491 - Highly configurable
8592 - Not just for static files
@@ -89,14 +96,20 @@ Selected npm, pretty much the defacto standard now
8996 - Alternatives:
9097 - koa
9198 - hapi
92- - budo
99+ 100+ - #### budo
101+ 93102 - Integrates with Browserify
94103 - Includes hot reloading
95- - Webpack dev server
104+ 105+ - #### Webpack dev server
106+ 96107 - Built in to Webpack
97108 - Serves from memory
98109 - Includes hot reloading
99- - Browsersync
110+ 111+ - #### Browsersync
112+ 100113 - Dedicated IP for sharing work on LAN
101114 - All interactions remain in sync
102115 - Across devices, etc.
@@ -115,38 +128,141 @@ Used `node .\buildScripts\srcServer.js` command to leverage our script to run Ex
115128
116129Alternatives to using traditional Cloud services such as AWS and Azure.
117130
118- - localtunnel ** (author's choice)**
131+ - #### localtunnel ** (author's choice)**
132+ 119133 - Easily share work on your local machine
120- - npm install localtunnel -g
134+ - ` npm install localtunnel -g `
121135 - start your app
122- - lt --port 3000 --subdomain kevin
136+ - ` lt --port 3000 --subdomain kevin `
123137 - Creates: http://kevin.localtunnel.me
124- - ngrok
138+ 139+ - #### ngrok
140+ 125141 - Secure tunnel to your local machine
126142 - Pretty easy to share work
127143 - Install ngrok
128144 - Install authtoken
129145 - Start your app
130- - ./ngrok http 80
146+ - ` ./ngrok http 80 `
131147 - Secure
132- - Surge
148+ 149+ - #### Surge
150+ 133151 - Quickly host static files to public URL
134152 - Setup
135- - npm install -g surge
136- - surge
153+ - ` npm install -g surge `
154+ - ` surge `
137155 - Different approach
138156 - Hosting persists
139- - now
157+ 158+ - #### now
159+ 140160 - Quickly deploy Node.js to the cloud
141161 - To use
142- - npm install -g now
162+ - ` npm install -g now `
143163 - Create start script
144164 - now
145165 - Hosting persists
146166
147167## Module #5 : Automation
148168
169+ - #### Grunt
170+ 171+ - the "original"
172+ - configuration over code
173+ - writes intermediary files between steps
174+ - large plugin ecosystem
175+ 176+ - #### Gulp
177+ 178+ - in-memory streams; pipes
179+ - no files
180+ - fast
181+ - code over configuration; code-based
182+ - large plugin ecosystem
183+ 184+ - #### npm Scripts ** (author's choice)**
185+ 186+ - declared in package.json
187+ - leverage your OS' command line
188+ - directly use npm packages
189+ - call separate Node scripts
190+ - convention-based pre/post hooks
191+ - leverage world's largest package manager
192+ 193+ ### Why npm Scripts (over Gulp)?
194+ 195+ - Use tools directly
196+ - No need for separate plugins
197+ - Simpler debugging
198+ - Better documentation
199+ - Easy to learn
200+ - Simple
201+ 202+ Author wrote interesting article on why he migrated from Gulp to npm Scripts:
203+ 204+ [ bit.ly/npmvsgulp] ( bit.ly/npmvsgulp )
205+ 206+ ### npm Scripts
207+ 208+ #### package.json Changes
209+ 210+ All of these changes are to be made in the "scripts" block near the top of the file.
211+ 212+ - Add start:
213+ 214+ ``` javascript
215+ " start" : " node buildScripts/srcServer.js"
216+ ```
217+ 218+ - ` npm start ` to start up the local webserver
219+ 220+ - Add prestart:
221+ 222+ ``` javascript
223+ " prestart" : " node buildScripts/startMessage.js"
224+ ```
225+ 226+ - This script uses a library called Chalk to add a colored message to the console when we run npm start
227+ 228+ - Add security-check (nsp):
229+ 230+ ``` javascript
231+ " security-check" : " nsp check"
232+ ```
233+ 234+ - ` npm run security-check `
235+ - Note: npm start, npm test are the * only* commands where you can avoid typing ** run**
236+ 237+ - Add share (localtunnel):
238+ 239+ ``` javascript
240+ " share" : " lt --port 3000 --subdomain kevin"
241+ ```
242+ 243+ - ` npm run share `
244+ - This will launch ` http://kevin.localtunnel.me `
245+ 246+ - Add "open: src " and Update "start" (npm-run-all):
247+ 248+ ``` javascript
249+ " start" : " npm-run-all --parallel security-check open:src"
250+ " open:src" : " node buildScripts/srcServer.js"
251+ ```
252+ - Note: ` npm-run-all ` allows us to run 1-n of the scripts in parallel
253+ 254+ - Add "localtunnel" and Update "share" (npm-run-all)
255+ 256+ ``` javascript
257+ " localtunnel" : " lt --port 3000 --subdomain kevin"
258+ " share" : " npm-run-all --parallel open:src localtunnel"
259+ ```
260+ - ` npm run share ` now starts up our server and exposes it via localtunnel all at once!
261+ 262+ #### Conventions:
149263
264+ - In an npm script, like package.json (above), we can append the prefixes "pre" and "post" to a given script in order to run another script before (pre) or after (post)
265+ - Examples: "prestart" - will get run * before* "start", "poststart" - will get run * after* "start"
150266
151267## Bibliography
152268
0 commit comments