Creating your First Command Line NPM package

I saw a recent blog by Afzal Ahmad on publishing an npm package and using it within your application. What if you wanted a command-line package. Something I can run on a terminal. Something like create-react-app , firebase-tools, etc.

Follow along as we look on how to create a basic global package

Steps We'll Follow

create a package file
create a git repository
initialize and configure the package
publish the package to npmjs.com

Creating our package

Firstly npm is a package manager for node packages. It is basically used to publish, discover, install, and develop node programs. That way, we can use a code already written by someone and include it in our code. So we need a package that will create a new folder and set up a boilerplate index.html file.

using your code editor of choice, create a folder named setup-html
create a file named index-sh and copy the code below to it

#!/bin/bash

folder_name="$1"

# create folder
mkdir $folder_name
# create index.html in directory
touch $folder_name/index.html
# add simple boilerplate code to index.html
echo -e '<!DOCTYPE html>\n<html lang="en">\n<head>\n\t<meta charset="UTF-8">\n\t<meta http-equiv="X-UA-Compatible" content="IE=edge">\n\t<meta name="viewport" content="width=device-width, initial-scale=1.0">\n\t<title>Document</title>\n</head>\n<body>\n\t<p>Hello World!</p>\n</body>\n</html>' >> $folder_name/index.html

The code above is a bash script and it simply accepts an argument as a folder name, creates index.html and adds initialization code.

notice that we made use of shell script. you can make use of whatsoever code to perform your functions inasmuch they integrate well with Node in it's environment.

Next, We push our code to a repository here I added a README to document how our code usage.

Initializing and Configuring NPM

run npm init -y. This command creates a package.json and the -y flag default fills it for us.

{
"name": "setup-html",
"version": "1.0.0",
"description": "## Description",
"main": "index.sh",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
  "type": "git",
  "url": "git+https://github.com/zt4ff/setup-html.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
  "url": "https://github.com/zt4ff/setup-html/issues"
},
"homepage": "https://github.com/zt4ff/setup-html#readme"
}

You should change the name property in package.json to a unique name that's not in use in npmjs.com

Configuration

This is the important stuff! To make the package a module that can run on a terminal, we will include a property in package.json called bin. For instance in our package.json

"bin": {
    "setup-html": "./index.sh"
  }

The bin command allows us to create scripts. We can create different commands and have them perform different functions. The scripts are what we call in our terminal after installing the package globally.

Our package.json ends up looking like this:

{
  "name": "setup-html",
  "version": "1.0.0",
  "description": "## Description",
  "main": "index.sh",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zt4ff/setup-html.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/zt4ff/setup-html/issues"
  },
  "homepage": "https://github.com/zt4ff/setup-html#readme",
  "bin": {
    "setup-html": "./index.sh"
  }
}

Publishing our package

make sure you are signed up at npmjs.com
in our terminal, run npm login and fill every of our user credentials
next, run npm publish
once published, you can head over to npmjs.com to see your package on NPM

Now setup-html@1.0.0 is published on npmjs.com I aim to show you a basic way of creating a command line node package. You can expand your knowledge on this and create something as complex as create-react-app or firebase-tools. I would love to receive your comments, reviews and corrections.

Thanks for stopping by! 👋

Kayode Oluwasegun