DEV Community

Cover image for Deploy your Static Web Apps to Azure directly from the command line
Yohan Lasorsa for Microsoft Azure

Posted on

Deploy your Static Web Apps to Azure directly from the command line

For this second article about the SWA CLI, we'll talk about the new deployment options. And yes, you can now deploy your apps straight from the command line! Who's better than the person who implemented it to talk about it? I'll let my friend Wassim explain it all to you.

If you've never heard of Static Web Apps (or SWA for short), it's a web app hosting service provided by Azure, offering streamlined full-stack development with many built-in features like authentication, customizable routing, serverless functions and more. It also has a great free tier πŸ˜‰

Logging in to Azure

In the new SWA CLI for Azure Static Web Apps, we introduced a new swa login command allowing you to log in to your Azure account, straight from the command line. This command will encrypt and store your credentials in your system's key Chain, so you don't have to enter them again.

In most common cases, the swa login will pick your current active Azure credentials from the following locations (in this order):

  1. Your environment variables, if you have set one or all of following variables:
    • AZURE_TENANT_ID
    • AZURE_CLIENT_ID
    • AZURE_CLIENT_SECRET
  2. Your current Visual Studio Code, if you're using VS Code and is connected to Azure.
  3. Interactive prompt using your browser.
  4. The last fallback is the device code flow, which will prompt you to log in to your Azure account using a generated device code.

However, if you need, you can also provide any of these credentials from the command line, using the available flags:

Usage: swa login [options]

login into Azure

Options:
  -S, --subscription-id <subscriptionId>    Azure subscription ID used by this project
                                            (default: "process.env.AZURE_SUBSCRIPTION_ID")
  -R, --resource-group <resourceGroupName>  Azure resource group used by this project
  -T, --tenant-id <tenantId>                Azure tenant ID (default: "process.env.AZURE_TENANT_ID")
  -C, --client-id <clientId>                Azure client ID
  -CS, --client-secret <clientSecret>       Azure client secret
  -n, --app-name <appName>                  Azure Static Web App application name
  -cc, --clear-credentials                  clear persisted credentials before login (default: false)
  -u, --use-keychain                        enable using the operating system native keychain
                                            for persistent credentials (default: true)
  -nu, --no-use-keychain                    disable using the operating system native keychain
Enter fullscreen mode Exit fullscreen mode

Once logged in, the SWA CLI will store your active Azure subscription ID and tenant ID in a local file called .env at the root of your project:

➜ swa login

Welcome to Azure Static Web Apps CLI (1.0.0)

Checking Azure session...
βœ” Successfully logged into Azure!
βœ” Saved project credentials in .env file.
βœ” Successfully setup project!
Enter fullscreen mode Exit fullscreen mode

This file will be used when deploying your project to Azure using the swa deploy command.

Deploying your app

The new SWA CLI makes it even more easier to deploy your apps to Azure. You can now deploy your app directly from the command line, using one single swa deploy command.

The swa deploy command is smarter enough to figure out if you already have an Azure Static Web Apps instance available, and if so, it will use it. Otherwise, it will create a new one on the fly - or prompt you to select one from a list of already available ones:

➜ swa deploy

Welcome to Azure Static Web Apps CLI (1.0.0)

Using configuration "thundr" from file:
  /home/wassimchegham/oss/@thundr-dev/thundr/swa-cli.config.json

Deploying front-end files from folder:
  /home/wassimchegham/oss/@thundr-dev/thundr/app/dist/thundr-ui

Deploying API from folder:
  /home/wassimchegham/oss/@thundr-dev/thundr/api

Checking Azure session...
βœ” Successfully logged into Azure!

Checking project settings...
? Choose your Static Web App β€Ί - Use arrow-keys. Return to submit.
❯   >> Create a new application
    swa_samples/angular-web-bluetooth
    swa_samples/catsify
    swa_samples/hexa
    swa_samples/ngxtools
    swa_samples/nitrooo
  ↓ swa_samples/photobooth-teams

Enter fullscreen mode Exit fullscreen mode

The swa deploy command is also able to detect if your existing Static Web Apps instance has already been deployed from a CI/CD pipeline and inform you about it!

