What are NPM scripts?
Tags: node, npm, javascript
Published: 2021-06-16 14:13:24

---
title: What are NPM scripts?
published: true
date: 2021-03-16 00:00:00 UTC
tags: node, npm, javascript
canonical_url: https://www.mariokandut.com/what-are-npm-scripts/
---

NPM scripts are a way to bundle shell commands. Typically, they are a string of commands, which would be entered the terminal, or they are part of a pipeline in a CI/CD.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#what-exactly-are-npm-scripts)What exactly are NPM scripts?

**NPM scripts are terminal commands that run in a terminal**. That's all there is to it. 🎉

Scripts are stored in the project's `package.json` file and everyone who has access to the project, also has access to these scripts. They help automate repetitive tasks, like generating types for an API, and can be shared within the project, and you have to learn fewer tools.

Common use cases for npm scripts are:

- building your Node project (think of multiple environments like develop and production)
- starting a development server
- compiling SCSS to CSS
- linting
- minifying
- testing
- basically anything you repetitive type in the shell during the project.

Scripts are executed using the `npm run NAME-OF-YOUR-SCRIPT` command. There are also some predefined aliases that convert to npm run, like `npm test` or `npm start`, you can use them interchangeably.

There are also pre- and post-hooks, which are scripts that run before a script lifecycle event. For example, running `npm start` would first trigger `prestart`, then `start` and finally `poststart`. You can also use only one of these lifecycle hooks, like `postinstall`, which would run automatically after every `npm install` or `npm install <package>` command.

To create `pre` or `post` scripts for any scripts defined in the **scripts** section of the `package.json`, simply create another script with a matching name and add `pre` or `post` to the beginning of them. For example:

```
{
  "scripts": {
    "precompress": "{{ executes BEFORE the `compress` script }}",
    "compress": "{{ run command to compress files }}",
    "postcompress": "{{ executes AFTER `compress` script }}"
  }
}
```

In the above example running the command `npm run compress` would execute these scripts as described. Read more about Pre & Post Scripts in the [NPM docs](https://docs.npmjs.com/cli/v7/using-npm/scripts#pre--post-scripts).

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#simple-npm-script)Simple NPM script

It's very common to have commands that you run regularly as an npm script, like linting, building production apps, starting your application, etc.

A simple example for a npm script would be:

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

Running `npm start` with the above script would start a node server. Commands like this come very handy, when you have to set additional parameters and/or flags, when starting an application. Let's say you want to set the port `node index.js --port=8000`, just replace the command and running `npm start` would do that.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#compose-npm-script)Compose NPM script

You can also compose npm scripts, so scripts can call other scripts.

```
"scripts": {
	"start": "node index.js",
	"dev": "NODE_ENV=development npm run lint && npm start",
	"lint": "eslint ./*.js",
	},
```

- Running `npm start` would start a node server.
- Running `npm run lint` would lint all the `*.js` files.
- Running `npm run dev` would first set the node environment variable to development, then run `npm run lint` and then start the application with `npm start`.

Scripts have the ability to access commands provided by installed packages by name, no complete path required. The **npm run command** will first try, and resolve to a locally-installed package (node\_modules), if this fails, it falls back to a globally-installed package.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)TL;DR

- NPM scripts let you bundle aliases for commonly executed commands.
- Script definitions are stored in the scripts key in the package.json file.
- NPM scripts are executed via `npm run <YOUR-SCRIPT-NAME>`.

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**.

If you want to know more about **[Node](https://www.mariokandut.com/tags/node)**, have a look at these [Node Tutorials](https://www.mariokandut.com/tags/node).

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#references-and-big-thanks)References (and Big thanks):

[NPM docs](https://docs.npmjs.com/cli/v7/using-npm/scripts#pre--post-scripts),[HeyNode](https://heynode.com/tutorial/create-packagejson-file)