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.

my-web-react

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 bx dev command.
  • 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.

Hot-reload Implementations

run-dev is a simple shell script that wraps around the npm run dev script:
#!/bin/bash
npm run dev

In package.json, under “scripts”, we can see that “dev” uses node-foreman to start the processes listed in Procfile-dev

hot-reload-scripts

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

or
bx dev shell npm run server-reload

 

To learn more about IBM’s initiatives around Node.js, visit the Node DevCenter or subscribe to this blog.

Join The Discussion

Your email address will not be published. Required fields are marked *