Back to home

Your First Github npm Package in 5 Minutes

Published: Jul 5, 2020

Last updated: Jul 5, 2020

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

    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

    Image credit: Morning Brew

    Personal image

    Dennis O'Keeffe

    @dennisokeeffe92
    • Melbourne, Australia

    Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
    I am currently working on Visibuild.

    1,200+ PEOPLE ALREADY JOINED ❤️️

    Get fresh posts + news direct to your inbox.

    No spam. We only send you relevant content.

    Your First Github npm Package in 5 Minutes

    Introduction

    Share this post