astro-svelte5-app Svelte Themes

Astro Svelte5 App

A modern web application built with Astro and Svelte 5

Astro + Svelte 5 App

This is a modern web application built with Astro and Svelte 5.

šŸš€ Project Structure

/
ā”œā”€ā”€ src/
ā”‚   ā”œā”€ā”€ components/
ā”‚   ā”‚   ā””ā”€ā”€ Counter.svelte
ā”‚   ā””ā”€ā”€ pages/
ā”‚       ā””ā”€ā”€ index.astro
ā”œā”€ā”€ astro.config.mjs
ā”œā”€ā”€ package.json
ā”œā”€ā”€ svelte.config.js
ā””ā”€ā”€ tsconfig.json

šŸ§ž Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally before deploying
npm run astro ... Run CLI commands like astro add, astro check

šŸŽˆ Features

  • Astro 4.x
  • Svelte 5 with runes
  • TypeScript support
  • Modern development environment

šŸ“ Notes

This project uses Svelte 5's new runes syntax. Key features include:

  • $state() for reactive state
  • $derived() for computed values
  • $effect() for side effects
  • New event handling syntax (e.g., onclick instead of on:click)

šŸš€ Getting Started

  1. Clone this repository
  2. Install dependencies:
    npm install
    
  3. Start the development server:
    npm run dev
    
  4. Open your browser and navigate to http://localhost:4321

šŸ“¦ Dependencies

  • astro
  • @astrojs/svelte
  • svelte
  • typescript
  • @astrojs/check

Top categories

Loading Svelte Themes