svelte-vite-ssr

A Svelte project template with a powerful router, SSR (Server-Side Rendering), CSR (Client-Side Rendering), HMR (Hot Module Replacement), <link rel="preload"> directives, and other nice features.

Demo

SSR using AWS Lambda function hosted on Netlify.

https://svelte-vite-ssr.netlify.app/

Commands

Create a project from template

In your project folder:

npm init svelte-vite-ssr
npm install

Run in SSR mode (dev)

npm run dev:ssr

Run in CSR mode (dev)

npm run dev:csr

Build SSR

npm run build:ssr

Build CSR

npm run build:csr

Run SSR (production)

npm run serve:ssr

Run CSR (preview)

In production, you should use web server such as nginx.

npm run serve:csr

Features

Router

Checkout svelte-pilot

Auto import images

In svelte file, <img src="./path/to/img.png"> just works, the image file will be auto imported and bundled.

Passing hashed css classname to child component

Checkout svelte-preprocess-css-hash

Official svelte-preprocess

Checkout svelte-preprocess

License

MIT