diff --git a/README.md b/README.md index e43076a..ae400dc 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,93 @@ -# sv +# My SvelteKit App -Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). +A SvelteKit application with TypeScript support, configured with all standard file types. -## Creating a project - -If you're seeing this, you've probably already done this step. Congrats! - -```sh -# create a new project -npx sv create my-app -``` - -To recreate this project with the same configuration: - -```sh -# recreate this project -bun x sv create --template minimal --types ts --install bun my-sveltekit-app -``` - -## Developing - -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: +## Development Commands ```sh +# Start development server npm run dev -# or start the server and open the app in a new browser tab +# Start with browser open npm run dev -- --open + +# Type checking +npm run check + +# Type checking with watch mode +npm run check:watch + +# Build for production +npm run build + +# Preview production build +npm run preview + +# Sync SvelteKit +npm run prepare ``` -## Building +## Project Structure + +``` +src/ +├── app.html # HTML template for the application +├── app.d.ts # TypeScript declarations for SvelteKit types +├── hooks.server.ts # Server-side hooks (handle, handleError) +├── hooks.client.ts # Client-side hooks +├── lib/ # Reusable components and utilities (importable via $lib) +└── routes/ # Route pages and layouts + ├── +layout.svelte # Root layout component + ├── +layout.ts # Universal layout load function + ├── +layout.server.ts # Server-only layout load function + ├── +page.svelte # Home page component + ├── +page.ts # Universal page load function + ├── +page.server.ts # Server-only page load function + └── +error.svelte # Error page component +static/ # Static assets served at / +``` + +## SvelteKit File Types + +### Page Files +- `+page.svelte` - Component for a route page, renders HTML and handles UI +- `+page.ts` - Universal load function that runs on server and client +- `+page.server.ts` - Server-only load function with access to cookies, database, and server APIs + +### Layout Files +- `+layout.svelte` - Wraps child routes with shared UI (navbar, footer, etc.) +- `+layout.ts` - Universal load function that provides data to all child routes +- `+layout.server.ts` - Server-only layout load for shared data (auth session, user info, etc.) + +### Special Files +- `+error.svelte` - Custom error page component, renders when `error()` is thrown +- `+loading.svelte` - Loading indicator shown during navigation +- `+not-found.svelte` - Custom 404 page when a route doesn't exist + +### Server Endpoints +- `+server.ts` - API endpoint (GET, POST, PUT, DELETE, etc.) for RESTful routes + +### Root Files +- `src/app.html` - HTML template for the entire application +- `src/app.d.ts` - TypeScript declarations extending SvelteKit's global types +- `src/hooks.server.ts` - Server-side hooks for auth, cookies, middleware +- `src/hooks.client.ts` - Client-side hooks for browser-specific initialization + +## Getting Started + +1. Install dependencies: + ```sh + npm install + ``` + +2. Start the development server: + ```sh + npm run dev + ``` + +3. Open [http://localhost:5173](http://localhost:5173) in your browser. + +## Building for Production To create a production version of your app: @@ -39,4 +97,6 @@ npm run build You can preview the production build with `npm run preview`. -> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. +## Deployment + +To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.