Learn Svelte - Starting a Svelte Project

#Introduction

The first two episodes gave you a conceptual understanding: Svelte is a compiler, and a .svelte component consists of script, markup, and style. Now it is time to bring theory into practice. Episode 3 is your gateway to the real world: you will create a Svelte project that actually runs.

Creating a project is not just running one command. You need to understand what the scaffold produces, where to put your code, how the dev server works, and what configuration comes with the project. All of that determines how comfortable you will be for the next 20 episodes.

In this episode you will create an application with npm create svelte@latest, learn the SvelteKit project structure, run the dev server with hot reload, and set up TypeScript, ESLint, and Prettier. When you finish, you will have a project foundation ready to be developed.

#Creating a New Svelte Application

#Scaffold with npm create svelte@latest

The official and most recommended way is to use the command line provided by the Svelte team. This command creates a complete SvelteKit project with routing, SSR, and all the basic configuration. Open a terminal in the directory where you keep your projects, then run:

npm create svelte@latest my-app

Interactive questions will appear. Choose the SvelteKit framework, add TypeScript, and enable options like ESLint and Prettier. If you are unsure, use the default options offered. This process only downloads a template and installs dependencies — no magic code happens behind the scenes.

npm create svelte@latest my-app uses the npm create mechanism to run the latest package initializer without installing anything globally. my-app is the name of your project folder. When it finishes, go into that directory and install the dependencies:

cd my-app
npm install

#Alternative: Plain Svelte with Vite

You do not always need SvelteKit. For component libraries, quick prototypes, or simple single-page applications, use the Svelte template from Vite. This project contains only the Svelte compiler, the Vite dev server, and the Vite plugin — no routing or SSR:

npm create vite@latest my-app -- --template svelte-ts
cd my-app
npm install

The svelte-ts template produces a project with TypeScript. If you prefer JavaScript, use --template svelte. The main difference: a Vite project uses src/App.svelte as the root component and has no src/routes — you will see the comparison in the next section.

#Project Structure

#src/lib and src/routes: Filesystem-Based Routing

SvelteKit organizes pages through the filesystem. Every .svelte file inside src/routes becomes a route. For example, src/routes/+page.svelte is the main page, and an about folder with a +page.svelte inside produces the /about route. This convention makes the application's navigation visible at a glance from the folder structure.

my-app
├── src
│   ├── lib          # shared components and utilities
│   └── routes       # filesystem-based routing
│       └── +page.svelte
├── static           # public assets: images, favicon, robots.txt
├── svelte.config.js
├── vite.config.ts
└── package.json

src/routes/+page.svelte marks the main page of the application. Every route is built from this folder. For components and helpers used across pages, put them in src/lib — SvelteKit gives it the $lib alias so imports do not need long relative paths.

#Your First Component

Open src/routes/+page.svelte and replace its contents with the following simple component:

<script>
  let nama = "Svelte"
</script>
 
<h1>Halo {nama}!</h1>
<p>Proyek pertama berhasil berjalan.</p>

let nama = "Svelte" is the simplest kind of state: one variable, one view. When the value of nama changes, the <h1> text updates without any manual DOM code. That is the essence of Svelte reactivity you learned about in episode 2.

#Running the Dev Server and Hot Reload

With dependencies installed, run the dev server:

npm run dev

Vite starts a local server, usually at http://localhost:5173, and prints a message that the server is ready. Open that address in your browser. The most important part: every time you save a change to a .svelte file, the browser immediately refreshes the view without a manual reload — that is hot reload.

Vite will also open the page automatically if you add the flag -- --open. For SvelteKit, the running local server is a development adapter that performs server-side rendering in the meantime — its full behavior will be covered in episode 21 on SSR.

npm run dev invokes the dev script in package.json. If port 5173 is already in use, Vite automatically picks another port and tells you through the terminal output.

#TypeScript, ESLint, and Prettier

#TypeScript

If you chose TypeScript during scaffolding, your files use the .ts extension for scripts and .svelte.ts for non-component logic. TypeScript catches type errors before runtime. The configuration lives in tsconfig.json — SvelteKit includes special settings like verbatimModuleSyntax and the $lib path.

<script lang="ts">
  let count: number = 0
 
  function tambah() {
    count += 1
  }
</script>
 
<button onclick={tambah}>Klik {count}</button>

let count: number = 0 tells the compiler that count can only hold numbers. Assigning a string will be rejected immediately when npm run check runs — better to get the error here than in production.

#ESLint and Prettier

ESLint keeps code quality high with configurable rules, while Prettier standardizes formatting. The SvelteKit template includes both. Run:

npm run lint
npx prettier --write .

npx prettier --write . formats the entire project according to the configuration in .prettierrc. The Svelte extension in VS Code can also apply automatic formatting every time you save. Making lint and format a habit from the start prevents tech debt from piling up.

#Conclusion

Key takeaways:

• Use npm create svelte@latest for a complete SvelteKit project, or Vite with the svelte-ts template for plain Svelte.
• SvelteKit routing is filesystem-based: every file in src/routes is a page.
• Put shared components and utilities in src/lib with the $lib alias, and static assets in static.
• npm run dev starts the dev server with automatic hot reload.
• TypeScript, ESLint, and Prettier come preconfigured in the template; run them routinely to keep the project healthy.
• A simple .svelte component only needs state and markup to start working.

In the next episode 4 we will cover templates and bindings — variable declarations, property binding, event binding, class binding, reactive statements, and conditional and list rendering. These are the syntaxes you will use every day, so make sure the episode 3 project is running smoothly.