sveltejs · Rich-Harris · Jul 5, 2022 · Jun 30, 2022 · Jul 1, 2022 · Jul 1, 2022
diff --git a/.changeset/hip-trainers-sort.md b/.changeset/hip-trainers-sort.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] require vite.config.js
diff --git a/.changeset/light-kings-beam.md b/.changeset/light-kings-beam.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Add vite.config.js to the create-svelte templates
diff --git a/.changeset/proud-phones-hear.md b/.changeset/proud-phones-hear.md
@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+[breaking] graduate @sveltejs/kit/vite from experimental
diff --git a/.changeset/unlucky-oranges-exercise.md b/.changeset/unlucky-oranges-exercise.md
@@ -0,0 +1,6 @@
+---
+'create-svelte': patch
+'@sveltejs/kit': patch
+---
+
+[breaking] switch to vite CLI for dev, build, and preview commands
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,5 @@ yarn.lock
 .cloudflare
 .pnpm-debug.log
 .netlify
-.turbo
+.turbo
+.vercel
diff --git a/documentation/docs/07-service-workers.md b/documentation/docs/07-service-workers.md
@@ -10,4 +10,4 @@ In SvelteKit, if you have a `src/service-worker.js` file (or `src/service-worker
 
 Inside the service worker you have access to the [`$service-worker` module](/docs/modules#$service-worker).
 
-Because it needs to be bundled (since browsers don't yet support `import` in this context), and depends on the client-side app's build manifest, **service workers only work in the production build, not in development**. To test it locally, use [`svelte-kit preview`](/docs/cli#svelte-kit-preview).
+Because it needs to be bundled (since browsers don't yet support `import` in this context), and depends on the client-side app's build manifest, **service workers only work in the production build, not in development**. To test it locally, use `vite preview`.
diff --git a/documentation/docs/10-adapters.md b/documentation/docs/10-adapters.md
@@ -28,7 +28,7 @@ To create a simple Node server, install the [`@sveltejs/adapter-node`](https://g
 +import adapter from '@sveltejs/adapter-node';
 ```
 
-With this, [svelte-kit build](/docs/cli#svelte-kit-build) will generate a self-contained Node app inside the `build` directory. You can pass options to adapters, such as customising the output directory:
+With this, `vite build` will generate a self-contained Node app inside the `build` directory. You can pass options to adapters, such as customising the output directory:
 
 ```diff
 /// file: svelte.config.js

diff --git a/documentation/docs/13-cli.md b/documentation/docs/13-cli.md
@@ -2,48 +2,22 @@
 title: Command Line Interface
 ---
 
-SvelteKit includes a command line interface for building and running your app.
+SvelteKit projects use [Vite](https://vitejs.dev), meaning you'll mostly use its CLI (albeit via `npm run dev/build/preview` scripts):
 
-In the default project template `svelte-kit dev`, `svelte-kit build` and `svelte-kit preview` are aliased as `npm run dev`, `npm run build` and `npm run preview` respectively. You can also invoke the CLI with [npx](https://www.npmjs.com/package/npx):
+- `vite dev` — start a development server
+- `vite build` — build a production version of your app
+- `vite preview` — run the production version locally
 
-```bash
-npx svelte-kit dev
-```
-
-### svelte-kit dev
-
-Starts a development server. It accepts the following options:
-
-- `-p`/`--port` — which port to start the server on
-- `-o`/`--open` — open a browser tab once the server starts
-- `--host` — expose the server to the network.
-- `--https` — launch an HTTPS server using a self-signed certificate. Useful for testing HTTPS-only features on an external device
-
-> This command will fail if the specified (or default) port is unavailable. To use an alternative port instead of failing, set the [`config.kit.vite.server.strictPort`](/docs/configuration#vite) option to `false`.
-
-### svelte-kit build
-
-Builds a production version of your app, and runs your adapter if you have one specified in your [config](/docs/configuration). It accepts the following option:
-
-- `--verbose` — log more detail
-
-After building the app, you can reference the documentation of your chosen [adapter](/docs/adapters) and hosting platform for specific instructions on how to serve your app.
-
-### svelte-kit preview
-
-After you've built your app with `svelte-kit build`, you can start the production version (irrespective of any adapter that has been applied) locally with `svelte-kit preview`. This is intended for testing the production build locally, **not for serving your app**, for which you should always use an [adapter](/docs/adapters).
-
-Like `svelte-kit dev`, it accepts the following options:
-
-- `-p`/`--port`
-- `-o`/`--open`
-- `--host`
-- `--https`
+However SvelteKit includes its own CLI for creating distributable packages and initialising your project:
 
 ### svelte-kit package
 
 > `svelte-kit package` is currently experimental and is not subject to Semantic Versioning rules. Non-backward compatible changes may occur in any future release.
 
-For package authors, see [packaging](/docs/packaging). `svelte-kit package` accepts the following options:
+See [packaging](/docs/packaging). `svelte-kit package` accepts the following options:
 
 - `-w`/`--watch` — watch files in `src/lib` for changes and rebuild the package
+
+### svelte-kit sync
+
+`svelte-kit sync` creates the generated files for your project such as types and a `tsconfig.json`. When you create a new project, it is listed as the `prepare` script and will be run automatically as part of the npm lifecycle, so you should not ordinarily have to run this command.
diff --git a/documentation/docs/14-configuration.md b/documentation/docs/14-configuration.md
@@ -90,7 +90,7 @@ export default config;
 
 ### adapter
 
-Required when running `svelte-kit build` and determines how the output is converted for different platforms. See [Adapters](/docs/adapters).
+Run when executing `vite build` and determines how the output is converted for different platforms. See [Adapters](/docs/adapters).
 
 ### alias
 

diff --git a/documentation/docs/15-types.md b/documentation/docs/15-types.md
@@ -117,7 +117,7 @@ Others are required for SvelteKit to work properly, and should also be left unto
 		// markup, so we need this
 		"preserveValueImports": true,
 
-		// This ensures both `svelte-kit build`
+		// This ensures both `vite build`
 		// and `svelte-kit package` work correctly
 		"lib": ["esnext", "DOM"],
 		"moduleResolution": "node",

diff --git a/documentation/docs/80-migrating.md b/documentation/docs/80-migrating.md
@@ -26,9 +26,9 @@ Remove `sapper` from your `devDependencies` and replace it with `@sveltejs/kit`
 
 Any scripts that reference `sapper` should be updated:
 
-- `sapper build` should become [`svelte-kit build`](/docs/cli#svelte-kit-build) using the Node [adapter](/docs/adapters)
-- `sapper export` should become [`svelte-kit build`](/docs/cli#svelte-kit-build) using the static [adapter](/docs/adapters)
-- `sapper dev` should become [`svelte-kit dev`](/docs/cli#svelte-kit-dev)
+- `sapper build` should become `vite build` using the Node [adapter](/docs/adapters)
+- `sapper export` should become `vite build` using the static [adapter](/docs/adapters)
+- `sapper dev` should become `vite dev`
 - `node __sapper__/build` should become `node build`
 
 ### Project files
@@ -191,4 +191,4 @@ export async function handle({ event, resolve }) {
 }
 ```
 
-Note that `prerendering` is `false` when using `svelte-kit preview` to test the production build of the site, so to verify the results of minifying, you'll need to inspect the built HTML files directly.
+Note that `prerendering` is `false` when using `vite preview` to test the production build of the site, so to verify the results of minifying, you'll need to inspect the built HTML files directly.
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
 	"homepage": "https://github.com/sveltejs/kit#readme",
 	"devDependencies": {
 		"@changesets/cli": "^2.22.0",
-		"@rollup/plugin-commonjs": "^21.1.0",
+		"@rollup/plugin-commonjs": "^22.0.1",
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^13.3.0",
 		"@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",

diff --git a/packages/adapter-netlify/package.json b/packages/adapter-netlify/package.json
@@ -40,7 +40,7 @@
 	},
 	"devDependencies": {
 		"@netlify/functions": "^1.0.0",
-		"@rollup/plugin-commonjs": "^21.1.0",
+		"@rollup/plugin-commonjs": "^22.0.1",
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^13.3.0",
 		"@sveltejs/kit": "workspace:*",

diff --git a/packages/adapter-static/package.json b/packages/adapter-static/package.json
@@ -36,6 +36,7 @@
 		"sirv": "^2.0.2",
 		"svelte": "^3.48.0",
 		"typescript": "^4.7.2",
-		"uvu": "^0.5.3"
+		"uvu": "^0.5.3",
+		"vite": "^2.9.13"
 	}
 }
diff --git a/packages/adapter-static/test/apps/prerendered/package.json b/packages/adapter-static/test/apps/prerendered/package.json
@@ -3,13 +3,14 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "../../../../kit/svelte-kit.js dev",
-		"build": "../../../../kit/svelte-kit.js build",
-		"start": "../../../../kit/svelte-kit.js start"
+		"dev": "vite dev",
+		"build": "vite build",
+		"start": "vite start"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "next",
-		"svelte": "^3.48.0"
+		"@sveltejs/kit": "workspace:*",
+		"svelte": "^3.48.0",
+		"vite": "^2.9.13"
 	},
 	"type": "module"
 }
