DEV Community

Ramon Xavier
Ramon Xavier

Posted on • Edited on

Publishing an NPM package to the Gitlab Package Registry

#cicd #gitlab #runner #lerna

In this post, we will explore how to publish a package on NPM using the GitLab Package Registry within a private repository. To get started, you will need to have the latest versions of Node and a package manager (npm or yarn) installed, as well as a GitLab account and a text editor of your choice, such as VSCode.

Prerequisites: Node and (npm or yarn) in the latest versions.
GitLab account
VSCode or a text editor of your choice
Enter fullscreen mode Exit fullscreen mode

Initializing the Project

To manage a Monorepo and Yarn Workspaces, we will use Lerna. To start the project, follow the steps below:

$ mkdir my-project
$ cd my-project
$ npx lerna init
Enter fullscreen mode Exit fullscreen mode

To add the necessary configurations to the lerna.json file, you should include the following code block:

// In ./lerna.json
{
  "packages": ["packages/*"],
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "independent",
  "command": {
    "publish": {
      "registry": "https://gitlab.com/api/v4/projects/<your-project-id>/packages/npm/"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

To capture the Project ID, go to your GitLab repository settings and check the value that appears in the URL. The Project ID is the number that appears after the slash in https://gitlab.com/<your_user>/<your_repository>/edit, for example:
https://gitlab.com/my_user/my_repository/edit -> Project-ID: 123456

To create a project within the repository, you can use the following command:

$ cd packages
$ mkdir my-lib
Enter fullscreen mode Exit fullscreen mode

Inside this repository, you can create an NPM project using the commands npm init, yarn init, or pnpm init.
After creating your project, open the package.json file and add the following configurations:

"publishConfig": {
    "@my-project:registry": "https://gitlab.com/api/v4/projects/<your-project-id>/packages/npm/"
  },
"sideEffects": false,
Enter fullscreen mode Exit fullscreen mode

Returning to the GitLab Package Registry, after creating your project, let's see how to publish it to NPM within a private repository. To do this, return to the project root and create a file called .npmrc.
This file is important because it contains the necessary configuration information to publish a package to NPM, including access credentials for the GitLab Package Registry. To create it, simply run the command touch .npmrc in the terminal while in the root directory of your project.
Next, add the following lines to the .npmrc file:

// inside .npmrc
@my-project:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=<authentication_token>
//gitlab.com/api/v4/projects/<project_id>/packages/npm/:<authentication_token>
Enter fullscreen mode Exit fullscreen mode

Replace <project_id> with your GitLab project ID and <authentication_token> with the access token you generated earlier. Remember that this token is sensitive and should not be shared publicly.

Creating Our AUTH TOKEN

To begin, go to your GitLab repository settings by clicking on "Settings" at the bottom. To create an access token, go to your project settings in GitLab and access the "Access Tokens" section.

When creating your access token, it is important to set the correct attributes to ensure the security of your project. Some of the information you should define includes:
After creating your access token, you can return to your local project and publish it to the GitLab Package Registry using the following command:

AUTH_TOKEN_GITLAB=<your_token_value> yarn build && lerna publish --yes
Enter fullscreen mode Exit fullscreen mode

If everything went well, by following the described steps, you will be able to see your project published in the Package Registry tab. This means that your library is available for use by other developers who have access to the GitLab repository. Remember that to ensure the security of your project and users, it is important to follow best security practices when configuring access permissions and sharing credentials. This way, you can contribute to a safer and more reliable development ecosystem.

Now, to add your library to a project, you will need to create an .npmrc file in the project's root directory and add your library variables.

// inside .npmrc
@my-project:registry=https://gitlab.com/api/v4/projects/<project-id>/packages/npm/
//gitlab.com/api/v4/projects/36997980/packages/npm/:_authToken=AUTH_TOKEN_GITLAB
// finally, add your package to your project.
$ yarn add @my-project/my-lib or npm install @my-project/my-lib
Enter fullscreen mode Exit fullscreen mode

Thank you for reading, and I hope this was helpful! If you have any questions or suggestions, feel free to leave a comment below. We are always available to help improve your development experience. See you next time!

Top comments (0)