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