Understanding the Svelte Project Structure

Now that your Svelte project is running, it is important to understand the main files and folders inside the project. Modern frontend applications are usually organized into multiple directories that separate components, assets, configuration files, and application logic.

Opening the Project in VS Code

Open the project folder inside VS Code. On the left side of the editor, you will see the project file structure generated by Vite.

At first, the number of files may look intimidating, but most beginner Svelte development only focuses on a small set of important folders and files.

The src Folder

The src folder contains the main application code. This is where you will spend most of your time while building Svelte applications.

Inside this folder, you will usually create:

• Components;
• Pages;
• Styles;
• Application logic.

Most frontend projects organize their core code inside src.

The App.svelte File

The App.svelte file is the main root component of the application.

When the application starts, this component is rendered first. As you build larger projects, App.svelte often becomes the central place where other components are connected together.

You will begin editing this file very soon.

The node_modules Folder

The node_modules folder contains installed project dependencies and libraries.

This folder is generated automatically when running:

npm install

You normally do not edit files inside node_modules directly.

Configuration Files

Your project also includes several configuration files generated by Vite and Svelte.

For example:

• package.json stores project dependencies and scripts;
• vite.config.js contains Vite configuration;
• README.md usually contains project information.

At this stage, you do not need to deeply understand these files yet.