Deploying a Vue.js Static Web App Using Azure Developer CLI (azd)

Table of contents:

Deploying modern front-end applications to the cloud should be simple, repeatable, and secure. In this article, I’ll show how to deploy a Vue.js static site to Azure using the Azure Developer CLI (azd), based on my azd-static-web-vuejs template repository.

Why Azure Developer CLI? #

The Azure Developer CLI (azd) is a tool that streamlines the process of provisioning Azure resources, deploying code, and managing environments. It’s especially useful for static web apps, as it combines infrastructure-as-code (Bicep), CI/CD, and local development workflows.

Project Structure #

The azd-static-web-vuejs repo is organized as follows:

• /src: Vue.js application source code.
• /infra: Bicep templates for Azure resources (Static Web App, Storage, etc.).
• .azure: Azure Dev CLI configuration files.
• .github/workflows: GitHub Actions for CI/CD.

Prerequisites #

• Node.js (v18+)
• Azure CLI
• Azure Developer CLI
• Git

Getting Started #

1. Clone the repository:

   1git clone https://github.com/erudinsky/azd-static-web-vuejs.git
   2cd azd-static-web-vuejs
   

2. Initialize the project:

   1azd init
   

   This command sets up the environment and prompts for your Azure subscription and environment name.

3. Provision Azure resources:

   1azd provision
   

   This step deploys the infrastructure defined in /infra using Bicep. It creates a Static Web App and related resources.

4. Deploy the Vue.js app:

   1azd deploy
   

   The CLI builds the Vue.js app and uploads the static files to Azure Static Web Apps.

5. Access your site:

   After deployment, azd outputs the URL of your new static site. Open it in your browser to see your Vue.js app live on Azure!

CI/CD Integration #

The repo includes a GitHub Actions workflow that automates deployment on push to main. Secrets for Azure authentication are managed via GitHub repository settings.

Customization #

You can modify the Vue.js app in /src or extend the infrastructure in /infra as needed. The Bicep templates are modular and easy to adapt for custom domains, authentication, or additional Azure services.

Conclusion #

With azd-static-web-vuejs, deploying a Vue.js static site to Azure is fast and reliable. The Azure Developer CLI abstracts away much of the manual setup, letting you focus on building your app. Try it out and accelerate your cloud deployments!