DEV Community: Blair Lierman

Turn your Single Page Application into an Artifact with Azure DevOps

Blair Lierman — Thu, 06 Jan 2022 16:25:57 +0000

In order to use the output from a build in Azure DevOps later, you need to publish it as a Build Artifact. This article will show you how to configure that.

This examples uses an Angular based Single Page Application (SPA) build using the Nx monorepo tools, however the general process can be applied to any SPA framework once you know the build commands.

Create a new Azure Pipeline

In Azure DevOps, go to Pipelines > Pipelines
Select 'New Pipeline" (or "Create Pipeline if you don't have one)
Connect to your Repo
- Mine is in Azure Repos Git, so I will be using that
Select your Repo
Configure your pipeline template
- I selected the "Node.js with Angular" option for my example, however any of the Node.js options should work
Complete Review, then Save (not "Save and Run") your pipeline
- I created a new folder for mine and gave it a unique name
- I also recommend creating a new branch while testing, as best practice

Install Node, npm, and your Command Line Interface (CLI)

Update the NodeTool task to your Node Version
1. I used Node 14, as that matches my project's environment
Create 'npm install CLI' script task
1. Add a new script task above the 'npm install and build' script task
2. Set the first line to npm install -g <ListOfCLIs> to include the CLI(s) that you will need on the machine to build your project
  1. I needed the Angular (@angular/cli) and Nx (@nrwl/cli) CLIs for my project
3. Specify the version of the CLI(s) to match your project
  1. Mine used version 12 for both Angular and Nx
4. Update the displayName to npm install <yourCLIName> CLI
  1. In my example, I used npm install Angular CLI and Nx CLI
5. Final script task should look like:
```
 - script: |
     npm install -g @angular/cli@12 @nrwl/cli@12
   displayName: 'npm install Angular CLI and Nx CLI'
```
Update the 'npm install and build' script task
1. Simplify the task to just npm install (we are already install the global tools needed in the step above)
2. Task should look like this:
```
  - script: |
     npm install
  displayName: 'npm install'
```

Update the Pipeline to Build and Publish

I have two different environments that I wanted to build and publish, 'staging' and 'production', so I am going to do this twice and use separate subfolders for each one.

Create 'build staging' task
1. Copy the 'npm install' script task and paste a new copy
2. Replace npm install with your project build command
  1. Mine is nx build account-info-manager:build --configuration=staging --outputPath=dist/staging
  2. account-info-manager is my project
  3. staging is a custom configuration defined in my project
  4. outputPath is set to create a separate folder called 'staging' under the typical Angular dist folder
  5. Change displayName to 'build staging' (or the name that is applicable for your environment)
Add a Publish Build Artifacts task
1. Add a Task to the Pipeline by clicking "+ Task"
2. Search for "Artifacts"
3. Select the "Publish build artifacts tasks" and click "Add"
4. Set the values based on your build path in the 'build staging' task
  1. My Path to publish is set to $(Agent.BuildDirectory)/s/dist/staging
  2. My Artifact name is set to staging
  3. Keep Artifact publish location as Azure Pipelines
  4. Click the "Add" button
Save your Pipeline
Create 'build production' task
1. Copy the 'build staging' script task and paste a new copy
2. Replace staging with production in your build commands
  1. Mine is nx build account-info-manager:build --configuration=production--outputPath=dist/production
  2. account-info-manager is my project
  3. production is a configuration defined in my project
  4. outputPath is set to create a separate folder called 'production' under the typical Angular dist folder
Add a Publish Build Artifacts task
1. Set the values based on your build path in the 'build production' task
  1. My Path to publish is set to $(Agent.BuildDirectory)/s/dist/production
  2. My Artifact name is set to production
  3. Keep Artifact publish location as Azure Pipelines
  4. Click the "Add" button
Save, then Run your Pipeline

You now have an Build Artifact that can be used in Azure DevOps Releases! (Once it completes, of course)

If you would like deploy your newly created builds to Azure Static Web Apps (and have different environments + approval), check out my post on that

Azure Static Web Apps from Azure DevOps Releases

Blair Lierman ・ Aug 20 '21

#devops #staticwebapps #singlepageapplications #azurestaticwebapps

Azure Static Web Apps from Azure DevOps Releases

