Cold reloading typescript project
Up until now if we want to see a change we made in the code reflected in the UI this would involve us manually building and running the application.
Cold reloading will automatically rebuild the application every time a code change is detected preventing the need to rebuild the application manually.
Cold reloading is different to hot reloading in that to see the effect of the change with cold reloading we still need to manually refresh the page in the browser once it has rebuilt.
Hot reloading would refresh the browser automatically but the setup is a little more involved and cold reloading should speed feedback up enough for now.
Example setup
Before starting clone or download the simple typescript canvas game project setup code as we will use that as a starting point. Change to the simple-typescript-canvas-game-project-setup directory.
To enable cold reloading we will use a few new dependencies listed below.
- npm-run-all: This will allow us to run certain
npmscripts in sequence or parallel. - onchange: This will allow us to detect and run an action on code changes.
Add the following dependencies to our project by running the below command.
npm install --save-dev onchange npm-run-all
This will add onchange and npm-run-all as dev dependencies (dependencies that are not required for the production build) in our package.json.
Add the following new scripts watch and dev to package.json, the build and serve scripts are shown as a reference.
"build": "rm -rf build && tsc && cp src/index.html build",
"serve": "http-server build",
"watch": "onchange \"src/**/*.js\" \"src/**/*.ts\" \"src/**/*.tsx\" \"src/**/*.css\" \"src/**/*.html\" \"src/**/*.{png,jpg,gif}\" -- npm run build",
"dev": "run-p watch serve"
The serve script remains unchanged, it's what we use to create a local http file server pointed at the build directory.
The watch script uses the onchange library to monitor for file changes that relate to any of the patterns described. In our case we are looking for .js, .ts, .tsx, .css, .html and various image files. If any of these files are added or modified this script will run npm run build which will rebuild our application in the build directory.
The dev script will run the watch and serve commands in parallel.
The serve command will mean we are constantly looking at the build directory as the source of truth for what to load in the browser and so if we make a change to the application, wait a few seconds and refresh the page we should see the updated change!
Note: Sometimes a hard refresh is required by running cmd + shift + r as our browser may cache the page and then we won't see the updates.
Now to start our application we can just use one command.
Execute the command npm run dev in the terminal.
Make a change to the console.log message in index.ts and save the file.
Wait a few seconds, then refresh the browser and you should see your updated message outputted to the browser console!
Summary
Congrats on adding cold reloading to the project. This will help speed up your local development feedback cycle and let you focus more on the fun stuff.
