Update README.md to enhance project documentation, including development commands, project structure, SvelteKit file types, and deployment instructions.
This commit is contained in:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user