Getting Started with GPR

(Github Package Registry)

GitHub Packages

What's the difference with npm?

A new 🏑 home for your packages

with the same experience.

With a great difference:

But that makes them a little more difficult to work with...

Let's create one of our own!

1. Creating the lib

export const getBlahMessage = () => ({ message: 'blah' })
// src/index.js

1. Creating the lib

Type definitions (TS/JSDocs) for EXTRA POINTS!

2. Installing tools

> npm init
> npm i -D rollup
> npm i -D @babel/core rollup-plugin-babel  
rollup-plugin-terser  rimraf 

3. Configuring Rollup

export default {
  input: 'src/index.js',
  output: {
    file: `dist/blah.mjs`,
    format: 'esm', 
    sourcemap: true,
  },
  plugins: [/*...*/]
}
// rollup.config.js

Outputs 1 file

3. Configuring Rollup

export default [
  {/* ... */},
  {/* ... */},
]
// rollup.config.js

Outputs 2 files

3. Configuring Rollup

import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import pkg from './package.json'

const terserOptions = {
  sourcemap: true,
  compress: true,
  mangle: true
}

const createConfig = ({ minify, format, ext = 'js' }) => ({
  input: 'src/index.js',
  output: {
    name: pkg.name,
    file: `dist/index${minify ? '.min' : ''}.${ext}`,
    format,
    sourcemap: true
  },
  plugins: [
    babel({ exclude: 'node_modules/**' }), ...(minify ? [terser(terserOptions)] : [])
  ]
})

export default [
  { minify: false, format: 'esm', ext: 'mjs' },
  { minify: true, format: 'esm', ext: 'mjs' },
  { minify: false, format: 'esm' },
  { minify: true, format: 'esm' }
].map(createConfig)

4. Let's create the bundle!

{
  ...
  "scripts": {
    ...
    "build": "rimraf dist && rollup -c"
  }
  ...
}
> npm run build
// pacakge.json

4. Let's create the bundle!

5. Configure package.json

{
  ...
  "files": [
    "dist"
  ],
  "main": "dist/index.js",
  "module": "dist/index.mjs"
}
// pacakge.json

πŸ‘‰πŸ½

πŸ‘‰πŸ½

6. Creating the repo

(A regular repository)

> git init

6. Creating the repo

(A regular repository)

πŸ˜ŽπŸ‘‰πŸ½

6. Creating the repo

(A regular repository)

> git add .
> git commit -m "initial commit :rocket:" 
> git remote add origin git@...
> git push -u origin master

7. Make it installable

 {
+  "name": "@lovetoknow/npm-pkg-test",
+  "repository": "git://github.com/lovetoknow/npm-pkg-test.git",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
-  "private": true
 }

Β Edit package.json

*

* Name of the organization in github (in lowecase!)

7. Make it installable

registry=https://npm.pkg.github.com/lovetoknow

Β Add a .npmrc file

πŸ‘†πŸ½ Oh, must be lowercase!

8. Deploy FTW!

8. Deploy FTW!

But first, authenticate!

8. Deploy FTW!

You have 2 options:

  1. adding a PAT (Personal Access Token) to the .npmrc file.
    Β 
  2. logging in via npm CLI

πŸ‘‰πŸ½

7. Deploy FTW!

> npm publish

Now, let's install it!

9. Installing the lib

> cd ..
> mkdir install-test
> npm init -y

We set up a test project

9. Installing the lib

> npm install @lovetoknow/npm-pkg-test  

9. Installing the lib

Why?

We forgot to tell npm to look for in GPR!

registry=https://npm.pkg.github.com/lovetoknow
// .npmrc

9. Installing the lib

> npm install @lovetoknow/npm-pkg-test  

10. Installing the lib on a CI env

The πŸ€– robot needs to be authenticated too.

- Via npm CLI

- Via .npmrc with a PAT

//npm.pkg.github.com/:_authToken=PERSONAL_ACCESS_TOKEN
// .npmrc

11. Updating our library

> git add .

> git commit -m 'change ...'

> git push

> npm version <major | minor | patch>

> npm publish

πŸ‘‰πŸ½

πŸ‘‰πŸ½

12. Good practices

- Tests!

- npm hooks (pretest, prepublish)

- semver!

- Publishing tags and changelog file

Resources

Thank you

Get Started with GPR (Github Package Registry)

By Paul Melero

Get Started with GPR (Github Package Registry)

Short intro to GPR (Github Package Registry) for private npm modules.

  • 23
Loading comments...

More from Paul Melero