A tutorial project demonstrating how to build a full-stack web application using Deno and SvelteKit. This project showcases modern web development practices with TypeScript, server-side rendering, and API routes.

You can deploy your own version of this svelte app to Deno Deploy immediately. Just click the button to clone and deploy.

• Runtime: Deno
• Framework: SvelteKit
• Language: TypeScript
• Build Tool: Vite
• Adapter: Deno SvelteKit Adapter

tutorial-with-svelte/ ├── src/ │ ├── routes/ │ │ ├── +layout.svelte # Global layout │ │ ├── +page.svelte # Homepage - dinosaur list │ │ ├── +page.ts # Homepage data loader │ │ ├── [dinosaur]/ # Dynamic route for individual dinosaurs │ │ │ ├── +page.svelte # Dinosaur detail page │ │ │ └── +page.ts # Dinosaur data loader │ │ └── api/ │ │ ├── data.json # Dinosaur database (3000+ entries) │ │ └── dinosaurs/ │ │ └── +server.js # API endpoint for dinosaur data │ ├── app.css # Global styles │ ├── app.html # HTML template │ └── lib/ ├── static/ # Static assets ├── deno.json # Deno configuration ├── package.json # NPM scripts for Vite ├── svelte.config.js # SvelteKit configuration └── vite.config.ts # Vite configuration 

1. Clone or download this project and install dependencies

git clone https://github.com/denoland/tutorial-with-svelte.git cd tutorial-with-svelte deno install

2. Run the dev server

deno run dev

3. Open your browser and navigate to http://localhost:5173

# Start development server deno run dev # Build for production deno run build # Preview production build deno run preview

• Loads all dinosaurs from the API endpoint
• Displays them as clickable links
• Uses SvelteKit's load function for server-side data fetching

• Serves dinosaur data from a JSON file
• Uses SvelteKit's server routes feature
• Returns data in JSON format

• Matches any dinosaur name in the URL
• Fetches specific dinosaur data
• Displays detailed information with a back link