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 adaptor, use the add command:

npm run qwik add azure-swa

The adaptor 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 two 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 will setup a GitHub workflow deploying your application automatically. Read the Azure Static Web Apps quickstart for more information.

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