diff --git a/packages/adapter-static/test/apps/prerendered/svelte.config.js b/packages/adapter-static/test/apps/prerendered/svelte.config.js
@@ -7,12 +7,6 @@ const config = {
 
 		prerender: {
 			default: true
-		},
-
-		vite: {
-			build: {
-				minify: false
-			}
 		}
 	}
 };

diff --git a/packages/adapter-static/test/apps/prerendered/vite.config.js b/packages/adapter-static/test/apps/prerendered/vite.config.js
@@ -0,0 +1,11 @@
+const { sveltekit } = await import(process.env.SVELTEKIT_PLUGIN);
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	build: {
+		minify: false
+	},
+	plugins: [sveltekit()]
+};
+
+export default config;
diff --git a/packages/adapter-static/test/apps/spa/package.json b/packages/adapter-static/test/apps/spa/package.json
@@ -3,15 +3,16 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "../../../../kit/svelte-kit.js dev",
-		"build": "../../../../kit/svelte-kit.js build",
+		"dev": "vite dev",
+		"build": "vite build",
 		"start": "sirv -s 200.html build"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-node": "next",
-		"@sveltejs/kit": "next",
+		"@sveltejs/adapter-node": "workspace:*",
+		"@sveltejs/kit": "workspace:*",
 		"sirv-cli": "^2.0.2",
