How to Publish Npm Packages with GitHub

Creating packages is fun...but sometimes we need help to manage them! In part one of the GitHub series, Cogworks Dev, Adrian Ochmann, takes us through a step-by-step set-up of GitHub packages and gives us the low-down on all the benefits.

GitHub introduced a great new functionality that allows you to manage packages in repositories called GitHub Packages.  It allows you many packages, some of which are: npm packages, docker images and NuGet packages!

This is a great feature if you have GitHub repositories for your project (either for client or open source projects), as you can use this repository as a place to store package related items.

Keeping packages in the repository has a lot of benefits:

- One single place to maintain packages. 
- Packages are associated with the repository.
- Simple process for building and releasing packages.
- Access management is easy to control in one location.
- Flexible publishing options for publishing; make a repository private or public.
- No need to purchase additional package managers (excellent support from free, to GitHub One).

In this post, I will show you how to configure, store and use npm in a GitHub repository. 

Configuration

First, create two access tokens:

- Read and write access token (for storing all versions of the package).
- Read access token (to gain access to this package from another project).

 

Now for the set-up:

1. Log in to your GitHub organization or your profile account.

2. Go to developer settings and then personal access tokens

3. In the note field, enter the description of your personal token, then select checkboxes: **write:packages**, **read:packages** and **delete:packages**.

4. Repeat steps from point 3 just for the read-only token **read:packages**

Then some values need to be provided in package.json:

  "version": "1.0.0",
  "name": "@yourOrganizationOrAccount/yourPackageName",
  "description": "description",
  "author": {
    "name": "authorName",
    "email": "email",
  },
  "repository": {
      "type": "git",
      "url": "urlToYourRepository"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/yourOrganizationOrAccount"
  },

 

It’s a good idea to add the .npmrc file so they can easily add all access settings (although you can also do this manually).  This is used for updating the package when sending a new version to the repository.


It is good practice is to keep the .npmrc with write access locally for development, testing or releasing using GitHub Actions and publish process. This is to avoid storing the write token in the repository, instead of using GITHUB_TOKEN in the workflow. For the read token in another project, we can easily store .npmrc in the repository.

 

registry=https://npm.pkg.github.com/yourOrganizationOrAccount
//npm.pkg.github.com/:_authToken=readWriteToken

 

After everything is configured, you can easily publish your package using command ```npm publish```

That's it for publishing! You should now see this package in your repository, package and package details: 

 

Repository

Repository.png

 

Package 

image.png

Package Details.

image.png

 

To upload your package to another project, install it from the command line: 

 

$ npm install @yourOrganizationOrAccount/yourPackageName@1.0.0

 

Then install via package.json:

 

"@yourOrganizationOrAccount/yourPackageName": "1.0.0"

 

Note: In your project, you can also store the .npmrc file with configuration and read token (this is the same file like on [upper setup example](#npmrc)...but with a read token). You can find more information here

 

Removing packages from GitHub for private repositories.


      'You can only delete a specified version of a private package on GitHub or with the GraphQL API. To remove an entire private package from appearing on GitHub, you must delete every version of the package first...

[For public repositories.]

      ...To avoid breaking projects that may depend on your packages, you cannot delete an entire public package or specific versions of a public package.

Under special circumstances, such as for legal reasons or to conform with GDPR standards, you can ask GitHub Support to delete a public package for you, using our contact form.' - (GitHub).

 

Deleting via a browser.

- Go to your package repository, go to packages and click the name of your package.

- On the right, use the edit package drop-down and select manage versions.

- To the right of the version you need to delete, click delete.

 

Deleting via GraphQL.

 'Use the deletePackageVersion mutation in the GraphQL API. You must use a token with the read:packages, delete:packages, and repo scopes. ...

 

curl -X POST \
-H "Accept: application/vnd.github.package-deletes-preview+json" \
-H "Authorization: bearer TOKEN" \
-d '{"query":"mutation { deletePackageVersion(input:{packageVersionId:\"216072\"}) { success }}"}' \
https://api.github.com/graphql

 

...You cannot delete an entire package, but if you delete every version of a package, the package will no longer show on GitHub'. - (GitHub)

 

Final thoughts.

You can see how easy it is to set-up and use npm in existing GitHub repositories and the benefits it brings.

Applying some careful configuration and attention to detail from the start in our projects has undoubtedly helped us to continue to improve our workflow and efficiency day-to-day, and we hope you like using GitHub packages as much as we do.

Head here for part two of the GitHub series, for all things NuGet!

If you have any comments or questions, reach out to us on socials, or drop us a message using the form below to get in touch with our Dev team! 

  • Image for How to Simplify Azure Search Implementations Build

    How to Simplify Azure Search Implementations

  • Image for 5 Ways our Support Plan Can Help Your Umbraco Website Grow Strategy

    5 Ways our Support Plan Can Help Your Umbraco Website Grow

  • Image for F Is for Freedom and Friday Strategy

    F Is for Freedom and Friday

  • Image for How to Build a Desktop Application With Electron and Vue Build

    How to Build a Desktop Application With Electron and Vue

Ready to collaborate ?

Get in touch to see how we can transform your digital presence.

Send us a message