SvelteKit + adapter Static requires outDir="static"

[Tommertom]

Hi

when running the SvelteKit guide to setup the plugin, you need to configure outDir to be "static" otherwise adapter static overwrites the sw+manifest generated to build.

And yo need to run the command basically twice, because adapter static apparently does not pick the resulting files anymore.

This how it works (almost) - generating to static so I can pick it up for build -

.....
.svelte-kit/output/client/_app/immutable/chunks/index-1c8a281e.js                                 9.50 kB │ gzip:   4.02 kB
.svelte-kit/output/client/_app/immutable/start-d8fce51b.js                                       29.19 kB │ gzip:  10.69 kB
.svelte-kit/output/client/_app/immutable/chunks/index4-df3e774f.js                               32.59 kB │ gzip:  12.66 kB
.svelte-kit/output/client/_app/immutable/components/pages/_page.svelte-25a1c2d4.js               35.21 kB │ gzip:  10.39 kB
.svelte-kit/output/client/_app/immutable/chunks/swiper.bundle-2b70fa67.js                        95.69 kB │ gzip:  25.84 kB
.svelte-kit/output/client/_app/immutable/chunks/_layout-f42120d7.js                             934.64 kB │ gzip: 168.55 kB

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

PWA v0.14.1
mode      generateSW
precache  79 entries (3353.50 KiB)
files generated
  static\sw.js
  static\workbox-7369c0e1.js

> Using @sveltejs/adapter-static
  Wrote site to "build"
  ✔ done

C:\Data\src\rommelzolder\ionic-sveltekit-ssr-demo>

const pwaConfiguration = {
    outDir: './static',
    includeAssets: ['favicon.svg', 'favicon.ico', 'robots.txt', 'apple-touch-icon.png', 'dist/*'],
    base: '/',
    scope: '/',
    manifest: pwaManifest
}

content of build: no sw.js and workbox-.js nor manifest. content of static: has sw.js and workbox-.js

Example repo - https://github.com/Tommertom/ionic-sveltekit-ssr-demo

Please note, this repo already has a manifest file in static (empty) for other reasons.

[userquin]

@Tommertom you should file the issue on PWA SvelteKit integration repo not in docs repo

Anyway, if you're using latest kit, it seems to be broken, we're working to fix it (SvelteKit changes). You can modify your repo using kit 1.0.6 and try again, clear output folders.

We don't need to change anything in pwa kit integration, the pwa kit integration will generate pwa stuff on internal kit build output folder:

• kit client build (vite write bundle hook)
• pwa build (vite close bundle hook): will show a workbox build warning since there is no html pages generated yet
• kit server build (vite write bundle hook)
• kit prerender (vite write bundle hook): will run the prerender process, generating any required html page
• pwa build (vite close bundle hook: sequential to true with order pre): will generate pwa stuff on .sveltekit/output/client folder
• kit adapter (vite close bundle hook: sequential to true with no order): the adapter will copy build assets from internal build kit folder to the corresponding build output folder

In some kit version (IIRC 1.3.2), Rich Harris changed kit internal build process

EDIT: using latest Vite (4.1) it seems we also need to fix vite plugin pwa since we're changing only the sequential hook, and we also need to change the order in build plugin:

PWABuildPlugin, check sequential closeBundle hook: kit pwa integration will provide that entry with pre to allow run before kit adapter process:

export function BuildPlugin(ctx: PWAPluginContext) {
  return <Plugin>{
    name: 'vite-plugin-pwa:build',
    enforce: 'post',
    apply: 'build',
    ...
  }
}

We need to change it to something like this (I have a local test for it):

export function BuildPlugin(ctx: PWAPluginContext) {
  return <Plugin>{
    name: 'vite-plugin-pwa:build',
    enforce: ctx.userOptions?.integration?.closeBundleOrder ?? 'post',
    apply: 'build',
    ...
  }
}

[Tommertom]

Ok thx @userquin - I still need to raise this issue somewhere else?

So here I reckon ? https://github.com/vite-pwa/sveltekit

[userquin]

Ok thx @userquin - I still need to raise this issue somewhere else?

No