Create Your First Github Package
Tags: github, package, typescript, npm
Published: 2019-09-29 02:06:26

---
description: Github introduced their Github Package Registry since May 2019 - a package management service, just like NPM packages. That means you can manage private or public packages next to your source code.
---
Github introduced their Github Package Registry since May 2019 - a package management service, just like NPM packages. That means you can manage private or public packages next to your source code.

At the moment when I write this article, you still have to Sign up for the beta in order to try this new service.

Here are the steps that you can follow to create your first Github Package.

## Step 1: create a Personal Access Tokens

Login to your **Github account > Settings > Developer settings**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/thphpajekxeemninly12.png)

## Step 2: log in to npm.pkg.github.com

```
dnguyen:~ dalenguyen$ npm login --registry=https://npm.pkg.github.com
Username: GitHub-username
Password: your-personal-access-token
Email: (this IS public) your-email@example.com
Logged in as dalenguyen on https://npm.pkg.github.com/.
```

## Step 3: prepare your source code

I already created a TypeScript Package Starter. You can clone it from Github.

```
git clone https://github.com/dalenguyen/typescript-package-starter.git

```
Here is the project structure:

```
dist 
--index.js
src
--index.ts
test
--index.spec.ts
```

This package has only one simple function: helloWorld

```
export const helloWorld = () => 'Howdy!'

```

In order to publish your package to Github Package Registery, you need to add **publishConfig**. Otherwise, it will publish the package to the NPM Package Registry.

```
{
  "name": "typescript-package-starter",
  "version": "1.0.0",
  "description": "TypeScript boilerplate for NPM or Github Packages",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "test": "mocha --timeout 60000 --exit -r ts-node/register test/**/*.spec.ts",
    "build": "tsc",
    "deploy": "npm publish"
  },
  "author": "Dale Nguyen",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dalenguyen/typescript-package-starter.git"
  },
  .........................
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@dalenguyen"
  }
}
```

This will end up creating a package name: @dalenguyen/typescript-package-starter. You need to replace the username in the package.json when you work with your own package.

And thanks to Alex — my coworker — by adding the repository, you have the ability to publish multiple packages to the same GitHub repository.

## Step 4: push your project to Github repo

After you have your code ready. Push it to your github repo. You have to create your repo from Github.com.

```
git init
git add .
git commit -m "Create first github package"
git push origin master
```

### Step 6: publish your first Github package

Run the test, make sure that everything works

```
npm test
```

Deploy your first Github package

```
npm run build && npm deploy
```

and Voilà

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xq8knk70v7jwkgwm9h5o.png)

## Step 7: Try to install your first Github package

Before that, you need to create a .npmrc file

```
// .npmrc
@your-username:registry=https://npm.pkg.github.com
```

Then install your package:

```
dalenguyen$ npm i @dalenguyen/typescript-package-starter

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN github-packages@1.0.0 No repository field.
+ typescript-package-starter@1.0.0 (as @dalenguyen/typescript-package-starter)
added 1 package from 1 contributor and removed 6 packages in 2.375s
```

## Step 8: Test your new created package

```
// index.js
const starter = require('@dalenguyen/typescript-package-starter')
console.log(starter.helloWorld())
```

Run the index.js file

```
dalenguyen$ node index.js
Howdy!
```

Now you know how to create and publish your first Github package. In the next post, I will try to [add CI/CD in order to publish the package automatically with Github Actions](https://dev.to/dalenguyen/continuous-integration-and-deployment-ci-cd-pipeline-with-github-package-and-github-actions-24hp?id=182199).