Your First Github npm Package in 5 Minutes

In this quick take, we're going to get you up and running with your first npm package on GitHub.

It expects you to be relatively familiar with npm and GitHub.

Create an Access Token on GitHub

On GitHub (once logged in), click on the top-right dropdown in the toolbar and head to Settings > Developer > Personal Access Tokens and create a new access token with:

Copy the token and add it to ~/.npmrc with the value //npm.pkg.github.com/:_authToken=add-token-here.

Now log into the registry:

$ npm login --registry=https://npm.pkg.github.com
> Username: YOU_GITHUB_USERNAME
> Password: YOUR_GITHUB_TOKEN
> Email: PUBLIC-EMAIL-ADDRESS
copy

Publishing the first package

Head to the hello-world-npm repo and fork it into your own GitHub account.

Once forked, let's clone it into your local. That should be git clone https://github.com/your-username/hello-world-npm.git.

Change into that directory and open it up into an editor. We want to make some changes to package.json:

{
  "name": "@your-username/hello-world-npm",
  "version": "1.0.2",
  "description": "A simple npm package to demonstrate GitHub Package Registry",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/your-username/hello-world-npm.git"
  },
  "author": "Your name",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/your-username/hello-world-npm/issues"
  },
  "homepage": "https://github.com/your-username/hello-world-npm#readme",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  }
}
copy

Save and let's commit this and push back up.

git add package.json
git commit -m "feat: Updating package details"
git push
copy

Finally, let's publish the package!

npm publish
copy

Bingo! We should be ready to roll.

Installing the package

Let's start a new Nodejs project.

mkdir hello-first-pkg
cd hello-first-pkg
# init with basic details
yarn init -y
touch index.js .npmrc
copy

We need to add @your-username:registry=https://npm.pkg.github.com to the .npmrc file to tell it to look for your packages.

Then run nnpm i @your-username/hello-world-npm.

This should successfully install. Once happy, let's test it out! Add the following inside index.js:

const myPackage = require("@your-username/hello-world-npm");
myPackage.helloWorld();
copy

We are now all set to try it out! Run node index.js and we'll get our glorious response!

> node index.js
Hello World!
copy

The important part from all of this is to ensure that you have correctly configured package.json for your NPM packages.

Resources and Further Reading

Image credit: Morning Brew