Example Legacy Issue

Svelte Pilot errors when building using the Vite Legacy plugin.

To see the issue compare running the two following builds using npx vite preview

Note: This does not happen in dev mode

Modern build

Run an SPA build using the original vite.config.ts file from the repository template.

npx vite build

This runs as expected.

Legacy build

Run a legacy build using a custom Vite config file which adds the Vite Legacy plugin which disables modern chunks from being transpiled: renderModernChunks: false

npx vite build -c vite.legacy.config.ts

This build fails when running the app.

index-legacy-DmWxBHHi.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'fragment')

---

Svelte Pilot Template

A template based on the Svelte Pilot routing library, offering server-side rendering (SSR) and other rich features.

Core Features

• Multiple Deployment Modes: Supports SSR (Server-Side Rendering), SSG (Static Site Generation), SPA (Single Page Application), and serverless functions.
• Powerful Routing and Layout System: Supported by Svelte Pilot.
• Integrated with TypeScript: For type safety and robust coding.
• Integrated with PostCSS and Tailwind CSS: Ready to use without configuration.
• Convenient Image Import: With svelte-preprocess-import-assets, you can directly import images using the <img src="./img.png"> tag without manually writing an import.
• Enhanced CSS Isolation: Through svelte-preprocess-css-hash, <Child class="--child"> becomes <Child class="--child-HaShEd">.

Quick Preview

Experience the editable demo on the StackBlitz Online IDE.

Create a Project

npm create svelte-pilot my-svelte-app
cd my-svelte-app
npm i

Or:

mkdir my-svelte-app
cd my-svelte-app
npm init svelte-pilot
npm i

Development

npm run dev:spa           # Develop in SPA mode
npm run dev:ssr           # Develop in SSR mode
PORT=8080 npm run dev:ssr # Specify the port.

Build

npm run build:spa         # Build SPA site
npm run build:ssr         # node.js SSR server
npm run build:ssg         # Generate static site. Configure URLs in the `ssg` field of `package.json`.
NOJS=1 npm run build:ssg  # Generate static site without JS
npm run build:cloudflare  # Cloudflare Pages

# Netlify Functions
cp src/adapters/netlify/netlify.toml .
npm run build:netlify

# Netlify Edge Functions
cp src/adapters/netlify-edge/netlify.toml .
npm run build:netlify-edge

Run

npx sirv-cli dist --single --host # SPA
npx sirv-cli dist --host          # SSG
npm run start:ssr                 # node.js SSR server.
PORT=8080 npm run start:ssr       # Specify the port.

Deploy to the Cloud

Cloudflare Pages

Deploy using wrangler CLI:

wrangler pages deploy dist

Deploy using Git

1. Link your Git repository to Cloudflare Pages.
2. Set up the build configuration:
   • Build command: npm run build:cloudflare
   • Build output directory: dist

Netlify

Deploy using the netlify deploy CLI, or link your Git repository to Netlify.

FAQ

Can't run on Windows

npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"

How to set shell for npm run-scripts in Windows