Deploy a Sveltekit site to Azure Static Web Apps

In this post I will list the steps I took to deploy my 100% static, server side rendered (SSR) site,, to Azure Static Web Apps. There is nothing fancy running on this site, it’s just using APIs calls to fetch data from CockPit and WordPress CMS to grab page and posts info to display it on the page. So I will be configuring ASWA to run these API calls at build time. Ok, lets begin.

First, here are my apps configuration:

I am using the Svelte Static Build adapter, and not the Svelte Azure Adapter since this is a purely static build and I don’t need any Azure back-end functions or dynamic server rendering.

Let get started:

Sign in to your Azure with your Microsoft account. If you don’t have a Microsoft account, go to: and you can create one for free.

Once you login, (and verify, and fill out all necessary forms if you are a new user), you will be taken to the dashboard.

Image of Azure Dashboard

Hover over ‘App Services’. On the pop up window, click the ‘Create’ drop down and then click on ‘Static Web App

Image of Azure Dashboard showing static web app option

In the Create Static Web App screen, the first thing is to select your Subscription. This is the plan you choose during sign up. Next, create a Resource Group which is just a way for you to group together similar resources. Then, give your App a Name and under Hosting Plan, pick the Free plan. Under Deployment Details select ‘Github’. Click on ‘Sign in with Github’.

Image of Azure Dashboard showing static web app configuration

Once logged in to Github, select your organization, repository, and branch.

Under Build Details select the ‘Sveltekit’ preset. This will add the Sveltekit defaults which are based on the Svelte Azure Adapter. But, this may need to be modified depending on your apps setup. Here is I set for my site:

API Location
Output Locationbuild

I left API Location blank since I am not using a run time API, but if you do, then set the appropriate location here.

Remember: These values have to match your settings in your Sveltekit config file (svelte.config.js).

kit: {
    adapter: adapter({
      // default options are shown. On some platforms
      // these options are set automatically — see below
      pages: 'build',
      assets: 'build',
      fallback: undefined,
      precompress: false,
      strict: true
    paths: {
      relative: false
Image of Azure Dashboard showing static web app configuration

You can now review your Workflow file to make sure all looks the way it should. In my case, I have added environment variables my site needs in this file. These are used by my API calls to fetch page content and posts. One thing to note is that if your static app uses APIs at build time, then you would want to place these environment variables in this file, and not via the Azure dashboard (via Settings –> Configuration), as values added here are only used by runtime APIs, and not at build time. I learned this the hard way.

Here is how my workflow file looks like:

# For more information regarding Static Web App workflow configurations, please visit:
    app_location: "/" # App source code path
    api_location: "api" # Api source code path - optional
    output_location: "build" # Built app content directory - optional
  env: # Add environment variables here
    VITE_CP_APIKEY: Y0ur0wn8p!K3yG03sH3re
    VITE_CP_COLAPI: /api/collections/get
    VITE_CP_SINGAPI: /api/singletons/get
    ###### End of Repository/Build Configurations ######

If you would like more info on the workflow configuration file you can check out Azure’s page:

If all looks good, Click ‘Review + Create’.

Image of Azure Dashboard showing Review + Create button

You will then be taken to the ‘Review + create’ tab, click ‘Create’.

Azure Dashboard showing Review + Create Tab

The app will now build. This may take a few minutes.

Once the app build completes, you should see something like this in your Github Actions tab:

Image of Github Action Console

Then you will be taken to the Overview page where it will show some details about your deployment. You can now click on “Go to resource”.

Azure Dashboard showing "Go to Resources" button

You can now view your web app via the Azure generated URL. If all went well your app should be live on that URL.

Azure Dashboard showing generated URL

If you see the following screen, it may be because your app is still building. Check out Github Actions to check the build progress.

Image of Azure confirmation of deployment

If your app encountered any issues during the build, check your CI/CD workflow under GitHub Actions where it will show you the build log and that can show any messages that you will help you troubleshoot your deployment.

After your site is deployed, check out the staticwebapp config file options here: for help you with additional server configuration options, specifically for setting fall back routes and handling trailing slashes.

If you want to add a custom domain for your static web app, check out my next post for details on how to get it done.

That’s all there is to it.

Let me know if this was useful and/or if you have any questions regarding your Svelte Static site deployment to Azure Static Web App. I am always happy to help.


  1. MS Learning Resource:
  2. Create a 404 fallback
  3. Handling Trailing Slash
  4. Add a custom domain

Please Post Your Comments & Reviews

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.