I recently realized that I should bundle and minify my JS code when shipping to production. The main reasons were performance and me wanting to use monorepo for a bunch of apps I maintained for a product. Looking at some of the new tools, decided to go with Parcel since the zero config seemed promising.

Why is this important

• Looking at your imports and exports, build tools will remove any unused code and yield the most efficient bundle.
• Your entire output will be a single file.
• Your code will be minified and take as less space as possible.

How to integrate parcel with Express.js (or any Node.js) App

I saw that it was mostly used with frontend technologies (like React, Vue, etc..) so had to figure out how to use it with my simple express.js app. Here is what I did to build and serve this app.

1. Include parcel as dev dependency to the project.

2. Add serve, build and watch commands to your package.json.

"scripts": {
      "serve": "NODE_ENV=dev nodemon dist/index.js",
      "build": "parcel build src/index.js",
      "watch": "parcel watch",
      ...
  },

• build command builds the project and outputs the minified js bundle to the dist/ folder.
• watch command watches the proejct for changes and rebuilds the app when you make a change.
• serve command starts express.js server, and restarts it when changes made to the output bundle.

Development Flow

Since the builtin Parcel serve command can't really be used with an express app, we need to launch two processes during development.

1. First will watch the project and perform rebuild when necessary.
2. Serve the built express app and reserve when build is changed.

Here is what you need to do:

1. Open a terminal and run npm run watch and leave it running during development.
2. Open another terminal and run npm run serve.

Voila! Here runs your node app.