Node.js has grown rapidly in popularity partly because of how fast it is to go from zero to production. Unlike some other popular languages and frameworks, Node.js applications only take a couple of seconds to start. That means, developers can apply new code within just a few seconds. But for many developers, they still want FASTER. Now IBM Cloud App Service Node.js Starter Kits come with hot-reload, so developers can see changes almost immediately.
Hot-reload is very popular in frontend development. Most of the modern web frameworks, such as Angular and React, are designed to be modular during development and to be bundled and compressed for file size in production. The modularity allows developers to write clean code and utilize tools like Webpack’s Hot Module Replacement to do all of the code updates automatically. Hot Module Replacement works by replacing only the module that has been changed and prompting the browser to re-render replaced code through a static development server. It eliminates the steps involved in rebuilding the components and reloading the browser, thus empowering the developer to focus on their code and its output.
For backend, our Starter Kits now include nodemon to offer the capability to restart an Express server automatically upon any server-side code modifications. Nodemon watches for file changes then triggers a server restart to apply those new changes.
To see it in action, first install the IBM Cloud Developer Tools CLI. Start by running
bx dev create to create a new Node.js app like the Express.js React Starter Kit.
Note these projects are designed to be run in two modes:
- Container – container is running the app with the Node.js runtime in a Docker container using the
- Native – native is simply running the app with the Node.js runtime directly via npm.
Since “Express.js React” has both frontend and backend components, we can run both types of hot-reload at the same time.
In a container:
bx dev build
bx dev shell run-dev
Native With npm script (local installation of Node.js required):
npm run dev
Either mode will start a nodemon instance for backend and a webpack-dev-server for the frontend to run concurrently.
Let’s take a dive and see how it is done.
run-dev is a simple shell script that wraps around the
npm run dev script:
npm run dev
In package.json, under “scripts”, we can see that “dev” uses node-foreman to start the processes listed in Procfile-dev
Looking into Procfile-dev we can see that a webpack-dev-server that handles frontend hot-reload gets started and proxied to our backend API server.
web: webpack-dev-server --history-api-fallback --inline --config webpack.dev-proxy.js
api: npm run server-reload
Notice the last two scripts in the image allow you to do development on either client-side (frontend) or server-side (backend). These two options are not included in Starter Kit offerings that do not have a web frontend and the “dev” script will only handle server-side reload for those starters.
To achieve the same with containers, run:
bx dev shell npm run client-reload
bx dev shell npm run server-reload