Creating a JavaScript Development Environment: Development Web Server

coryWelcome to Part 4 of this review of the Pluralsight course “Creating a JavaScript Development Environment” by Cory House.

Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.

He believes in clean code, pragmatic development, and responsive native UIs.

He has also created reactjsconsulting.com, and has the authored Pluralsight courses including Building Applications with React and Flux and Building Applications with React and Redux in ES6.

Also in this series:
Part 1 – You Need a Starter Kit
Part 2 – Editors and Configuration
Part 3 – Package Management
Part 4 – Development Web Server
Part 5 – Automation
Part 6 – Transpiling
Part 7 – Bundling
Part 8 – Linting
Part 9 – Testing and Continuous Integration
Part 10 – HTTP Calls
Part 11 – Project Structure
Part 12 – Production Build
Part 13 – Production Deploy

Development Web Server

Development Web Servers

Cory describes 8 popular options:

http-server (ultra simple with a rocketpowered turtle)
live-server (lightweight and supports live-reloading)
Express (comprehensive, highly configurable, production grade)
koa (Express alternative, strongly embraces ES6 generators)
hapi (Express alternative, compelling configuration model)
budo (Integrates with Browserify, includes hot reloading)
webpack dev server (Built in to Webpack, serves from memory and includes hot reloading)
Browsersync (Dedicated IP for sharing work on LAN, all interactions remain in sync, great for cross-device testing)
See https://github.com/Browsersync/recipes

Demo: Set up Express

Cory creates srcServer.js which handles requests to get the index.html, and listens to requests on port 3000.

We can run this with the command

> node buildScripts/srcServer.js

For more on using Express see Jonathan Mills course.

Sharing Work-in-progress

To easily share your work in progress, without signing up to a cloud provider such AWS or Azure, here are some options:

localtunnel (lowest friction and versatile)
ngrok (secure tunnel to your local machine, a little more setup)
Surge (Quickly host static files to publc URL, no firewall hole)
now (Quickly deploy Node.js to the cloud, no firewall hole)

Demo: Sharing Work-in-progress

Cory uses the simplest use to solution which is localtunnel. To install globally:

> npm install localtunnel -g

We also see how to setup a subdomain, and Cory gives a tip on using localtunnel with Browsersync. He says it’s a compelling combination.

Continue to Part 5: Automation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s