Jenkins

Creating a Jenkins Pipeline to build an Angular 7 project and deploy on S3 bucket as a static website.

Prerequisites:

cloned Angular project: https://github.com/darshan-raul/awsdashboard
Jenkins Server/ubuntu with min 1gb ram configured with plugins [All suggested plugins + Blueocean,github ] https://linuxize.com/post/how-to-install-jenkins-on-ubuntu-18-04/
AWS cli installed and configured with a IAM user (Having S3FullAccess permissions) credentials.
Node Js / npm installed apt install npm nodejs

Else you can use the following userdata/startup script (for ubuntu 18.04)

#! /bin/bash
sudo apt-get update
sudo apt install -y npm nodejs python-pip openjdk-8-jdk docker.io
wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt update
sudo apt install jenkins
pip install awscli
sudo ufw enable
sudo ufw allow 8080
sudo ufw allow 22

After this all you need to do is configure awscli and jenkins thats it.

Steps:

Click on new item on the left side bar in Jenkins main dashboard and on the next page give the job a name.
Select the type as Pipeline.

Give the job a description
This option determines when, if ever, build records for this project should be discarded. Build records include the console output, archived artifacts, and any other metadata related to a particular build.
Here you can mention the project url for the github project

I am selecting the build periodically so that every 12 hours the job is run
You can choose the github hook trigger using Github plugin
or Poll SCM

You can either choose to write the pipeline script here or choose the pipeline script from SCM option
Here you mention the pipeline script..else you can create one by using the Pipeline Syntax button given below

Once done you can build the job and open blueocean and see the progress according to stage’s you set in pipeline syntax.

After a while both the stages are built successfully and you can view the logs too.

This was the code:

node {
  
   stage('Preparation') { 
      
      git 'https://github.com/darshan-raul/awsdashboard'
      
   }
   
   stage('Build') {
   dir("folder") {
        sh 'npm install'
        sh 'npm build --prod'
      }
    }
    
}

In the preparation stage I am just cloning the repo in my workspace directory
In the Build stage I am changing the directory to the cloned repo and then running the npm install and npm build commands

Now its time to add another stage where the code is deployed to S3 bucket

In package.json of the Angular app , I have added a additional script to build as well as copy the files to S3 bucket where the static website is hosted.

Make sure that you have AWS CLI installed on the Jenkins server configured with S3 full access user access keys.

Try aws s3 ls to confirm.

Now lets edit the JenkinsPipeline code.

node {
  
   stage('Preparation') { 
      
      git 'https://github.com/darshan-raul/awsdashboard'
      
    }
    
   stage('Build') {
    dir("awsdashboard") {
        sh 'pwd'
        sh 'npm install'
     
    }
       
   }
    stage('Deploy') {
   
     
         sh 'npm run deploy'
 
    }
    
}