Azure Static Web Apps In 2023

If you want to get Azure Static Web Apps running and you’ve been suffering interminable Azure subscription and other mysterious issues, then you’re at the right place.

Prerequisites

You want to have installed the following things.

  • Azure command line tools [link]
  • Static Web App command line tools [link]
  • Node Package Manager [link]
  • Node Version Manager (or a similar tool) to run Node 16 [link]

There’s some Azure stuff you need to have ready, too.

  1. Get an Azure account
  2. Get your tenant-id and subscription-id from within Azure Portal
  3. Be sure to enable Microsoft.Web on your subscription from “Resource Providers”

Lastly you need some code to get started.

  1. Clone this repo
  2. Move it to your own computer with git magic like gh repo clone johnmaeda/reponame
  3. Okay. You’re good to go! cd to the local directory and let’s get started!

Steps

  1. Be sure to be logged out of Azure so any existing identity has been cleared out.
    % az logout
  2. Login to Azure.
    % az login
  3. Use Node version 16 if you don’t have it. Be sure to set your session to use 16.
    % nvm install 16 (this will set the session you’re in to 16)
    % nvm ls (this will list the available versions)
    % nvm use 16.20.2 (this will switch you to 16.20.2 if it’s in your list)
  4. Install react-scripts.
    % npm install react-scripts (static web apps CLI requires version 16)
  5. Invoke the swa with your tenant-id. You may not need your tenant-id, but I did.
    % swa login --tenant-id longalphanumericstring --verbose=silly
  6. Get going with the defaults for swa.
    % swa (go with all the defaults — they’re very good)
    % swa start
    % swa build
  7. Get it up on the Internet.
    % swa deploy --verbose=silly