---
title: Azure Static Web Apps | Deployments
contributors:
  - derkoe
  - manucorporat
  - reemardelarosa
  - mhevery
  - WilliamEspegren
  - mrhoodz
  - adamdbradley
updated_at: '2023-09-11T11:03:36Z'
created_at: '2023-04-06T21:28:28Z'
---

import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';

# Azure Static Web Apps Middleware

Qwik Router Azure Static Web Apps middleware allows you to connect Qwik Router to [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/).

## Installation

To integrate the `azure-swa` adapter, use the `add` command:


<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run qwik add azure-swa
```
</span>
<span q:slot="npm">
```shell
npm run qwik add azure-swa
```
</span>
<span q:slot="yarn">
```shell
yarn run qwik add azure-swa
```
</span>
<span q:slot="bun">
```shell
bun run qwik add azure-swa
```
</span>
</PackageManagerTabs>

The adapter will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:

```shell
└── adapters/
    └── azure-swa/
        └── vite.config.ts
└── src/
    └── entry.azure-swa.tsx
```

Additionally, within the `package.json`, the `build.server` and `deploy` scripts will be updated.

## Production build

To build the application for production, use the `build` command, this command will automatically run `build.server` and `build.client`:

<PackageManagerTabs>
<span q:slot="pnpm">
```shell
pnpm run build
```
</span>
<span q:slot="npm">
```shell
npm run build
```
</span>
<span q:slot="yarn">
```shell
yarn run build
```
</span>
<span q:slot="bun">
```shell
bun run build
```
</span>
</PackageManagerTabs>

## Deploy to Azure

After installing the integration the project is ready to be deployed to Azure Static Web Apps.

There are three ways to deploy:

1. Deploy with [Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/)

   You can deploy your application from your local environment with:

   <PackageManagerTabs>
   <span q:slot="pnpm">
   ```shell
   pnpm dlx swa deploy
   ```
   </span>
   <span q:slot="npm">
   ```shell
   npx swa deploy
   ```
   </span>
   <span q:slot="yarn">
   ```shell
   yarn dlx swa deploy
   ```
   </span>
   <span q:slot="bun">
   ```shell
   bunx swa deploy
   ```
   </span>
   </PackageManagerTabs>

   This will start a wizard which will guide you through login and deployment to Azure.

2. Deploy from GitHub

   You can deploy your application via GitHub. Create a Git repository, commit all your code and then publish your branch to GitHub.

   Create an Azure Static Webapp via the Azure Portal and choose the GitHub repository in the deployment details. When prompted for the build details choose "Custom" and set the following values:

   - App location: "."
   - Api location: "./azure-functions"
   - Output location: "./dist"

   This setup will establish a GitHub workflow in your repository. With this workflow, your application will automatically deploy whenever changes are pushed or merged into the main branch.

   The resulting workflow file has to be adapted by adding the following to the "Repository/Build Configurations" block:

   ```text /skip_api_build/#b /true/#c
   skip_api_build: true
   ```

   Checkout [Azure Static Web Apps quickstart](https://learn.microsoft.com/azure/static-web-apps/get-started-portal?pivots=github) for more information.

3. Deploy from any CI system

   You can deploy to Azure Static Web Apps using any CI system. Set your Azure SWA deployment token as the `SWA_CLI_DEPLOYMENT_TOKEN` environment variable. Once that's done, you can run the following command in your pipeline:

   ```shell
   swa deploy ./dist --api-location ./azure-functions --env production
   ```

Notice, that you will need an [Azure account](https://signup.azure.com/) in order to complete this step!
