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:

1. Repo access
2. Read package access
3. Write package access
4. Delete package access (optional)

See GitHub's guide here if you are having trouble.

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

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/"
  }
}

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

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

Finally, let's publish the package!

npm publish

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

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 npm 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()

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!

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

1. Example repo
2. About GitHub Packages
3. Setting up an Personal Access Token

Image credit: Morning Brew

Originally posted on my blog. Follow me on Twitter for more hidden gems @dennisokeeffe92.