Week 3, Day 6 of #30DaysOfSWA!!
This is second part of the 2-part series that focuses on the launch of the Azure Static Web Apps CLI at the Azure Static Web Apps Anniversary event on May 19, 2022. Yesterday's post introduced the core
swa command and walked through the
swa init and
swa start commands - and covered configuration.
Today, we'll explore the
swa login and
swa deploy commands that help with deploying your locally-developed app to the Azure cloud. And we'll cover the use of Environment Variables to streamline the developer experience further.
- Logging in to Azure
- Deploying your app
- Environment variables
Exercise: Use the new
swaCLI to authenticate, and deploy your app
Wassim Chegham is a Senior Cloud Advocate on the Developer Relations team at Microsoft and one of the Core Contributors to the Azure Static Web Apps CLI open source project. Find him at @manekinekko or follow him right here on dev.to.
Yohan Lasorsa is a Senior Cloud Advocate on the Developer Relations team at Microsoft and one of the Core Contributors to the Azure Static Web Apps CLI open source project. Find him at @sinedied or follow him right here on dev.to.
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 😉
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):
- Your environment variables, if you have set one or all of following variables:
- Your current Visual Studio Code, if you're using VS Code and is connected to Azure.
- Interactive prompt using your browser.
- 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
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!
This file will be used when deploying your project to Azure using the
swa deploy command.
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.
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
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 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
swa deploy --deployment-token=7c3fc44b858164b677-truncated-8c80ace9-39a8-416c-ae22-864745c0470b003b003
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
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.
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.
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.
Want to see the Static Web Apps CLI in action? The tool became generally available yesterday, launching at the Azure Static Web Apps Anniversary. Watch the segment to see the SWA CLI in action.