-		"svelte": "^3.48.0"
+		"svelte": "^3.48.0",
+		"vite": "^2.9.13"
 	},
 	"type": "module"
 }
diff --git a/packages/adapter-static/test/apps/spa/svelte.config.js b/packages/adapter-static/test/apps/spa/svelte.config.js
@@ -5,13 +5,7 @@ const config = {
 	kit: {
 		adapter: adapter({
 			fallback: '200.html'
-		}),
-
-		vite: {
-			build: {
-				minify: false
-			}
-		}
+		})
 	}
 };
 

diff --git a/packages/adapter-static/test/apps/spa/vite.config.js b/packages/adapter-static/test/apps/spa/vite.config.js
@@ -0,0 +1,11 @@
+const { sveltekit } = await import(process.env.SVELTEKIT_PLUGIN);
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	build: {
+		minify: false
+	},
+	plugins: [sveltekit()]
+};
+
+export default config;
diff --git a/packages/adapter-static/test/utils.js b/packages/adapter-static/test/utils.js
@@ -30,11 +30,13 @@ export function run(app, callback) {
 		try {
 			const cwd = fileURLToPath(new URL(`apps/${app}`, import.meta.url));
 			const mode = process.env.CI ? 'dist' : 'src';
-			const cli_path = fileURLToPath(new URL(`../../kit/${mode}/cli.js`, import.meta.url));
+
+			process.env.SVELTEKIT_PLUGIN =
+				mode === 'dist' ? '@sveltejs/kit/vite' : '../../../../kit/src/vite/index.js';
 
 			rimraf(`${cwd}/build`);
 
-			await spawn(`"${process.execPath}" ${cli_path} build`, {
+			await spawn('npm run build', {
 				cwd,
 				stdio: 'inherit',
 				shell: true

diff --git a/packages/create-svelte/templates/default/package.json b/packages/create-svelte/templates/default/package.json
@@ -3,17 +3,18 @@
 	"version": "0.0.2-next.0",
 	"private": true,
 	"scripts": {
-		"dev": "svelte-kit dev",
-		"build": "svelte-kit build --verbose",
+		"dev": "vite dev",
+		"build": "vite build",
 		"package": "svelte-kit package",
-		"preview": "svelte-kit preview"
+		"preview": "vite preview"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
 		"svelte": "^3.48.0",
 		"svelte-preprocess": "^4.10.6",
-		"typescript": "^4.7.2"
+		"typescript": "^4.7.2",
+		"vite": "^2.9.13"
 	},
 	"type": "module",
 	"dependencies": {

diff --git a/packages/create-svelte/templates/default/package.template.json b/packages/create-svelte/templates/default/package.template.json
@@ -2,16 +2,17 @@
 	"name": "~TODO~",
 	"version": "0.0.1",
 	"scripts": {
-		"dev": "svelte-kit dev",
-		"build": "svelte-kit build",
+		"dev": "vite dev",
+		"build": "vite build",
 		"package": "svelte-kit package",
-		"preview": "svelte-kit preview",
+		"preview": "vite preview",
 		"prepare": "svelte-kit sync"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
-		"svelte": "^3.46.0"
+		"svelte": "^3.46.0",
+		"vite": "^2.9.13"
 	},
 	"type": "module",
 	"dependencies": {

diff --git a/packages/create-svelte/templates/default/vite.config.js b/packages/create-svelte/templates/default/vite.config.js
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;
diff --git a/packages/create-svelte/templates/skeleton/package.template.json b/packages/create-svelte/templates/skeleton/package.template.json
@@ -2,16 +2,17 @@
 	"name": "~TODO~",
 	"version": "0.0.1",
 	"scripts": {
-		"dev": "svelte-kit dev",
-		"build": "svelte-kit build",
+		"dev": "vite dev",
+		"build": "vite build",
 		"package": "svelte-kit package",
-		"preview": "svelte-kit preview",
+		"preview": "vite preview",
 		"prepare": "svelte-kit sync"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"svelte": "^3.44.0"
+		"svelte": "^3.44.0",
+		"vite": "^2.9.13"
 	},
 	"type": "module"
 }
diff --git a/packages/create-svelte/templates/skeleton/vite.config.js b/packages/create-svelte/templates/skeleton/vite.config.js
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ In SvelteKit, if you have a `src/service-worker.js` file (or `src/service-worker

		Inside the service worker you have access to the [`$service-worker` module](/docs/modules#$service-worker).

		Because it needs to be bundled (since browsers don't yet support `import` in this context), and depends on the client-side app's build manifest, service workers only work in the production build, not in development. To test it locally, use [`svelte-kit preview`](/docs/cli#svelte-kit-preview).
		Because it needs to be bundled (since browsers don't yet support `import` in this context), and depends on the client-side app's build manifest, service workers only work in the production build, not in development. To test it locally, use `vite preview`.