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
|
## Development Commands
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
|
# Start development server
|
||||||
npm run dev
|
npm run dev
|
||||||
|
|
||||||
# or start the server and open the app in a new browser tab
|
# Start with browser open
|
||||||
npm run dev -- --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:
|
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`.
|
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