Blair Lierman — Fri, 20 Aug 2021 22:40:44 +0000

Azure Static Web Apps is an awesome new option for deploying single page applications, however I had specific goals that the current documentation didn't quite address, so here is how I met them.

My Goals

Deploy to Azure Static Web Apps
Deploy the same code to different environments (i.e. Sandbox, Test, Production)
Automatically deploy to Sandbox (aka Test/Staging)
Require approval to deploy to Production

The Microsoft Documentation for publishing from Azure Static Web Apps builds and deploys in a single step via Pipelines, however that doesn't support multiple deployments from same artifacts or an approval step.

All of those goals are possible using Azure DevOps, however it took some additional steps to get them working together.

Prerequisites

A Single Page Application published as an Artifact built using Azure Pipelines
- My artifact contains two builds of an Angular app, 'sandbox' and 'prod'
- I happened to use an Angular app, but you can apply this to any single page application framework, such as React, Vue, Ember.js or Svelte.
The Deployment Token from an already-created Azure Static Web App
- Create a Static Web App section

Configure Your Release

In your Azure DevOps project, go to Pipelines, then Releases
Create a new Release Pipeline (using the "+ New \/" button)
Select 'Empty job' as the Template
- We will be creating ours from scratch
Name your first Stage
1. The Name can be whatever you like. I used 'Production Deployment'
In the Artifacts, select the Artifact that you already built
1. Select Build as Source type
2. Select your Source - This is the Name of your Artifact from the Prerequisites.
3. You can update the 'Source alias' to a simpler name if you prefer
  - This will be used in your pipeline later
4. Click the "Add" button to save your Artifact
Now click the "View stage tasks" link ("1 job, 0 tasks") on your existing Stage
Click "Agent job" above the tasks to edit the default settings
1. Change the Agent Specification to a recent Linux build, such as ubuntu-20.04
Next to "Agent Job", click the "+" button to add a new Task
1. Find the "Deploy Azure Static Web App" task (from Microsoft Corporation) and click "Add"
  - At the time of this blog post, it is currently in PREVIEW and at version 0.* (preview)
2. Fill in the following fields of the task:
  1. Display Name - Can be anything you want
  2. App Location - Set to path of your built app in the artifact
    - Use the form "<ArtifactName>/<BuildName>/", i.e. AngularBuildArtifact/prod/
  3. Output Location - Set to path of your built app in the artifact,
    - Use the form "<ArtifactName>/<BuildName>/", i.e. AngularBuildArtifact/prod/
  4. Skip App Build - Set to true/checked. (The app is already being built and stored as an Artifact)
  5. Azure Static Web Apps Api Token - Fill in with your Deployment Token variable: $(deployment_token)
    - Follow Steps 5-10 in the Create the Pipeline Tasks section to configure a secret variable for your Deployment Token
  6. Save your Release
    - You can find my YAML for this task at the end of this post

Note: I didn't have an Azure Functions API or routes.json, so I have left the remaining fields blank. We are also skipping the app build, so we don't need to provide an App Build Command.

Congratulations! You can now run the Release to deploy to Azure Static Web Apps.

When this post was originally, a workaround was required for a docker error. That is no longer required, however the details can be found by clicking this if you are curious.

Note: If you run this task now, it will fail with an error in the task: > docker: Error response from daemon: OCI runtime create failed: invalid mount {Destination::/working_dir Type:bind Source:/var/lib/docker/volumes/8d90060c5907d68a281862c7f31dcb71efe24e52511ac78682a1e5e5dd27b0af/_data Options:[rbind]}: mount destination :/working_dir not absolute: unknown. As of the writing of this post, unfortunately there is a known issue within the Azure DevOps Static Web Apps task, however there is a workaround.
- More information can be found in this GitHub issue. The workaround is based on this comment in a related pull request.
- If the issue is resolved, please leave a comment on this post and I will update it. ## Workaround Steps
Add a Bash Script task above the Static Web Apps task
Change the Type to 'Inline'
For the script command to run add the following command: echo '##vso[task.setvariable variable=BUILD_SOURCESDIRECTORY]$(System.DefaultWorkingDirectory)'
- This command will set the necessary environment variable that the Static Web Apps requires.

Bonus Content - Adding Approval to the Stage

