3. Configuring Github, Gitlab and Jenkins

Once you’ve created your repository with your angular project, you need to connect your Jenkins with your Gitlab. So first, you need to install Gitlab plugin in Jenkins. So, click in ‘Manage Jenkins’ then go to ‘Manage Plugin’. Then find for GitLab plugin and install that.

Now we need to configure Jenkins and Gitlab.

3.1. Configuring Jenkins and Gitlab

We need to setup a two-ways communication between Jenkins and Gitlab. But why?

Jenkins need to be notified by Gitlab webhook about changes on repository (Gitlab => Jenkins). Jenkins needs to be able to clone the repository (Jenkins => Gitlab).

3.2. Pre-Configuring Gitlab Webhook to Jenkins

We need this extra step before, because in this article we are running everything on localhost via docker, and gitlab’s webhook by default don’t allow to set a local address. If you are not running this on localhost, skip this step.

To make gitlab allow local address on webhook, you must login with root credentials.

After login, you must access Admin Area (http://localhost/admin)

Now, you need to go to Settings => Network

Then click “Expand” on “Outbound requests” tab, then check “Allow requests to the local network from web hooks and services”

Now you need to add the IP of Jenkins on whitelist. To get the IP of Jenkins, run the following command:

docker inspect jenkins | grep IPAddress

After all, your screen must be like that:

Allowing webhook on local address

So, click in Save Changes and everything is up to go.

Now, we need to configure Jenkins.

Click on “Manage Jenkins” then go to “Configure System”. Now we need to set the IP of Jenkins on “Jenkins URL” configuration:

Setting Jenkins URL

3.3. Configuring Gitlab on Jenkins.

On Gitlab you need you need to generate a token to be used by Jenkins. To do that, you must to go in “User Settings” => “Access Token”. Put a name for this token (I’ve used “jenkins”) and select scope “api” (“Expire at” can be empty), the screen bust be like this:

Generating a Gitlab token

NOTE: On a real scenario, is recommended to create a new user on gitlab to be used on jenkins. In this article, I am using my own account, which is not recommended.

Click on create personal access token and it will “generate a access token”.

NOTE: Keep in mind that if you leave this page you won’t be able to see this token again.

Now we need go to Jenkins and add this token on Credentials. To do that access “Credentials” then go to Scope Jenkins.

Then, put mouse over, a caret will appear, click on it, then click in “Add Credentials”.

So select Kind “GitLab API token”, put in “API Token” the token generated on previous step and write whatever you want in “ID” and “Description”, then click “Ok”.

Now, go to “Manage Jenkins”, then “Configure Jenkins”. In this page look for “gitlab” section. Configure like this:

Note: To discover the Gitlab host URL run following command:

docker inspect gitlab | grep IPAddress

3.4. Creating a new Job on Jenkins

After that, we need to create a job on Jenkins. To do that, login in Jenkins and click on “Create new jobs”.

Enter the name, select Freestyle Project and click OK.

Next page is to setup Gitlab repository and webhook.

On Repository URL put your Gitlab IP instead localhost (when you are running local using docker)

In credentials, click “add” then and provide your user/password of your Gitlab account.

In “Branch Specifier” use “master”

On section Build triggers check the option “Build when a change is pushed to GitLab”. This will allow to Jenkins build a package after a push in master branch

Build configuration example

Now COPY Gitlab webhook url (in my case http://172.17.0.3:8080/project/my-component-pipeline) and let’s setup the webhook in gitlab.

Now, we need to generate a token from Jenkins in order to Gitlab Webhook work. To do that, click in your name, then configure. So in “API Token Section”.

After that, you need to create a URL that follow this format:

http(s)://login:token@jenkins_url:jenkins_port/project/job

NOTE: This URL is the Gitlab webhook url that you had previously copied on previous step. You just need to add “login:token@” (where login is your jenkins login and token is the value you’ve generated on this step) before ip address.

In my case I produced this URL:

3.5. Configuring the Gitlab webhook

Now we need to configure gitlab webhook. To do that, access your project then go to “Settings” and after that “Integrations”. Fill “URL” field with the one you generated.

Webhook configuration in Gitlab

After you add a webhook you can test it. The expected result is to everything work. In “Project Hooks”, test it by sending a push event. Hook must return HTTP 200:

And then FINALLY!!!!

The build started from a gitlab push

3.6. Configuring build process

Jenkins is integrated with Gitlab, and now it is able to get the source code each time that a push is made on master branch.

But we need build the component. To do that, we need to install nodejs plugin on Jenkins.

After intalling the plugin, go to “Manage Jenkins” then access “Global Tool Configuration”.

So, add a new installation of nodejs with the desired version, like this image shows:

Nodejs plugin configuration on Jenkins

Now, go to your pipeline and set the nodejs installation you’ve made in “Build Environment”.

Component build environment

Note: In order to this work you must add the following line on your package.json

“scripts”: {

“build-component”: “ng build <my-lib-name>”

}

3.7. Configuring Jenkins to Nexus

First of all, we need to configure Nexus.

As was introduced on the beginning of this article, Nexus provide support to many repositories, but the one that interest for us now is npm repository.

We need to setup three repositories of Nexus (I won’t explain the details of each component, but give you a brief):

Hosted - Is the ‘container’ where your packages will be placed. Proxy - If a package is not found on repository, then we set a proxy to find this package in other repository. Group - A repository that aggregate multiple repositories in a single one.

3.7.1. Creating a Repository

Note: You need to be authenticated with admin to do that.

Click on “Cog”

Creating a repository — step 1

Creating a Repository — step 2

3.7.2. Creating a hosted

We need to store our component in nexus, so we need to create a hosted repository.

To do that, repeat the steps defined in section 3.7.1 then choose npm (hosted).

Creating a hosted repository

Fill the name with whatever you want (in this guide I’ll use npm-private) then click in “Create repository”

3.7.3. Creating a proxy repository

Now, we need to set up the proxy. To do that, repeat the steps defined in section 3.7.1 then choose npm (proxy).

Creating a npm proxy repository on nexus

Fill the name with whatever you want (I’ll use npm-proxy) and the remote storage I’ll use the public npm registry. The URL address is:

https://registry.npmjs.org

3.7.4. Creating a group

A group is a aggregate of repositories. We need to agregate the npm-internal and npm-proxy. To do that, repeat the steps defined in section 3.7.1 then choose npm (group).

Then set a name of group, and move the repositories.

Creating a group on nexus

3.7.5. Setting default repository on project

First we need to active “npm Bearer Token Realm”. This realm permits users with previously generated bearer tokens to publish npm packages.

After that we are allowed to publish the package from Jenkins, using a nexus account.

At this point, we have a repository that is accepting new packages, but we aren’t publishing it from Jenkins. So, lets setup this.

We need to tell to npm the default repository to get and publish packages 📦. This can be done using .npmrc file.

registry=http://<nexus-ip>:<nexus-port>/repository/<npm-group-repository>/

email=my-email@mail.com

_auth=base64(“<nexus-user>:<nexus-pass>”)

Note 1: this file must be placed on your projects/<my-lib-name>

Note 2: It’s your GROUP repository

Note 3: Is not recomended to use admin account. Create a Jenkins account instead.

Now we can get the dependencies, but we are not able to publish, because the hosted repository is not set. To do that, add the following node to your “projects/<my-lib-name>/package.json”:

“publishConfig”: {

“registry”: “<nexus-ip>:<nexus-port>/repository/<npm-hosted-repository>/"

},

And then finally, we need to update the script on Jenkins to publish the package on Nexus 🚀.

This is the final version of the script

And then when you do the next commits, you will see a new version of your library on nexus, as the example shows 🎉

A new version is published after a change on component 🎉

4. Conclusion

We have finished all the setup to reuse a angular component. Now, you are allowed to reuse the components that you have in your company across the projects. Even this article being so long IMHO, I missed some stuff (like development process, good practices, automatic testing, etc), but I want to write these points later.

That’s it. Thanks for reading you guys, any issues, let me know =)