NPM scripts and concurrently — utilizing Node.js tools

I am admittedly very late to understanding the function of NPM scripts and how they can be super helpful, but at least I’m here now.

I started learning how to use Node.js this week. Not sure why it took me so long because a) it’s used pretty much everywhere and b) I love working with Javascript. I’ve only been building simple APIs with it, but so far it’s an amazing programming tool. For those who don’t know, Node.js is a runtime environment that allows you to run Javascript outside of the browser, so you can create full-stack applications by using only Javascript.

One major thing that Node cleared up for me is the NPM script (as stated earlier). It’s very useful if you need certain commands to run but it takes out the hassle of having to type out all the commands every time you need them to run, and they can also be written to shorten/simplify a command you want to run. NPM scripts can be written directly in the package.json file. One of the most common scripts is npm start, and it’s written in the package.json file as

{ "scripts": { "start": "node index.js" } }

where index.js is the main file in your directory from which your program will be run. This is a special type of script that can just be run as npm start but other custom scripts require npm run preceding the rest of the script.

As an example of a custom script, maybe you need to run two servers (backend and frontend) at the same time but they’re coded in the same directory. Instead of opening two terminals and running them separately, you can write a script that will accomplish that by only running one line of code. You will need the NPM package called concurrently which was built to allow coders to run multiple scripts with one command. See the code below for the scripts that will run the client (frontend, which uses React, hence npm start) and the server (backend, which uses the Node runtime environment and has the nodemon index.js command — the nodemon NPM package allows you to run a Node.js server and it watches for any changes so you don’t have to keep restarting the server whenever you make a change).

{ 
   "scripts": { 
     "client": "npm start --prefix client",
     "server": "nodemon index.js" 
   }
}

So with this script, when you run npm run client(also ensure you include the root folder name for the frontend directory after —-prefix so the code will be run in the correct directory. My frontend root directory folder was called client), this will start the frontend server. When you run npm run server, this will start the backend server. But once you add another script and use concurrently:

{ 
   "scripts": {
     "client": "npm start --prefix client",
     "server": "nodemon index.js",
     "dev": "concurrently \"npm run client\" \"npm run server\" "
   }
}

you can just run npm run dev which will start both client and server. You can name the scripts anything you want, but it’s best if the name makes sense for what you’re trying to do.

This knowledge made my life a lot easier. Huge thanks to Traversy Media for clearing that up for me. Super useful tool!