Problem

When creating Azure Static Web App in Azure portal. The deployment options did not provide clear instructions for how to deploy without creating a project and CI/CD pipeline on GitHub or Azure DevOps. Many times, we just want to deploy a simple one-time project from local computer. Let's see how to do this.

Solution

Install SWA CLI Tool

We need to use Microsoft official tool "Static Web Apps CLI" to deploy from local machine. First, install it from npm.

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

Build Your App

This step is only required when you are using a front-end framework that requires build, such as Angular. 

In my case, I am using Angular. I run "ng build" and generate the website content files in ./dist/test996. This is the folder to deploy to Azure Static Web App.

Now, inside `dist` folder. Open a terminal and run:

swa deploy ./test996 --env production

SWA CLI will let you login to Azure, then choose or create the target instance of Azure Static Web App, then zip the website folder and upload to Azure.

After it is done, we can browse the website in a second.

Bug or feature?

There seems to be a bug that you cannot deploy the current directory to Azure Static Web App. It won't throw errors, but your website will have empty content deployed. So, we must specify a directory for now.

For example, you have your index.html and other stuff inside `C:\your-project`.

DO NOT use this

C:\your-project\> swa deploy

Move your files to "build" folder and use this

C:\your-project\> swa deploy ./build

2024/12 Update

The latest SWA CLI seems to having difficulties finding existing Static Web App instances in Azure. If you meet this problem, you need to workaround it by:

Run swa --config . under project root directory and create a config file. Make sure your appName and the node name under configurations section are the same as your existing app's name in Azure, like this (testapp1 is my existing Azure Static Web App name):

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "testapp1": {
      "appLocation": ".",
      "outputLocation": "build",
      "appBuildCommand": "npm run build",
      "run": "npm start",
      "appDevserverUrl": "http://localhost:3000",
      "appName": "testapp1",
      "resourceGroup": "test-rg"
    }
  }
}

Login to SWA by specifying subscription id, resource group, and app name, like this:

swa login --subscription-id ******* --resource-group test-rg --app-name testapp1

Then, under the project root directory (where swa-cli.config.json file exists) run:

swa deploy --env production

DO NOT cd to your ./build or ./dist folder, because the outputLocation in the swa-cli.config.json is already telling SWA CLI where your files are. If you cd to ./build or ./dist folder, then SWA CLI won't find your existing app!