Summary  
This chapter demonstrates how to use Vite to bootstrap a Svelte project by scaffolding code, installing dependencies, and launching a development server for rapid feedback.

General domain of usage  
Frontend web application development


Before building Svelte components, you need to create a real Svelte project. In this chapter, you will use Vite, a modern frontend build tool, to generate and run your first Svelte application.



## What Is Vite?

Vite is a tool that helps create and run modern frontend projects. It gives you a development server, project setup, fast refresh while coding, and a production build workflow.

For this course, you do not need to understand every Vite feature yet. You only need to know that Vite helps you start and run your Svelte project quickly.





### 1. Creating a Svelte Project

Open your terminal and run:

```bash
npm create vite@latest my-svelte-app
```

Then choose:

```txt
Svelte
JavaScript
```

After the project is created, move into the project folder:

```bash
cd my-svelte-app
```

Install the project dependencies:

```bash
npm install
```




### 2. Running the Project

Start the development server:

```bash
npm run dev
```

Vite will show a local development URL in the terminal. Open that URL in your browser to see your first Svelte application running.


Learn how to build modern reactive frontend applications with Svelte. Work with components, props, state, events, template logic, stores, and API data while creating fast and interactive user interfaces using modern frontend development patterns.

Learn the foundations of Svelte while setting up your first frontend application with Vite. Explore the Svelte project structure, understand how `.svelte` components work, and build your first reactive user interfaces using modern frontend development workflows.

Learn how to build reusable Svelte components while working with props, dynamic data, scoped styles, and component-based UI development. Explore how modern frontend applications organize interfaces into flexible and reusable building blocks.

Learn how Svelte reactivity powers dynamic frontend applications. Work with reactive variables, bindings, conditional rendering, lists, and event handling while building interactive user interfaces that respond automatically to user actions and data changes.


Learn how Svelte stores help manage and share reactive state across applications. Work with writable and derived stores, automatic subscriptions, and shared component data while building scalable frontend state management patterns.

Work with real API data inside Svelte applications while handling asynchronous requests, loading states, error handling, search systems, and dynamic filtering. Build reactive interfaces that respond automatically to changing external data.


Build more flexible and interactive Svelte applications using transitions, component composition, parent-child relationships, and slots. Organize interfaces into reusable UI structures while adding smoother user interactions and animations.


Build interactive frontend features with forms, validation, responsive layouts, and project organization techniques while combining the main Svelte concepts into a complete real-world frontend application.


Setting Up a Svelte Project with Vite

What Is Vite?

1. Creating a Svelte Project

2. Running the Project