Deploying from a CI/CD pipeline

Deploying from CI/CD pipelines is a common practice in many projects. You can use the swa deploy command to deploy your app to Azure from your CI/CD pipeline. You can accomplish this by setting a deployment token:

➜ swa deploy --print-token --app-name thundr --resource-group swa_samples

Welcome to Azure Static Web Apps CLI (1.0.0)

Checking project "thundr" settings...
βœ” Successfully setup project!

Deploying to environment: preview

Deployment token:
7c3fc44b858164b677-truncated-8c80ace9-39a8-416c-ae22-864745c0470b003
Enter fullscreen mode Exit fullscreen mode
swa deploy --deployment-token=7c3fc44b858164b677-truncated-8c80ace9-39a8-416c-ae22-864745c0470b003b003
Enter fullscreen mode Exit fullscreen mode

You can also set the deployment token as an environment variable:

export SWA_CLI_DEPLOYMENT_TOKEN=7c3fc44b858164b677-truncated-8c80ace9-39a8-416c-ae22-864745c0470b003b003
swa deploy
Enter fullscreen mode Exit fullscreen mode

Environment variables

The new SWA CLI introduced a new set of environment variables to make it easier for you to configure your experience. You can customize the behavior of the SWA CLI by setting the following environment variables:

  • General settings
  • Emulator settings
  • Deploy settings
  • Runtime settings
  • Login experience

You can read more about these environment variables in the Environment Variables section in our new documentation website.

Next steps

From the start of your project to its deployment to Azure, with all the needed local testing in-between, you should now be equipped to take care of your complete development process all from the command line. Now the main challenge remaining for you is to deploy and grow your app πŸ˜‰.

If you'd like to learn some tips you can use when developing your app, you can check out the Static Web Apps - Tips & Tricks video series.

You can also learn more about all the new features of the SWA CLI and how to use them by looking at the new docs website.

Tell us your feedback!

We're also here on dev.to to listen and help as much as we can! πŸ™‚

Please tell us your experience, your difficulties, your questions, and what features you would like to see in the next versions of the SWA CLI.

Top comments (7)

Collapse
 
jeremycarter profile image
Jeremy Carter

With the two environments "production" and "preview" is there a way to swap between the two? Should I deploy to preview, then swap the slots when I want preview to become "production"? I only want to deploy to preview and then toggle the slots.

Collapse
 
worldpwn profile image
Andrei Kniazev

You cand do it like this:
swa deploy ./src/front/dist -d $DEPLOYMNET_TOKEN --env production

Collapse
 
dullingwine profile image
DullingWine

swa login doesn't work for me (I'm on a mac). Just opens up an empty firefox browser and sits there. I have to kill the terminal. I haven't found a way around this. Any suggestions?
Thanks

Collapse
 
worldpwn profile image
Andrei Kniazev

You can login into Azure.
> az login
Get the deployment token
> az DEPLOYMNET_TOKEN=$(az staticwebapp secrets list -g <RG-NAME> -n <STATIC-APP-NAME> --query 'properties.apiKey')
> DEPLOYMNET_TOKEN=${DEPLOYMNET_TOKEN//\"/}
> swa deploy ./src/front/dist -d $DEPLOYMNET_TOKEN --env production

Collapse
 
dullingwine profile image
DullingWine

Hi - thanks for the quick response! Above didn't work for me unfortunately. I did login (changed default browser to chrome) but assuming you meant DEPLOYMENT_TOKEN not DEPLOYMNET_TOKEN above the second command fails with:
'DEPLOYMENT_TOKEN="<my deployment token"' is misspelled or not recognized by the system.

I've logged a support call to help out.

Thread Thread
 
worldpwn profile image
Andrei Kniazev

Did you use bash? Because this is bash script

Thread Thread
 
dullingwine profile image
DullingWine

I just used the deployment token directly in the deploy command for now. Mine is a blazor WASM project, so assuming i should point it to the wwwroot of the output i ran it. It successfully deployed something and partially starts up..but fails with unhandled error (no other info) after downloading the 7.0.4 dotnet js. Oh well, will have to dig in further later.