Deploying a Single Page Application to an Azure Web App with Azure DevOps by Azeem Vasanwala

Azure web apps are familiar to many, and simple to use to deploy various .NET, Java, Node.JS apps. However, with many front-end frameworks such as Angular, React, Vue, etc, developers can easily create Single Page Applications, that are essentially a single HTML page with a bunch of supporting Javascript files.

So, the pre-requisite knowledge to continue this guide is that you already know how to

  1. Create a Linux Web App on Azure
  2. Know how to create the distributable build for your SPA (essentially you have a “dist” folder or its equivalent built through ng build or vue-cli-service build or whatever, henceforth referred to as the build command)

Deploying your SPA with a git trigger

  1. Create a Linux Web App on Azure with Node as the stack and your required node version. You don’t need any special settings, just go through the process
  2. Create a pipeline in Azure DevOps, and select “Use the classic editor to create a pipeline without YAML.”
  3. Select where your git repo is
  1. When given the option to start with a template, choose “Empty Job” underneath “Select a template”

Add the following tasks:

  1. “Node.js tool installer”, and name it “Install Node.js”
  2. “npm” (Yes the task is named “npm”). You will need to configure this task.
  1. Under the config options, set the name to “Install packages” and the command to “install”
  1. Add one more “npm” task, and configure it to build your SPA. Thus the command could look something like the image below. It is important to note that the command needs to be whatever you might run locally to build your project. You also need to know what the output directory for your build will be (e.g ./dist, or ./prod or whatever)
  1. Add the task “App Service Deploy”. Under config options, connect it to the app service you created in step 1. This part is unique to your azure config. The parts you need to note are the following fields:
    • Package or folder: Set this to “./dist” or whatever the output directory of your build command is.
      Why?
      You need to understand what devops has done. You have pulled your code onto a VM, and by installing node and running the build command etc, you have built your project. Now when attempting to deploy, the VM’s shell session is still in the same folder, and thus “./dist” is the folder to deploy
    • Startup Command: Set this to npx serve -s.
      Why?
      Your web app is a Linux Web App with npm installed. You need a HTTP server to serve the stuff in your dist folder. npx is the node package runner that can run a package immediately. serve is the name of the package. So we use npx serve -s
  2. Configure your git trigger under triggers by linking it up to the correct branch
  1. Save everything and you’re done! Push to the branch you configured and your project will build and auto deploy!

 

Related Posts

Leave a Reply