Build and Publish NPM Packages in a Few Minutes

Focus on the functionality of your npm package without having to sweat the setup or configuration

Source: Pexels

The Need to Get Started Quickly

When you have a sudden burst of inspiration to build a project or you need to build one for work, there is usually some sort of friction to get things started. You could spend an extra few minutes to an hour setting up the development environment, looking up some tutorials, and then tweaking it according to your needs. Next thing you know, you encounter an issue and lose inspiration until you realise that you no longer want to proceed.

And on top of that, even after developing the functionality, getting your project ready to be in its users’ hands takes some repetitive work too.

This is not ideal at all. You don’t want to get stuck doing the repetitive work on boilerplate code. You’d like to focus on solving the actual problem by working on the functionality.

If there are ways for you to get started and deploy your project quickly, then you could test more of your ideas. Who knows? One of your ideas could become an impactful open-source project or life-changing product.

This would be the ideal scenario:

Complete the end-to-end process early on. Work on the functionality, deploy, and repeat.

Having a ready-to-use cookiecutter template that solves the “Get started” and “Deploy or publish” stages sets you up for success.

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:

cookiecutter git@github.com:ardydedase/cookiecutter-npm-package.git

You will be prompted to enter the following values:

• github_username: 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.
• 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.
• project_short_description: 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 thedistfolder:

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 thesrcfolder, 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 oneor run the commandnpm 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

You should now be able tonpm installyour published package. There is an npm package calledreference-packagethat is generated from this cookiecutter. There is a sample usage onexample/index.js.

What’s Next

You can learn more about this cookiecutter templateon GitHub.