How to implement low-cost CI/CD for Angular projects
Requirements:
If your organization doesn't have access to parallel jobs, you can request parallel jobs for free for public or private projects using this form. Your request takes 2-3 business days.
Why CI/CD?
Continuous integration and continuous delivery/deployment (CI/CD) is important because they offer a fast and reliable way to develop, test, and deploy software applications.
CI/CD allows software development teams to deliver software updates frequently, ensuring higher quality and reducing costs.
Context
Are you aware of the option to create CI/CD for smaller development teams using Azure DevOps with SmarterASP.NET hosting?
It is a cost-effective way to improve collaboration, streamline development processes, and provide the scalability and security needed to host Angular applications for startups, small and medium-sized businesses, as well as personal projects.
Not everyone can afford the high cost of implementing CI/CD in the Azure or AWS cloud. That’s why I offer this good alternative based on my past experiences.
Let’s start:
When I try to share knowledge with someone else , I prefer not assume or omit details.
I separate this implementation into following parts:
Part 1 : Let's implement some requirements, from step 0 to 6.
Part 2 : Creating a new Azure repository, from step 7 to 8.
Part 3 : Creating and uploading the angular project to the Azure repository created, from step 8 to 9.
Part 4 : Setting up branch policies to enforce pull request-based merging into the main branch, from step 10 to 10.
Part 5 : Building Continuous Integration — CI, from step 11 to 14.
Part 6 : Adding a Task groups to simplify the CD, from step 15 to 16.
Part 7 : Building Continuous Delivery — CD, from step 17 to 23.
Part 8 : Final test, from step 24 to 25.
you can omit those parts completed by yourself previously with other of my articles or your own experiences.
Step 0: If you prefer a video instead of the official documentation mentioned before about how to create an account, organization, or project in Azure DevOps, these videos can be helpful for you
https://www.youtube.com/watch?v=A91difri0BQ
https://www.youtube.com/watch?v=705enJzR2cY
https://www.youtube.com/watch?v=Ii70yZ7pmJs
Step 1: If you prefer a video about how to create an SmarterASP.NET account, this video can be helpful for you
Step 2: If you prefer the official documentation from Smarter ASP NET here is the documentation.
Step 3: Please verify is you organization has parallel jobs here how to check the parallel jobs setting directly
Step 4: If you created/had your Smarter account, you will need to create a new website where you going to push your Angular app.
Replace testAngularCICD with your preferred name.
Step 5: After creating the website "testAngularCICD" you'll need to turn on the website created before in step 4.
Step 6: Please write this data because you will need them in the CD pipeline.
pServiceUrl => your web deploy Service URL
pSiteName => your web deploy site name
pUserName => your web deploy user name
pPassword => your web deploy password
Advice: a security recommendation can be to change the password of this site because normally is the same as the login account and it's a bad practice.
Step 7: You will need to create an Azure repository to upload your Angular project.
Step 8: You will need to add your Angular code to the new Azure repository created before.
Step 9: Clone the repository to your local machine using Git command-line tools or Command prompt.
Remember your login credential to azure portal here.
Step 9.1: Change your working directory to the local repository.
Step 9.2: If you have your own angular project you can omit this step
When you’re working on an Angular project, it’s crucial to verify that you have the correct versions of Node.js and the Angular CLI installed to ensure compatibility and a smooth development and deployment process.
open your terminal or command prompt and run:
ng version
Step 9.3: Create an Angular Application in the directory of your selection
open your terminal or command prompt and run:
ng new testAngularCICD --strict false
Step 9.4: Test your Angular app locally: Run It on your local server
open your terminal or command prompt and run:
ng serve –o
Step 9.5: Add your code files to the stage repository using the “git add” command.
Step 9.6: Commit your changes to the repository using the “git commit” command.
Step 9.7:Push your changes to the Azure DevOps repository using the “git push” command.
Step 9.8: Create a new branch and switch to it using the “git checkout -b newBranch” command.
Step 10: You need to establishing pull requests as the way to merge changes into the main branch in Azure Repositories (or any Git repository) is important for several reasons for example: Code review, Collaboration, Control over changes, version control.
The minimum number of reviewers need to be 3 at least, but this is a test.
Continuous Integration (CI) with YAML files for Angular projects on Azure DevOps offers several benefits, for example: configuration as code, standardization, automation, parallel testing, flexibility, scalability, integration with Azure ecosystem, cross-platform compatibility, artifact management, security and compliance.
Step 11: Open on Visual Studio Code your existing o created angular project (step 9.3) , create the following YAML.file: angular-build-pipeline.yaml
trigger:
- main
pool:
vmImage: ubuntu-latest
variables:
appName: 'ANGULARAPPNAME' # Remove the leading slash
steps:
- script: echo 'Starting Angular build --> $(System.DefaultWorkingDirectory) --> $(Build.ArtifactStagingDirectory)'
displayName: '0. Building process'
- task: NodeTool@0
inputs:
versionSpec: '18.x'
displayName: '1. Install Node.js'
- script: |
npm install -g @angular/cli
npm install
npm run build
displayName: '2. Npm cli, Install, Build'
- upload: $(System.DefaultWorkingDirectory)/dist/$(appName)
artifact: drop
displayName: '3. Upload files to Artifact'
Replace 'ANGULARAPPNAME' with the name of your angular app name located at the package.json
here a detailed explanation of the yaml file created before.
Step 12: Now you will push this changes and the main branch to your azure repository
Looks like now we have the "angular-build-pipeline.yaml" in the main branch.
why you need to do it on this way ? Remember, cause it was configured a branch policy on step 10.
Step 13: You need to create your first pipeline, navigate to Pipelines at the left nav menu bar, then click Create Pipeline button.
Step 14: Select Azure Repos Git YAML to create your first pipeline.
领英推荐
Step 14.1: Select the repository created by you on the step 7.
Click on Job, after complete the procces do click on 1 artifact produced.
Looks like the code was built successfully.
You need to verify the artifact about the published project produced files, write down the path “drop”, we will need to use it later in the CD pipeline.
Step 15: Download the task group from the github repository mentioned before.
Step 16: Let's import the task group downloaded before to the task groups of the project.
The task group is ready to be used for each angular app ready to be deployed at SmarterASP Net hosting.
Step 17: You need to create a second pipeline, navigate to the releases tab page, and create a new release pipeline.
Step 18: You need to do the following things:
Change the pipeline name
Add our artifact, created before.
You need to choose the source(build pipeline) NOT update the Source alias * field(_testAngularCICD).
Step 19: You need to enable the continuous deployment trigger, this will execute the subsequent stage jobs when a pipeline is built.
Step 20: You need to add the task group imported before to handle the deployment.
Step 21: You need to add the values of the variables required on the task group selected.
pPassword
pServiceUrl
pSiteName
pSourcePath
pUserName
You can get this info from the step 5 and 6.
Note: If you don't want to use the task group created by me , because you preferer to do it from scratch by code, in the following article from step 26.3 to 27 you can find two way to do it, you will need to do some small adjusment.
Step 22: Let's test the pipeline created before
Cheers we have completed all.
Step 23: You need to verify if your Agular app was deployed successfully at SmarterASP side.
Go to the following sites:
https://www.smarterasp.net/
https://member5-3.smarterasp.net/account/loginform
enter your credential.
You have been completed successfully this implementation.
After to complete the implementation, this will be your frequently step.
Step:24 Let do a final test folks, only to be sure if all this effort to created this CI/CD flow is working as expected.
A- Let's get all the changes to the main branch
git pull origin main
B- Let's create another git branch with the name that you prefer.
git checkout -b mytesttwo
C- Open your Angular project with VS and do any change in your code.
D- Let save,add, push the change to the azure repository.
git add .
git commit -m “app version 2 to test CICD”
git push origin mytestwo: mytesttwo
E- You’ll need to create the pull request in the azure repository
F- Automatically after completing the pull request the CI pipeline will be triggered.
Automatically after complete the CI pipeline , CD pipeline will be triggered.
H- Repeat the step 23 to verify is the changes are on SmarterASP Hosting.
That is everything folks, I will wait for your feedback, ideas, or advice, don’t hesitate to do it please, thank you.
Special thanks to the co-author of this article: Eng. Edson Martinez Zuniga