Skip to content

Commit 8caa4b5

Browse files
committed
docs: improve getting started
1 parent 435da13 commit 8caa4b5

File tree

1 file changed

+106
-2
lines changed

1 file changed

+106
-2
lines changed

documentation/docs/01-introduction/02-getting-started.md

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
title: Getting started
33
---
44

5-
We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:
5+
We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/).
6+
7+
Create a new project with your preferred package manager:
8+
9+
**npm:**
610

711
```sh
812
npx sv create myapp
@@ -11,6 +15,35 @@ npm install
1115
npm run dev
1216
```
1317

18+
**yarn:**
19+
20+
```sh
21+
yarn dlx sv create myapp
22+
cd myapp
23+
yarn install
24+
yarn dev
25+
```
26+
27+
**pnpm:**
28+
29+
```sh
30+
pnpm dlx sv create myapp
31+
cd myapp
32+
pnpm install
33+
pnpm dev
34+
```
35+
36+
**bun:**
37+
38+
```sh
39+
bunx sv create myapp
40+
cd myapp
41+
bun install
42+
bun dev
43+
```
44+
45+
See the [CLI docs](../cli) for more information about the `sv` command line tool.
46+
1447
Don't worry if you don't know Svelte yet! You can ignore all the nice features SvelteKit brings on top for now and dive into it later.
1548

1649
## Alternatives to SvelteKit
@@ -21,12 +54,83 @@ You can also use Svelte directly with Vite by running `npm create vite@latest` a
2154
2255
There are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite.
2356

57+
## Installing Svelte in an existing project
58+
59+
If you have an existing project for example via [Inertia](https://inertiajs.com/) and want to add Svelte to it, you can install Svelte and [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) manually.
60+
61+
First, install Svelte and the Vite plugin:
62+
63+
**npm:**
64+
65+
```sh
66+
npm install --save-dev --save-exact svelte @sveltejs/vite-plugin-svelte
67+
```
68+
69+
**yarn:**
70+
71+
```sh
72+
yarn add --dev --exact svelte @sveltejs/vite-plugin-svelte
73+
```
74+
75+
**pnpm:**
76+
77+
```sh
78+
pnpm add --save-dev --save-exact svelte @sveltejs/vite-plugin-svelte
79+
```
80+
81+
**bun:**
82+
83+
```sh
84+
bun add --dev --exact svelte @sveltejs/vite-plugin-svelte
85+
```
86+
87+
Then, add the Svelte plugin to your `vite.config.js`:
88+
89+
```js
90+
import { defineConfig } from 'vite';
91+
import { svelte } from '@sveltejs/vite-plugin-svelte';
92+
93+
export default defineConfig({
94+
plugins: [
95+
svelte({
96+
/* plugin options */
97+
})
98+
]
99+
});
100+
```
101+
24102
## Editor tooling
25103

26104
The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/collection/editor-support-c85c080efc292a34) and tools as well.
27105

28-
You can also check your code from the command line using [`sv check`](https://github.com/sveltejs/cli).
106+
You can also check your code from the command line using [`sv check`](https://github.com/sveltejs/cli) to check for Unused CSS
107+
Svelte A11y hints, JavaScript/TypeScript compiler errors.
108+
109+
Alternatively, you can install `svelte-check` (powers `sv check`) directly:
110+
111+
**npm:**
29112

113+
```sh
114+
npm install --save-dev --save-exact svelte-check
115+
```
116+
117+
**yarn:**
118+
119+
```sh
120+
yarn add --dev --exact svelte-check
121+
```
122+
123+
**pnpm:**
124+
125+
```sh
126+
pnpm add --save-dev --save-exact svelte-check
127+
```
128+
129+
**bun:**
130+
131+
```sh
132+
bun add --dev --exact svelte-check
133+
```
30134

31135
## Getting help
32136

0 commit comments

Comments
 (0)