Tips to customize npm init to make it your own
Tags: javascript, node, npm, productivity
Published: 2021-05-25 04:33:26

# Introduction To `npm init`

Do you agree, it is almost impossible to think about web app development without the support of `npm`(node package manager) or `yarn`? Alright, I'm probably exaggerating here, but the truth is somewhat close to it. Every day, millions of web applications use npm or yarn to create and manage project dependencies. 

As web developers, we make use of npm or yarn to get started with a project. The `npm init` or `yarn init` command helps set up a new or existing package/project. The `npm init` command asks you a bunch of questions. The answers provided by you, along with the default values, creates a particular file called `package.json`.  It contains all the project metadata and dependency information.

If you want to skip answering the questions and want to go with the default values, you can use the `-y` or `-yes` switch as shown in *Figure 1*,

> ![npm_init.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621866601545/dEULFXwhO.png)
Figure 1: npm init -y

# Why Customize?

However, there is a problem. You may not like the default values. It may not be relevant to you. For example, you may want to provide your name, email-id, URL as `author` key's value. You may want to provide `MIT` as the `license` value. Also, you may not feel so great about typing all these values every time you start a project. 

Here comes the opportunity to customize the `npm init` command. You can override some of these values depending on what is relevant to you and your project. Let's customize it.

# Customize `npm init`
First, you can list npm configuration values using the following command,

```shell
npm config ls -l
```
It will print a long list of npm configuration values. These are key-value pairs. Please have a close look and fix your eyes to the keys that start with `init-`. The *Figure 2* below shows the default values for `init-author-email`, `init-author-name`, `init-author-url`, and `init-license`.

> ![npm_config.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621866645366/oqHOitVxm.png)
Figure 2: Default values of email, name, URL, and license

Let us override these values. You can use the following command to override a key with a particular value globally,

```shell
npm config set <Key> <Value> -g
```
So, to set the `init-author-email` with an email id,

```shell
npm config set init-author-email "tapas.adhikary@gail.com" -g
```
Similarly, let us override the name, URL, and license as well.

```shell
npm config set init-author-name "Tapas Adhikary" -g
npm config set init-author-url "https://tapasadhikary.com" -g
npm config set init-license "MIT" -g
```
Please provide your name, email-id, URL, and license information when you try it out. Now run the `npm config ls -l` once more. You should be able to see these changes reflecting in the npm configuration value list. Please check the `globalconfig` values at the top of the list. It should be similar to *Figure 3* below.

> ![global.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621866677891/gNkLuN4sf.png)
Figure 3: globalconfig values

Also, if you scroll down and see the `init-` values we have changed, you should see them marked as overridden. Similarly, you can also customize values of the `init-module` and `init-version`.

> ![overriden.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621866687082/Lv5Lb1NWK.png)
Figure 4: Overriden values

There is another way to verify if you have set the values correctly. Please use the `npm config get <Key>` command. For example, in our case, `npm config get init-author-url` should return the value `https://tapasadhikary.com/`. 

Alright, let us run `npm init -y` now to create the package.json file. Please notice *Figure 5* below. It is about creating the `package.json` file with the customized values(author and license).

> ![npm_init_changed.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621866709998/4e5zh6HVQ.png)
Figure 5: npm init -y after the customization

Let us see how `npm init`(without the `-y` switch) command creates the `package.json` file with the customized values.

> ![flow.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1621866782514/9ijF_pOm6.gif)
Figure 6: Let's see the flow

Every time you create a project using `npm init` or `yarn init`, you do not have to type any of these values. Isn't it incredible? I hope you start customizing the `npm init` right away.

# Hang On, There Is More To It: `init-module`
Did you know you can add your questions as part of the `npm init` question prompts? Yes, you can prompt for any questions of your choice, accept an answer for it, and even take action.

To do that, find the value of `init-module` using the following command,

```shell
npm config get init-module
```
It will point to a file called `.npm-init.js`. On Windows operating system, the expected file path is, `C:\Users\<User_Name>\.npm-init.js`. Please check if the file exists in that location. If not, please create one empty file with the name `.npm-init.js` in that location.

Copy the following code in the `.npm-init.js` file and save it. Here we are prompting all the default values, including customized `author` and `license`. Please note, we have added a new prompt for `deploy` with a default value `Netlify`. The deploy key is not provided by the `npm config` by default. We have added it by choice.

```js
module.exports = {
  name: prompt('package name', basename || package.name),
  version: prompt('version', '1.0.0'),
  decription: prompt('description', ''),
  main: prompt('entry point', 'index.js'),
  keywords: prompt(function (s) { return s.split(/\s+/) }),
  author: prompt('author', 'Tapas Adhikary <tapas.adhikary@gmail.com> (https://tapasadhikary.com)'),
  license: prompt('license', 'MIT'),
  repository: prompt('github repository url', ''),
  deploy: prompt('Where to deploy?', 'Netlify'),
}
```
> Please note, if you use the `.npm-init.js` file as we have seen here, you no need to override the `init-` values globally. Providing default values in the `.npm-init.js` file is sufficient.

Alright, now do `npm init`. You will see a prompt for the `deploy` as well.

```shell
{
  "name": "customize-npm-init",
  "version": "1.0.0",
  "decription": "",
  "main": "index.js",
  "keywords": [],
  "author": "Tapas Adhikary <tapas.adhikary@gmail.com> (https://tapasadhikary.com)",
  "license": "MIT",
  "deploy": "Netlify"
}
```
That's not all. You can also perform additional operations based on the input provided for the prompts. Isn't that so cool? Here is an example of logging the `deploy` value,

```js
deploy: prompt('Where to deploy?', 'Netlify', function (input) {
	  if (input) {
		console.log(`You have selected ${input}`)
	  }
	  return input;
})
```
Well, it may not be a super helpful example. But how about creating a GitHub repository and set things up based on the GitHub repository URL provided. Yes, you can do that too.

```js
repository: prompt('github repository url', '', function (url) {
  if (url) {
     // Execute commands to initialize a GitHub
    // repository with initial Readme.md file and
   // push it.
  }
  return url;
})
```
Now, that is very useful. Customizing `npm init` based on your needs will improve productivity and bring uniformity in project creation. I hope you have found the tips helpful.

<hr />
I hope you enjoyed this article or found it helpful. Let's connect. You can find me on [Twitter(@tapasadhikary)](https://twitter.com/tapasadhikary) sharing thoughts, tips, and code practices.

You may also like,
- [Build, Test and Publish your NPM, I just did it in few minutes!](https://blog.greenroots.info/build-test-and-publish-your-npm-i-just-did-it-in-few-minutes-ck3dwi1j100vzo4s15qy8ail9)
- [The npm Dependency Handbook for You](https://blog.greenroots.info/npm-dependency-handbook-for-you-ckcg56tei003ejhs16wap1t8r)
- [Toolkit for Publishing your React Component to the Node Package Manager(NPM)](https://blog.greenroots.info/toolkit-for-publishing-your-react-component-to-the-node-package-managernpm-ckck8x54w00eo4as1eaoqa4ut)