Quick Start Guide

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

src/
├── routes/
│   ├── +page.svelte          # Page component
│   ├── +page.ts              # Universal load function
│   ├── +page.server.ts       # Server load function
│   ├── +layout.svelte        # Layout component
│   ├── +layout.ts            # Layout load function
│   ├── +layout.server.ts     # Layout server load function
│   ├── +error.svelte         # Error page
│   ├── [slug]/
│   │   └── +page.svelte      # Dynamic route
│   └── api/
│       └── +server.ts        # API endpoint
├── lib/                       # Shared components and utilities
└── app.d.ts                  # Type definitions

// src/routes/+page.svelte
<script>
  export let data;
</script>

<h1>{data.title}</h1>
<p>{data.message}</p>

// src/routes/+page.ts (universal - runs on server and client)
export async function load({ fetch }) {
  const response = await fetch('/api/data');
  const data = await response.json();
  return { data };
}

// src/routes/+page.server.ts (server-only - has access to cookies, locals)
export async function load({ cookies, locals }) {
  const user = locals.user;
  return { user };
}

// src/routes/api/data/+server.ts
import { json } from '@sveltejs/kit';

export async function GET() {
  return json({ message: 'Hello from API' });
}

export async function POST({ request }) {
  const data = await request.json();
  return json({ received: data });
}

// src/routes/+page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');
    
    if (!email) {
      return fail(400, { email, missing: true });
    }
    
    // Process form
    redirect(303, '/success');
  }
};

<!-- src/routes/+page.svelte -->
<script>
  import { enhance } from '$app/forms';
  export let form;
</script>

<form method="POST" use:enhance>
  <input name="email" type="email" />
  {#if form?.missing}
    <p>Email is required</p>
  {/if}
  <button>Submit</button>
</form>

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};

export default config;