30 Days of Static Web Apps - Day 2 - Create and Deploy a Static Web App

D365 Freelancer
Nov 15
4 min read

Overview

This blog post provides instructions for creating a straightforward HTML static web app. It provides a high-level overview of how to build a Static Web App.

Background

Over the course of this year, I will be learning Azure Static Web Apps to host my Gym Tracker website. Over that time, I am going to post about my journey through 30 days of Static Web Apps (#30DaysOfServerless | Azure Static Web Apps) Day 2 is about building and deploying an Azure Static Web App. I won't be following the tutorial like-for-like because I don't have an Azure DevOps connected to an Azure tenancy. Without this, setting up Azure DevOps Pipelines is a little bit harder. I will circle back to SWA's and pipelines later. Instead, I will build a static HTML website and deploy it using the Azure Static Web Apps CLI (SWA CLI). Static Web Apps CLI Documentation | Static Web Apps CLI.

Step 1: Create a Static Web App in Azure

Go to Azure Market Place
Search for Static Web App

Find Static Web App in Azure Market Place

Click Create
Set the following
1. Basics Tab
  1. Subscription: Select your subscription
  2. Resource Group: Select your resource group
  3. Name: enter a meaningful name for yourself I am using swa-blog. (a good naming convention is to prefix your static web app with swa).
  4. Hosting Plan: Free (we do not need any of the advanced features that come with the paid tiers of static web apps).
  5. Deployment Source: Other (We will be deploying through the SWA CLI; therefore, we do not need to have DevOps or GitHub push changes to the static web app).
2. Deployment Configuration tab
  1. Deployment authorization policy: Deployment Token (we will need the deployment token later when deploying the static web app.)
3. Advance Tab
  1. Azure Functions and Staging: Set to any region as we won't be using Azure functions for this basic HTML static web app
  2. Enterprise Grade Edge: Leave unchecked. For this tutorial, we will not need advanced production-level optimisation of our static web app.
4. Tags tab
  1. add any tags you need
Press the Review and Create button
Press the create button

Step 2: Downloads for Development Environment

Download NVM (Node Version Management)

Download and Install Node Version 18

Download and install Node using Node Version Management command line below.

nvm install 18

Ensure Node version 18 is being used using the Node Version Management command line below.

nvm use 18
nvm list

Download and Install Static Web App CLI (SWA CLI)

Install Static Web Apps CLI using the Node Package Manager command line below.

npm install -g @azure/static-web-apps-cli

Download and Install Visual Studio Code

Download Visual Studio code from the below link.

Download Visual Studio Code - Mac, Linux, Windows

Then install the Azure Static Web Apps Extension

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps

Installed Azure Static Web Apps Extension in Visual Studio Code

Step 3: Create a Repository and Open it in VS Code

Create a repo in Azure DevOps or Git Hub and Clone the repo to VS Code.

To keep the blog concise, I assume the reader is familiar with this process and, therefore, will not include step-by-step instructions on cloning a Repository to VS Code. If VS Code is not linked to a repo, the following error is displayed when performing step 4 below: "A GitHub repository is required to proceed. Create a local GitHub repository and GitHub remote to create a Static Web App."

The error that occurs when executing Azure Static Web Apps: Create static Web App Command in VS Code

Step 4: Configure Static Web App in Visual Studio Code

Open a Workspace in Visual Studio Code, mine is named MyFirstStaticWebApp
Open a Terminal
1. run swa init. Then set the following values;
  - Config Name: Whatever name suits you. I am using MyFirstStaticWebApp
  - Whats your app location: src
  - whats your build location: . (default value)
  - What's your API location? (optional): blank (default value)
  - What's your data API location? (optional): blank (default value)
  - What command do you use to build your app? (optional): blank (default value)
  - What command do you use to build your API? (optional): blank (default value)
  - What command do you use to run your app for development? (optional): blank (default value)
  - What's your app development server URL (optional): blank (default value)
  - What's your API development server URL (optional): blank (default value)

After running as per above, a swa-cli.config.json file is created and added to the root workspace.

swa init

Step 5a: Install Azure CLI

If it is not already installed then install the Azure CLI otherwise the commands in steps 5b will not work. The azure CLI can be downloaded from

Step 5b: Get Deployment Token

Running the below command in a terminal in Visual Studio code will

log you into Azure,
select the target static web app,
create an environment (.env) file in the root directory of your Visual Studio Code workspace
and display the deployment token

az login

swa login

swa deploy --print-token

NOTE - Save the deployment token for future steps

I have not added screenshots for this section for security and confidentiality reasons.

Step 5c: Update .env File with the Deployment Token

Add the deployment token to the .env file against the SWA_CLI_DEPLOYMENT_TOKEN setting.

SWA_CLI_DEPLOYMENT_TOKEN=<DeploymentToken>

Step 6: Create a Static Web App in Visual Studio Code

Create the basic html website that will be hosted in the static web app.

WARNING - if a index.html file does not exist then deployment errors occur that are hard to debug.

Create a src folder in the workspace
Add a index.html file in the src folder
index.html file

Below is the sample html, it can copy and paste it into the index.html, or you can write your own.

<html>
    <head>
        <title>
            My First Static Web App
        </title>
    </head>
    <body>
        <h1>My First Static Web App</h1>
    </body>
</html>