Bootcamp

# ===== Objectives =====
# 1. Scaffold a SvelteKit app
# 2. List + detail pages with server loads
# 3. Form action with progressive enhancement
# 4. Cookie session
# 5. Deploy

# ===== 0-5 min: scaffold =====
# npm create svelte@latest shop
# choose: 'Skeleton project', TypeScript, ESLint, Prettier
# cd shop && npm install
# npm run dev

# ===== 5-20 min: list page with server load =====
# src/routes/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
  // Pretend DB call
  return {
    orders: [
      { id: 'o1', customer: 'alice', total_cents: 4995, status: 'paid' },
      { id: 'o2', customer: 'bob',   total_cents: 9900, status: 'new' },
    ],
  };
};

# src/routes/+page.svelte
<script lang='ts'>
  export let data;
</script>

<h1>Orders</h1>
<ul>
  {#each data.orders as o}
    <li>
      <a href='/orders/{o.id}'>{o.customer} - ${(o.total_cents / 100).toFixed(2)} ({o.status})</a>
    </li>
  {/each}
</ul>

# ===== 20-30 min: detail page with param =====
# src/routes/orders/[id]/+page.server.ts
export const load = async ({ params }) => {
  // Look up the order
  const order = { id: params.id, customer: 'alice', total_cents: 4995, status: 'paid' };
  if (!order) throw error(404, 'not found');
  return { order };
};

# src/routes/orders/[id]/+page.svelte
<script>
  export let data;
</script>
<h1>Order {data.order.id}</h1>
<p>{data.order.customer} -- ${data.order.total_cents / 100}</p>

# ===== 30-45 min: form action with progressive enhancement =====
# src/routes/orders/[id]/+page.server.ts (extend)
import { redirect } from '@sveltejs/kit';

export const actions = {
  cancel: async ({ params }) => {
    // Update the DB
    console.log('cancel', params.id);
    throw redirect(303, '/');
  },
};

# +page.svelte
<script>
  import { enhance } from '$app/forms';
</script>

<form method='POST' action='?/cancel' use:enhance>
  <button>Cancel order</button>
</form>

# Works without JS (full page submit). With JS, use:enhance upgrades to fetch.

# ===== 45-55 min: cookie session + a guard =====
# src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  const sid = event.cookies.get('sid');
  if (sid) event.locals.user = { id: 'u1' };   // pretend DB lookup
  return resolve(event);
};

# src/routes/account/+page.server.ts
import { redirect } from '@sveltejs/kit';
export const load = ({ locals, url }) => {
  if (!locals.user) throw redirect(303, '/login?next=' + url.pathname);
  return { user: locals.user };
};

# ===== 55-60 min: deploy =====
# 'sveltejs/adapter-vercel' is auto-installed by 'npm create svelte'
# For Node: install adapter-node and set out: 'build' in svelte.config.js
# For static: adapter-static + prerender: { entries: ['*'] }

# Deploy
# vercel deploy
# OR
# adapter-node + Dockerfile + docker push + run

# ===== Post-bootcamp checklist =====
# - List + detail pages render via server loads
# - Form action works without JS AND with use:enhance
# - Auth gate via hooks.server.ts
# - Deployed to a real URL

# ===== Pitfalls =====
# - +page.ts (isomorphic) used for DB calls -> exposes secrets
# - Forgetting throw redirect (use throw, not return)
# - use:enhance forgotten -> full page reloads on every form submit
# - SSR data accessed from a browser-only API -> error on first paint

// 30-day plan in the lesson body.