Jenkins - Angular : how to execute ng build after git push

Question

how could I execute a npm install and ng build commnad line after a git push trought Jenkins? Please condiser that i am using BitBucket as a remote repository.

thanks in advance. Andrea

Answer 1

Please follow below steps to setup npm install and auto build via Jenkins.

1. Login to your jenkins account
2. Click on New Item from left menu and Select Freestyle project and set project name as per your requirement.
3. After That on Configure screen set your git repository project link.
4. Then next option is custom repository and set your custom server path into that.
5. In Source Code Management click on Git and set Project link and credentials.
6. Set which branch would you like to use for build.
7. If want to run this configuration on daily basis then check Poll SCM and set time.
8. Then go to Build Management and select Execute Shell option and setup below commands in proper way.

• npm install
• ng build --no-aot --no-build-optimizer --base-href ./
• cp -R CUSTOM PATH(path to your custom repository where build is stored/dist/*) SOURCE PATH(path to your source repository where project is run) (Here you have to set your project path)

Please find below screen shot for better understanding

Answer 2

To automatically run builds, Jenkins listens for POST requests at a Hook URL. You need to give this URL to the repository on GitHub. Then, whenever code is pushed to that repository, GitHub will send a POST request to the Hook URL and Jenkins will run the build.

To get the Hook URL of Jenkins, Open the Jenkins Dashboard.

Go to: Manage Jenkins > Configure System

Under GitHub Plugin Configuration, Click on ‘Advanced…’ Check ‘Specify another hook url for GitHub configuration’ A textbox will appear with a hook URL. This is the Hook URL at which Jenkins will listen for POST requests. Open your repository on GitHub.

Click ‘Settings’ on the navigation bar on the right-hand side of the screen. Click ‘Webhooks & services’ on the navigation bar on the left-hand side of the screen. Paste the URL you copied in the previous step as the ‘Payload URL’. You can select the events for which you want the Jenkins build to be triggered. We will select ‘Just the push event’ because we want to run the build when we push our code to the repository Alternatively, you can click on ‘Let me select individual events’ to get a list of all the events that you can select to trigger your Jenkins build.

Click ‘Add webhook’ to add the webhook. In Jenkins, go to the project configuration of the project for which you want to run an automated build.

In the ‘Build Triggers’ section, select ‘Build when a change is pushed to GitHub’. Save your project.

Jenkins will now run the build when you push your code to the GitHub repository These are the steps to execute a shell script in Jenkins:

Adding angular build script in jenkins: In the main page of Jenkins select New Item. Enter an item name like "my shell script job" and chose Freestyle project. Press OK. On the configuration page, in the Build block click in the Add build step dropdown and select Execute shell. In the textarea you can either paste a script or indicate how to run an existing script. So you can either say:

!/bin/bash

npm install ng build --prod --aot

or just

/path/to/your/script.sh Click Save. Now whenever you push in github your project will be deployed with new changes. Hope it help :).