svelte-vite-ssr

svelte-vite-ssr is a project template for building Svelte applications with a powerful router, SSR (Server-Side Rendering), CSR (Client-Side Rendering), HMR (Hot Module Replacement), <link rel="preload"> directives, and other useful features.

Demo

https://svelte-vite-ssr.pages.dev/

Create a Project from Template

In your project folder, run:

npm init svelte-vite-ssr
npm install

Run in SSR mode (Development)

npm run dev:ssr

Run in CSR mode (Development)

npm run dev:csr

Build SSR

Node.js Server:

npm run build:nodejs

Cloudflare Pages:

Deploy with `wrangler` CLI:

npm run build:cloudflare
wrangler pages publish dist/client

Deploy with Git:

Link your Git repository to Cloudflare Pages.
Set build configuration: Build command: npm run build:cloudflare Build output directory: /dist/client

Netlify Functions

Place src/adapters/netlify/netlify.toml in the root directory.
Deploy with netlify CLI or link your Git repository to Netlify.
Set environment variables in Netlify web UI: NODE_VERSION: 18

Netlify Edge Functions:

Place src/adapters/netlify-edge/netlify.toml in the root directory.
Deploy with netlify CLI or link your Git repository to Netlify.
Set environment variables in Netlify web UI: NODE_VERSION: 18 AWS_LAMBDA_JS_RUNTIME: nodejs18.x

Build CSR

npm run build:csr

Run Node.js SSR Server (Production)

npm run serve:nodejs

Run CSR Server (Preview)

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

npm run serve:csr

Features

Router

Check out svelte-pilot

Automatic image importing

In a svelte file, <img src="./path/to/img.png"> will automatically import and bundle the image file.

Passing Hashed CSS Class Names to Child Components

Check out svelte-preprocess-css-hash

Official svelte-preprocess

Check out svelte-preprocess

License

This project is licensed under the MIT License.