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 apackage.json
and the-y
flag default fills it for us.
You should change the{ "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" }
name
property inpackage.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! ๐