sveltekit

intro

We will focus here on Svelte usage for static websites (JAMstack arch), as opposed to Server-Side Rendering (SSR, check Svelte docs)

install

nodeenv

First install nodeenv in python virtualenv, then install a specific node version

$ virtualenv nodeenv
$ cd nodeenv
$ source bin/activate
(nodeenv) $ pip3 install nodeenv
(nodeenv) $ nodeenv --version
(nodeenv) $ noveenv --list
(nodeenv) $ nodeenv --node=18.4.0 --jobs=4 node_18_4_0
(nodeenv) $ deactivate
$ cd node_18_4_0
$ source bin/activate
(node_18_4_0) $ node -v
(node_18_4_0) $ deactivate_node

sveltekit

(node_...)$ npm init svelte project
(node_...)$ cd project
(node_...)$ npm install
(node_...)$ npm @sveltejs/adapter-static    // for SSG-only mode
(node_...)$ npm run dev

config

/svelte.config.js

import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        adapter: adapter(),
        paths: { base: '/subroute' } // remove this live if base is '/'
    }
};

export default config

/src/hooks.js

Set SSR off

/src/hooks.js

/** @type {import ('@sveltejs/kit').Handle} */
export async function handle({event, resolve}) {
    const response = await resolve(event, { ssr: false });
    return response
}

usage

/src/app.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%svelte.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %svelte.head%
    </head>
    <body>
        <div>%svelte.body%</div>
    </body>
</html>

tips

REST routes

Create directories/file structure, /src/item/[id]/show.svelte or /src/company/[name]/year/[year].svelte

<script>
import {page} from '$app/stores'
<script>

Item id: {$page.params.id}