Home

Awesome

Multipage Svelte, Svelte MPA

This is starter template to create multiple-page application using plain Svelte, so just like SvelteKit static-adapter, but without unecessary complexity it introduces.

The purpose of this project is to make Svelte that defaults is component-based SPA into an statically-generated MPA (multi-page SPA, page+component-based). So for deployment you only need to rsync the .html, imported/external .css/.js and any other assets (images, fonts, non-.svelte files). It was originally built for Z template engine.

Creator: sameerveda

Specs/maintainer/sponsored by: kokizzu

💡 Why Svelte?

Rethinking Reactivity tl;dw

📰 Changelog

🉐 Specification

For example you have a project with specific structure:

_mycomponent/
  button.svelte
foo/
  _table.svelte
  bar.svelte --> will generate bar.html
  any.js
subpage/
  page3.svelte --> will generate page3.html
index.svelte --> will generate index.html
whatever.css
whatever.js
_layout.html

It would automatically generate 3 files: foo/bar.html, subpage/page3.html, and index.html.

  1. generate automatically .html foreach .svelte, for production build use npm run build:prod
  2. there no configuration, it should work as-is automatically, anything starts with underscore will not generate .html, eg. foo/_component1.svelte, or _components/table.svelte
  3. will look for _layout.html in current directory or nearest upper directories as base template
  4. can import properly other js, css, or svelte file (relative import)
  5. dev mode, eg. npm run dev, it would listen to localhost:5500 then livereload when changed like default svelte template project (will also autogenerate the .html files like spec number 1), there's also npm run watch if you have reverse proxy or backend that loads html that listen on another port
  6. using minimal set of npm dependencies and no outdated package (use ./update_deps.sh to update dependencies)
  7. generated html will not remove comments, especially one that used in Z template engine, like: /*! c1 */, #{c2}, [/* c3 */], or {/* c4 */}

🍴 Usage

Svelte-MPA is just consist of build.js, package.json, svelte.config.js, so you just need to copy those files to your project, then create _layout.html and one .svelte file to start. Or alternatively just clone whole directory manually or using degit and remove stuff that you don't need.

npm install -g degit                 # scaffolding helper
degit kokizzu/svelte-mpa myproject1  # clone this repo with new name
cd myproject1                        

npm install    # install dependencies
npm start      # start dev-server, auto rebuild
npm run watch  # auto rebuild without webserver, 
               # eg. if you use other webserver/reverse proxy locally

npm run build:prod  # build project for production
./deploy.sh         # example deployment script for single server

🏗️ How to update/upgrade from previous version?

just copy latest build.js to your project directory and then npm i or pnpm i

or if you want to use Svelte-4 from previous version that uses Svelte-3:

# copy latest build.js to your project directory
cp ../svelte-mpa/build.js .
cp ../svelte-mpa/svelte.config.js .

# upgrade package.json to svelte 4
npx svelte-migrate svelte-4 .

# update all dependencies (downloads svelte 4)
./update_deps.sh # or npm i # or pnpm i

⌨️ Dev Dependencies

🔥 ZERO production dependency. 🔥

❓ Why Svelte-MPA? Motivation

If you already have existing backend that wasn't written in NodeJS, you can have best of two worlds, multiple page with their own meta headers and content for SEO, and reactivity using Svelte for each page. Also with this you can remove the serialization/transport/hop-cost of default setup:

so for first request normally would be something like this:

[Browser] 
  --fetch-HTML--> 
    [SvelteKit/Next/Nuxt/other-SSR] 
      --fetch-API--> 
        [ExistingBackend]

or like this:

[Browser] (1st request)
  --fetch-HTML--> 
    [SvelteKit-static-adapter/generated-HTML] (fetch the HTML first without data)
[Browser] (2nd request)
  --fetch-API--> 
    [ExistingBackend] (fetch the JSON to populate data, then rerender)

became:

[Browser] (only need 1 request)
  --fetch-HTML+API--> 
    [ExistingBackend]

So your existing backend responsibility is to load the generated .html then replace the js variable or any template keyword with proper value for initial load/SEO. So not svelte's responsibility to request/preload the initial json content, but backend's responsibility (whatever existing backend langauge/framework you are using). Like SvelteKit, you can also use this as SSG. You can see example here

📈 TODO / Possible Improvement

`_layout.html`:
...
<script>
  let obj = {/* some_obj */}
  let arr = [/* some_arr */]
</script>

`bla.svelte`:
<script>
  let obj = (window||{}).obj || {};
  let arr = (window||{}).arr || [];
</script>

generated `bla.min.js` will be referenced by `bla.html`: 
<script src='bla.min.js?modifiedTime'></script>