The Immediacy of Web Development - Hot Reloading

When I had moved over to web development after finishing my bootcamp in software development (Python & Java), I was amazed that you could get immediate feedback on what you had just done. No need to wait for your app to compile and run, and in a few cases, you could intentionally break your website if needed. Along with this you're also given a whole host of developer tools right out of the box.

After a short while I found this immediacy a boon for my development, with very little thought you were able to see the result of your work. Though this wasn't enough for me, I didn't want to click outside of my editor to see the changes happen.

After a bit of research I came across a buzzword from many of the podcasts I have listened to: hot reloading. Now this just sounds cool. It conjures the image of your lightning fast key strokes flying straight to your browser, still glowing red hot when it gets there.

That analogy aside, hot reloading is an awesome tool. This works well with single page apps, and it definitely helps when you're learning website design or single page static websites, though you may run into some issues if you're building a bigger, more complex app.

In the past, grunt and gulp were the go to tools for this, but I haven't used them because I was introduced to Parcel.js first, and that's what I've used ever since.

How to make it happen:

First off you'll need to download and install Node.js, as this is a node package.

Secondly you will have to create a folder which is going to house your project. (You can do all of this in your file explorer)

Next you will need to open your preferred terminal (I use Hyper terminal which can be found here: https://hyper.is/) and navigate to the folder that you've just created.

Once in the folder, use the following console command:

npm init -y

What this will do is create a package.json file in your folder.

And once that's run its course, run the following:

npm i parcel-bundler

This will install the parcel.js package to your folder.

From here you will need to open your package.json in your favorite text editor, and modify it slightly so that you can get the hot reloading rolling.

Your package.json should look something like this:

{
  "name": "Test", // the folder name
  "version": "1.0.0",
  "description": "",
  "main": "index.js", // you'll need to change this name, but well leave it as is for now 
  "scripts": {
    "build": "parcel index.html", // the command you'll need to run in your terminal
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

A few notes on the code above:

First off, the name will be the folder name that you have initialized your package.json file in.

Secondly, the main will be the JavaScript file that your npm packages are looking at, not necessarily what parcel will be watching.

And thirdly, your build command will have to have the file name that you are wanting parcel to watch, if it doesn't, none of this will work.

Once this is done, you can create your index.html. The last step is to hop back into your terminal and run the following command:

npm run build

This will run the parcel server on your localhost (most likely localhost:1234), where you will be able to view the page. The page will also update every time you save.

Another option, though I do take exception to this as it is editor specific, is LiveServer for VSCode. It works very similarly to parcel without having to go through the process of installing a package.

Thanks for reading! I hope this little guide helps!

You can follow me over on twitter at @Khasmodan to see my ramblings and stay up to date with my posts.