On the Pipelines tab, click the Pre-deployment Conditions button (at the left of the Stage button)
Enable Pre-Deployment Approvals
Fill in Approvers from your organization
Feel free to set the rest of the settings as necessary for your situation.

YAML for the Static Web App Task

variables:
  deployment_token: '<YourDeploymentToken>'

steps:
- task: AzureStaticWebApp@0
  displayName: 'Static Web App - Production Deployment'
  inputs:
    app_location: AngularBuildArtifact/prod/
    output_location: AngularBuildArtifact/prod/
    skip_app_build: true
    azure_static_web_apps_api_token: '$(deployment_token)'

Deploying an Angular 8 app to GitHub Pages using Actions

Blair Lierman — Fri, 21 Feb 2020 16:07:56 +0000

I've been writing my first real Angular application, a personal project, and needed to have it automatically deploy. GitHub Pages was a good free option as the project was already on GitHub.

I had manually deployed my Angular 8 project using the angular-cli-ghpages and learned to use the repository name with the base-href parameter in order for the application to load correctly on GitHub Pages.

The next step was to have it to be automatically deployed, which led me to GitHub Actions.

(If you just want the final result, you can skip to the bottom)

Setting up the initial GitHub Actions workflow

Never having used GitHub Actions before, I sought out a tutorial to assist me. The first one I found was this blog post, How to deploy an angular app on GitHub Pages using GitHub Actions by Amrish Kushwaha.

Follow that excellent introduction first to configure the proper tokens and secrets in Github and create the initial workflow in GitHub Actions.

Updating the workflow

From the initial workflow, I had a couple of other requirements:

Only running the workflow when code was pushed to the master branch
Using a newer version of Node, since Node 8 is out of date

This led to two more blog posts:

Deploy your projects to Github Pages with GitHub Actions by pierresaid, also here on Dev Community.
Deploy Angular to Production with Github Actions, a post on KhoPhi's blog.

These posts show how to accomplish both requirements from above as well as a new trick, using ubuntu-latest instead of a specific version.

Only running the build on master branch

    on:
      push:
        branches:
          - master

Using a newer version of Node, since Node 8 is out of date

Turned about to be as simple as changing the node version. 😂

    - uses: actions/setup-node@v1 #this installs node and npm for us
      with:
        node-version: '10.x'

Using ubuntu-latest instead of a specific version
```
 build:
    runs-on: ubuntu-latest
```

I also updated the checkout step to v2, the latest versions, based on the script found in GitHub Marketplace, Deploy to GitHub Pages.

    - name: Checkout
      uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
      with:
        persist-credentials: false

)

Building the Angular application for deployment

My first attempt was to modify the BUILD_SCRIPT parameter to run the build with the base-href parameter:
```
    BUILD_SCRIPT: npm install && npm run build -- --prod --base-href=/my-repository-name/`
```

Unfortunately that didn't work 😓

The answer ended up being right in front of my nose, back in the Deploy your projects to Github Pages with GitHub Actions post.

Steps for building an Angular app in GitHub Actions

Remove the BUILD_SCRIPT parameter and move it to a separate step.

Change them to a separate step that accomplishes the following:

Ensure the Angular CLI is available
Download all dependencies

Do the Angular build with the base-href parameter

   - name: Build
     run: |
       npm install -g @angular/cli        
       npm install
       ng build --prod --base-href="/farming-game-calc/"

BOOM! 💣 My first successful automated deployment to GitHub pages!

Final Result

Here is the final version of my yaml file (in .github/workflows/)

name: Deploy to GitHub Pages

on:
  push: 
    branches:   
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
      with:
        persist-credentials: false
    - name: Use Node.js 10.x
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'
    - name: Build
      run: |
         npm install -g @angular/cli
         npm install
         ng build --prod --base-href="/farming-game-calc/"
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v2
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BASE_BRANCH: master
        BRANCH: gh-pages
        FOLDER: dist/FarmingGameNetAssetCalculator

You can find the most current version in my GitHub repo.

You can find my simple application, a calculator for the end game of The Farming Game, at [https://blairlierman.github.io/farming-game-calc]

Thank you for reading my very first blog post, all the way to the end no less.
I hope you found it helpful and were able to make it work. Tell me in the comments what you thought or if you have any questions.