sveltejs-adapter-ipfs

Adapter for Svelte apps that prerenders your entire site as a collection of static files with support for IPFS.

Usage no npm install needed!

<script type="module">
  import sveltejsAdapterIpfs from 'https://cdn.skypack.dev/sveltejs-adapter-ipfs';
</script>

README

sveltejs-adapter-ipfs

Adapter for Svelte apps that prerenders your entire site as a collection of static files with support for IPFS.

This is based on adapter-static but add a post-processing step that do the following :

  • for all index.html (fix : https://github.com/sveltejs/kit/issues/595)

    • replace absolute link with their relative equivalent (corresponding to the depth of the index.html)
    • inject js script to generate the base path (folder on which the website is hosted) dynamically and asign it to window.BASE
    • use window.BASE for the base option passed to start
    • inject a script so all links in the header use full url, this allow favicon to work even after navigation

  • for the start-<hash>.js script:

  • for all css file (fix: https://github.com/sveltejs/kit/issues/1477)

    • replace absolute url(...) to relative path (relative to css file)

  • inject pages in service worker so service worker can cache them (fix: https://github.com/sveltejs/kit/issues/923)

Some of these are not specific to ipfs but this also illustrate what is missing in svelte kit

DEMO

repo : https://github.com/wighawag/sveltekit-ipfs-demo

Hosted :

on root path: https://bafybeifzv5mf7s5ccs6ah2ozdlag5irxpzv7lax5sesxonsxsosk43pmbq.ipfs.dweb.link/

on hash path: https://cloudflare-ipfs.com/ipfs/bafybeifzv5mf7s5ccs6ah2ozdlag5irxpzv7lax5sesxonsxsosk43pmbq/