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,

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,

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.

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,

npm config set <Key> <Value> -g

So, to set the init-author-email with an email id,

npm config set init-author-email "tapas.adhikary@gail.com" -g

Similarly, let us override the name, URL, and license as well.

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.

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.

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).

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.

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,

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.

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.

{
  "name": "customize-npm-init",
  "version": "1.0.0",
  "description": "",
  "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,

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.

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.

I hope you enjoyed this article or found it helpful. Let's connect. You can find me on Twitter(@tapasadhikary) sharing thoughts, tips, and code practices. Please hit the Subscribe button at the top of the page to get an email notification on my latest posts.

Tips to customize npm init to make it your own

Comments (7)

Learn with Tips and Tricks

10 online code editors for web developers

More from this blog

Goodbye, Slow-Motion Tortoise: A Deep Dive into SSR Streaming

Mastering React Design Patterns for Building Maintainable Forms

JavaScript Variables Explained Clearly: Values, Types, and How Data Really Works

JavaScript Explained From Scratch: How the Web Becomes Interactive

Tidbit 01: How Does Event Loop Handle Promises? Ever Thought?

Introduction To `npm init`

Why Customize?

Customize `npm init`

Hang On, There Is More To It: `init-module`

Command Palette

Comments (7)

Learn with Tips and Tricks

10 online code editors for web developers

More from this blog

Introduction To npm init

Why Customize?

Customize npm init

Hang On, There Is More To It: init-module

Introduction To `npm init`

Customize `npm init`

Hang On, There Is More To It: `init-module`