How To Deploy Static Angular Website With Azure DevOps
By: Bhargav Bachina
Tags: Programming, Cloud Computing, Azure, JavaScript, Web Development

Build Pipeline

We need to do build pipelines as part of continuous integration first. The way this pipeline works is that the moment you check-in code into Github or Azure Repos, this pipeline builds the project, test it, make the built artifact ready for the deployment. Let’s follow all the steps to build this pipeline.

Create a Project in Azure DevOps Create a Repo and Put your code in Azure Repos Create a pipeline that takes it from the source repository. Install all dependencies Run the tests Build the code Copy files from source for staging Archive all the copied files Finally, publish the artifact. Enable Continuous Integration with triggers

Create a Project in Azure DevOps

Let’s create a project in your Azure DevOps account. I named it StaticWebsite with visibility of your choice. You can make it public or private.

Creating a project

Once you created this project you can see the dashboard which is empty right now.

Project Dashboard

Put your code in Azure Repos

It’s time to create a repo and place all the code from the example project from above and push your code into this repo. I created a repo called static-angular and push all the code into this repo.

static-angular

You can generate the Git credentials when you click on the clone button on the top right corner. You need these credentials if you want to push the code into this repo later.

Create a Build Pipeline

Let’s start a pipeline with selecting a source and repository branch

Select a Source

On the next page select an Empty job

select an empty job

You need to define all the tasks under this job such as Install dependencies, Run Tests, Build the project, Copy Files, Archive files, Finally publish artifacts.

Define Tasks

First, you need to click on the + icon on the right side of the Agent job to add tasks. We need to select the Command line task for the first three tasks: install, run tests, and build.

Command-line task

Install dependencies

When you run this pipeline you clone the Angular project from Azure Repos. This repo doesn’t have any dependencies installed so we need to run npm install as a first task

install dependencies

Run Tests

Always test the project. Let's run the units tests with this command npm run test-ci which in turn runs this form the scripts section of package.json ng test --no-watch --browsers=ChromeHeadless --code-coverage

Build the Project

Once all the test cases are run, we need to build the project for the artifact.

Build the project

Copy the files

We have the build ready so we need to copy files from source folder to target folder to staging. For this, we have to select the Copy Files task. All the code actually resides in this directory Build.SourcesDirectory and we need to move all the source code to staging directory Build.ArtifactStagingDirectory

Copy Files

Archive Files

We have copied all the files to the target folder. It’s time to create an Archive file with the task Archive Files. Select this task and give all the details such as the Root folder, archive type and an archive file.

Archive Files

Publish Artifact

Use the task called Publish build artifacts to publish the artifact.

Publish Artifact

Finally, Define the trigger

Let’s define the trigger for this build. Edit the pipeline by clicking on the triggers and enable continuous integration. Any commit to the static-angular repo master branch triggers this pipeline.

Trigger

This is how the final artifact looks.

Artifact

Here is the complete YAML for this build pipeline.