SvelteKit App Not Showing Any Pages When Started with Azure Static Web Apps

Question

Question:

I’m trying to start a SvelteKit application using Azure Static Web Apps (SWA) locally. Despite following a reference project I found here, my app doesn't display any pages when I start it.

Here are the details of my setup:

Svelte Configuration (svelte.config.js):

import azure from 'svelte-adapter-azure-swa';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  kit: {
    adapter: azure()
  },
  preprocess: vitePreprocess()
};

Azure Static Web Apps Configuration (staticwebapp.config.json):

{
  "routes": [
    {
      "route": "/*",
      "allowedRoles": ["anonymous", "authenticated"]
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  },
  "globalHeaders": {
    "X-Content-Type-Options": "nosniff"
  },
  "mimeTypes": {
    ".json": "text/json"
  }
}

CLI Command to Start the App:

swa start

Error Message:

swa cli request error:
GET http://localhost:4280/404.html - 404

When I navigate to http://localhost:4280, I get a 404 error indicating that 404.html cannot be found.

Steps I’ve Tried:

Verified the reference project and followed the setup instructions. Ensured that the routes and navigation fallback in staticwebapp.config.json are correctly defined. Despite these efforts, the application still doesn't render any pages. Could someone help me understand what might be going wrong?

Additional Information:

• SvelteKit version: ^2.0.0
• svelte-adapter-azure-swa: ^0.20.0
• Azure Static Web Apps CLI version: 1.1.7
• Operating System: Win11

Answer 1

Even I faced with the same error. The 404 Error is caused because of routing to its existing port.

As mentioned in this document, swa-cli is configured by using swa-cli.configuration. By default URL loads under 4280. Configure 4280/route_names in the code to resolve the error and display that page as shown in the below output.

Below is the sample code to configureswa-cli.

Make sure to add the route in code according to the requirements.

staticwebapp.config.json

{
  "navigationFallback": 
   {
      "rewrite": "index.html"
   }
}

• swa-cli.config will be generated using swa init. Change swa-cli.config.json as shown below. swa-cli.config.json

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "sveltekit-swa-full-stack-app": {
      "appLocation": ".",
      "outputLocation": "build",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:5173"
    }
  }
}

svelte.config.js:

import azure from 'svelte-adapter-azure-swa';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  kit: {
    adapter: azure()
  },
  preprocess: vitePreprocess()
};

Output: