Build and Publish NPM Packages in a Few Minutes
By: Ardy Dedase
Tags: Nodejs, JavaScript, NPM, Productivity, Programming

Step-by-Step Guide

In this article, I’d like to share a cookiecutter template that I’m using to build and publish npm packages.

Open your IDE and terminal. Let’s get started!

Specs

I’ve tested this on npm 6.13.4 and Node v10.19.0.

The starter code is in TypeScript.

Get started — Cookiecutter

Cookiecutter is a Python command-line tool for creating project templates. It supports configuration that allows you to set values to be used in your project and other handy features like hooks.

Prerequisite: Python is installed and set up. If you haven’t yet, refer to this guide.

To install it, simply run:

pip install cookiecutter

“Cookie-cut” the npm package template:

You will be prompted to enter the following values:

github_username : GitHub username or organisation where you want to create your repository.

: GitHub username or organisation where you want to create your repository. project_name : What you want to call your project. The default value for project_slug will be based on this.

: What you want to call your project. The default value for will be based on this. project_slug : The default value of this will be the dash-cased project_name . This will be used as the package name, so make sure that the package name you choose is not yet taken. You can check this on npmjs.com.

: The default value of this will be the dash-cased . This will be used as the package name, so make sure that the package name you choose is not yet taken. You can check this on npmjs.com. project_short_description : Short description that will be used by default in the generated Readme of your project.

: Short description that will be used by default in the generated Readme of your project. version : Version number of your npm package.

These will have default values that you can find in the cookiecutter.json file, which makes it handy for testing and CI build. It will prompt like this in the command line, where the default value of github_username will be ardydedase , which you will need to replace with your own:

github_username [ardydedase]:

After cookie-cutting, it will generate a folder named with the project_slug value. Change the current working directory to the generated folder.

There is a sample reference package generated from our cookiecutter that you can refer to on GitHub. I used this step-by-step guide to structure this package with some tweaks according to my own preference.

cd <replace with your project_slug>

Now that we have a starter code for our npm package, let’s get started with the development.

Development — npm package

This will cover the commands that we need to run to get our project up and running. If you have done some Node.js development before, this section should be a breeze.

Install npm dependencies:

npm install

Run our build. This will generate the compiled code with the type definitions in the dist folder:

npm run build

Formatting and linting:

npm run lint

npm run format

Run tests:

npm test

At this stage, you can start to build your domain functionalities on top of the starter example in the src folder, which is a simple function that returns a list of GitHub repos. Or you can proceed and publish an initial version of your package to npmjs.com.

Publish your npm package

If you don’t have an npm account, create one or run the command npm adduser .

If you already have an account, log in by running the following command and enter your login details:

npm login

After you’ve successfully logged in, publish the package:

npm publish