Routing

Goal

This snapshot advances Wavelength Daily by teaching you to add static and dynamic filesystem routes.

Each numbered folder is a complete app. Run it independently and compare adjacent snapshots to isolate the new responsibility.

Prerequisites

Use Node.js 20 or newer, npm, and a terminal. Basic TypeScript, HTML, and CSS familiarity will help.

The development server uses port 5173. Database snapshots also need Docker and the Supabase CLI.

• Node.js and npm
• A code editor
• Docker from part 4 onward

Concepts

Folders under src/routes become URLs; bracketed folders capture dynamic parameters.

SvelteKit keeps route UI, server loading, and form actions close together while preserving a clear browser/server boundary.

Walkthrough

Add about, feed, and story routes, then return a SvelteKit 404 for an unknown slug.

Trace the example from request to rendered page, then inspect the complete matching snapshot for types, validation, and failure handling.

export const load = ({ params }) => ({ slug: params.slug });

Run and verify

Enter 02-Routing, install dependencies, and start the app. Supabase stages must start the local stack and copy the printed anon key into .env.

Open http://localhost:5173 and keep the terminal visible so browser actions can be matched to server errors.

git clone https://github.com/michaeldunga1/fcc-sveltekit-blog.git
cd fcc-sveltekit-blog/02-Routing
npm install
npm run dev

Troubleshooting

A route mismatch usually comes from folder naming or placing a server file at the wrong level.

A missing package usually means npm install ran in another snapshot. After changing environment variables, restart the SvelteKit process.

• Read the first error first
• Check the current snapshot path
• Never commit .env or node_modules

Try this

Add a contact route and a custom missing-story message.

Test one happy path and one invalid or unauthorized path before moving on.

• Make one focused change
• Verify it in the browser
• Compare with the next snapshot after it works