Azure Static Web Apps Middleware

Qwik City Azure Static Web Apps middleware allows you to connect Qwik City to Azure Static Web Apps.

Installation

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

npm run qwik add azure-swa

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

└── 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 npm run build.server and npm run build.client:

npm run build

Deploy to Azure

After installing the integration using npm run qwik add azure-swa 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

   You can deploy your application from your local environment with:

   npx swa deploy

   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:

   skip_api_build: true

   Checkout Azure Static Web Apps quickstart 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:

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

Notice, that you will need an Azure account in order to complete this step!