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, hsnyc.co, 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: https://azure.microsoft.com/en-us/ 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.

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

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’.

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:

Property	Value
Location	/
API Location
Output Location	build

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
    }
  },

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: https://aka.ms/swaworkflowconfig
    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_WP_APIURL: https://blog.hsnyc.co/wp-json
    VITE_CP_APIKEY: Y0ur0wn8p!K3yG03sH3re
    VITE_CP_URL: https://api.hsnyc.co
    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: https://aka.ms/swaworkflowconfig

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

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

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:

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”.

You can now view your web app via the Azure generated URL. If all went well your app should be live on that 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.

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: https://learn.microsoft.com/en-us/azure/static-web-apps/configuration 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.

Resources:

1. MS Learning Resource:
   https://learn.microsoft.com/en-us/training/modules/publish-app-service-static-web-app-api/?WT.mc_id=academic-39081-chrhar
   
2. Create a 404 fallback
   https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#response-overrides
   
3. Handling Trailing Slash
   https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#trailing-slash
   
4. Add a custom domain
   https://blog.hsnyc.co/devops/add-a-custom-domain-for-your-azure-static-web-app/