geoffrich / svelte-adapter-azure-swa

SvelteKit adapter for Azure Static Web Apps.
MIT License
139 stars 31 forks source link

How to properly use SWA CLI with Adapter? #181

Open uioporqwerty opened 2 months ago

uioporqwerty commented 2 months ago

So I know we build with swa build and it will create a build folder by default. In this build folder you can find a compiled staticwebapp.config.json which is good. However, if I use a swa-cli.config.json as specified below, then I get a bunch of errors about mime types not resolving and entire files being missing.

Loading module from “http://localhost:4280/_app/immutable/entry/start.4ODMfwI4.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Uncaught (in promise) TypeError: error loading dynamically imported module: http://localhost:4280/_app/immutable/entry/start.4ODMfwI4.js
Loading module from “http://localhost:4280/_app/immutable/chunks/entry.CYPFuQ1Y.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Loading module from “http://localhost:4280/_app/immutable/entry/app.LS5hQUrt.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Loading module from “http://localhost:4280/_app/immutable/chunks/scheduler.CwHJs5Ia.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Loading module from “http://localhost:4280/_app/immutable/chunks/index.Dj9DObCy.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Loading module from “http://localhost:4280/_app/immutable/chunks/preload-helper.D6kgxu3v.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Loading module from “http://localhost:4280/_app/immutable/chunks/index.YNrA3HLd.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Loading module from “http://localhost:4280/_app/immutable/nodes/0.CEPFXPZT.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Loading module from “http://localhost:4280/_app/immutable/chunks/Button.DLTS_h23.js” was blocked because of a disallowed MIME type (“”).
[localhost:4280](http://localhost:4280/)
Loading module from “http://localhost:4280/_app/immutable/chunks/bundle-mjs.BJdXCQDb.js” was blocked because of a disallowed MIME type (“”).

swa-cli.config.json

{
    "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
    "configurations": {
        "basel": {
            "outputLocation": "./build/static",
            "apiLocation": "./build/server",
            "appBuildCommand": "npm run build",
            "run": "vite dev",
            "appDevserverUrl": "http://localhost:5173",
            "dataApiLocation": "swa-db-connections",
            "swaConfigLocation": "./build"
        }
    }
}

I run local development with swa build && swa start. Is this the correct way to support SWA CLI? I'm trying to resolve an issue where if I don't specify the swaConfigLocation then I have to maintain a staticwebapp.config.json in the root of my repo just for local development. This leads to duplicate config entries between staticwebapp.config.json and svelte.config.js and if I commit this to my repo then the entire app stops serving in Azure. Trying to determine what the proper setup looks like for development purposes between this and SWA CLI.

This is just one of the issues I'm encountering unfortunately. For some reason my form POST actions are returning a 405 Method Not Allowed when I run via the SWA CLI and I'm not sure why that's happening but it led me to try and fix my local development configuration. The same form submission I do against http://localhost:5173 will succeed, but proxied through swa cli, it won't and result in 405 method not allowed :/

uioporqwerty commented 2 months ago

I tried out some of the suggestions here as well in a fresh repo: https://github.com/geoffrich/svelte-adapter-azure-swa/issues/96

But if you do the following config:

{
  "configurations": {
    "app": {
      "outputLocation": "./build/static",
      "apiLocation": "./build/server",
      "run": "npx vite dev",
      "swaConfigLocation": "./build",
      "appDevserverUrl": "http://localhost:5173"
    }
  }
}

Then the form submission works great but you lose HMR after the initial POST as you're left with the errors described above where _app assets don't resolve correctly. Is there another change needed in the proxy vite plugin to support routing to _app while keeping hot reloading working?

geoffrich commented 2 months ago

Hello! Can you provide a self-contained repo reproducing the issue?

It's worth noting that the SWA CLI isn't fully supported with this adapter - that's what #96 is tracking.