> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/sveltejs/kit/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick start

> Get started building your first SvelteKit application in minutes

The easiest way to start building a SvelteKit app is to run `npx sv create`:

<Steps>
  <Step title="Create a new project">
    Run the following command to scaffold a new SvelteKit project:

    ```bash theme={null}
    npx sv create my-app
    cd my-app
    ```

    The CLI will ask if you'd like to set up some basic tooling such as TypeScript, ESLint, and Prettier. Choose the options that work best for your project.

    <Tip>
      See the [CLI documentation](https://svelte.dev/docs/cli/overview) for more information about available options.
    </Tip>
  </Step>

  <Step title="Install dependencies">
    If you didn't install dependencies during project creation, run:

    ```bash theme={null}
    npm install
    ```

    <Note>
      You can use `npm`, `pnpm`, `yarn`, or `bun` as your package manager.
    </Note>
  </Step>

  <Step title="Start the development server">
    Launch the development server:

    ```bash theme={null}
    npm run dev
    ```

    Your app will be running at [http://localhost:5173](http://localhost:5173). The development server features hot module replacement, so changes you make will be reflected instantly in the browser.
  </Step>

  <Step title="Build your first page">
    Try editing the files to get a feel for how everything works. Let's create a simple page.

    Edit `src/routes/+page.svelte`:

    ```svelte theme={null}
    <script>
      /** @type {import('./$types').PageData} */
      export let data;
    </script>

    <h1>Welcome to SvelteKit</h1>
    <p>The answer is {data.answer}</p>
    ```

    Create `src/routes/+page.js` to load data:

    ```javascript theme={null}
    /** @type {import('@sveltejs/kit').Load} */
    export async function load({ fetch }) {
      const res = await fetch('/api/answer');
      const { answer } = await res.json();
      return { answer };
    }
    ```

    Create an API endpoint at `src/routes/api/answer/+server.js`:

    ```javascript theme={null}
    import { json } from '@sveltejs/kit';

    export function GET() {
      return json({ answer: 42 });
    }
    ```
  </Step>
</Steps>

## Two basic concepts

There are two fundamental concepts to understand:

1. **Each page is a Svelte component** — Pages are defined in `.svelte` files that export your component
2. **You create pages by adding files to `src/routes`** — The file structure determines your app's routes

These pages are server-rendered by default so that a user's first visit is as fast as possible, then a client-side app takes over for subsequent navigation.

## Editor setup

We recommend using [Visual Studio Code](https://code.visualstudio.com/download) with [the Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), but [support also exists for numerous other editors](https://sveltesociety.dev/collection/editor-support-c85c080efc292a34).

### VS Code extensions

<CardGroup cols={2}>
  <Card title="Svelte for VS Code" icon="puzzle-piece">
    Provides syntax highlighting, IntelliSense, and more for Svelte components
  </Card>

  <Card title="Svelte Intellisense" icon="lightbulb">
    Auto-completion and type checking for Svelte files
  </Card>
</CardGroup>

## Building for production

To create a production version of your app:

<CodeGroup>
  ```bash npm theme={null}
  npm run build
  ```

  ```bash pnpm theme={null}
  pnpm build
  ```

  ```bash yarn theme={null}
  yarn build
  ```

  ```bash bun theme={null}
  bun run build
  ```
</CodeGroup>

You can preview the production build with:

<CodeGroup>
  ```bash npm theme={null}
  npm run preview
  ```

  ```bash pnpm theme={null}
  pnpm preview
  ```

  ```bash yarn theme={null}
  yarn preview
  ```

  ```bash bun theme={null}
  bun run preview
  ```
</CodeGroup>

<Warning>
  The preview command is for local testing only. For production deployment, you need to use an adapter.
</Warning>

## Deployment

To deploy your app, you'll need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. Adapters are small plugins that take the built app and prepare it for deployment to your platform of choice.

### Quick deployment options

<Tabs>
  <Tab title="Auto (recommended)">
    The default adapter automatically detects your deployment platform:

    ```javascript svelte.config.js theme={null}
    import adapter from '@sveltejs/adapter-auto';

    export default {
      kit: {
        adapter: adapter()
      }
    };
    ```

    Works with Vercel, Netlify, Cloudflare Pages, and more.
  </Tab>

  <Tab title="Node.js">
    For Node.js servers:

    ```bash theme={null}
    npm install @sveltejs/adapter-node
    ```

    ```javascript svelte.config.js theme={null}
    import adapter from '@sveltejs/adapter-node';

    export default {
      kit: {
        adapter: adapter()
      }
    };
    ```
  </Tab>

  <Tab title="Static">
    For static site generation:

    ```bash theme={null}
    npm install @sveltejs/adapter-static
    ```

    ```javascript svelte.config.js theme={null}
    import adapter from '@sveltejs/adapter-static';

    export default {
      kit: {
        adapter: adapter()
      }
    };
    ```
  </Tab>

  <Tab title="Vercel">
    For Vercel with platform-specific features:

    ```bash theme={null}
    npm install @sveltejs/adapter-vercel
    ```

    ```javascript svelte.config.js theme={null}
    import adapter from '@sveltejs/adapter-vercel';

    export default {
      kit: {
        adapter: adapter()
      }
    };
    ```
  </Tab>
</Tabs>

## Next steps

Now that you have a working SvelteKit app, explore these topics:

<CardGroup cols={2}>
  <Card title="Project structure" icon="folder-tree" href="/project-structure">
    Understand the files and folders in your project
  </Card>

  <Card title="Routing" icon="route" href="/core-concepts/routing">
    Learn how file-based routing works
  </Card>

  <Card title="Loading data" icon="database" href="/core-concepts/load">
    Fetch data for your pages
  </Card>

  <Card title="Form actions" icon="paper-plane" href="/core-concepts/form-actions">
    Handle form submissions
  </Card>
</CardGroup>