In project development, multiple tasks need to be handled in parallel, such as a command to start a local development server and a command to package static resources such as JS and CSS. This requirement is particularly evident in Micro Frontends, which starts multiple separate microapplications at the same time. This article describes a tool that addresses this requirement.

The project structure

A project with separate front and back ends, including the server side and the front end.

The server side provides the interface service, and the front end is compiled by another project into a static resource (packaged by webPack’s listener), both hosted by Express:

The directory structure is:

The outer layer is an Express project with a separate front end project in a subdirectory

We have two tasks to do:

  1. Express requires a command to run the Express service
  2. The front end needs a command to run WebPack’s listening auto-packaging feature.

We could open two separate terminals and run these two commands separately, but that’s not convenient enough.

How do you run multiple commands on a terminal at the same time?

Use concurrently!

Concurrently is an NPM package that allows developers to run multiple commands simultaneously on a terminal.

Use steps:

    1. Install NPM I CONCURRENTLY -D
    1. Configure the package.json file and configure the script to execute the inner project in the outer package.json (set –prefix + project directory)

Inner package.json file contents:

{
  "scripts": {"dev":"webpack --watch"}}Copy the code

Outer package.json file contents:

{
  "scripts": {"client":"npm run dev --prefix front-end-proj-dir"."server":"node./index.js"."start":"concurrently\"npm run client\" \"npm run server\""}}Copy the code

Different commands are wrapped in double quotes, and the double quotes must be moved in the character. Otherwise, the concurrently parse command follows the default command1 args command2 args

Finally run in the outer project:

npm run start