Project structure in Svelte - Step-by-Step Execution

Concept Flow - Project structure

Start: Create project folder

↓

Add src folder

↓

Add main files: App.svelte, main.js

↓

Add public folder for static files

↓

Add package.json and config files

↓

Run build or dev server

↓

Project ready

This flow shows how a Svelte project is organized from creating folders to running the app.

Execution Sample

Svelte

my-svelte-project/
  src/
    App.svelte
    main.js
  public/
    global.css
  package.json
  svelte.config.js

This is a typical Svelte project folder structure with source code, public assets, and config files.

Execution Table

Step	Action	Folder/File Created	Purpose
1	Create project root folder	my-svelte-project/	Holds all project files
2	Create src folder	src/	Contains Svelte components and JS files
3	Add App.svelte	src/App.svelte	Main Svelte component
4	Add main.js	src/main.js	Entry point to start app
5	Create public folder	public/	Static files like images and CSS
6	Add global.css	public/global.css	Global styles for app
7	Add package.json	package.json	Project dependencies and scripts
8	Add svelte.config.js	svelte.config.js	Svelte build configuration
9	Run dev server	n/a	Starts app for development
10	Project ready	n/a	App can be viewed in browser

💡 All necessary folders and files created, dev server running, project ready to use

Variable Tracker

Folder/File	Initial	Final
my-svelte-project/	No	Yes
src/	No	Yes
src/App.svelte	No	Yes
src/main.js	No	Yes
public/	No	Yes
public/global.css	No	Yes
package.json	No	Yes
svelte.config.js	No	Yes

Key Moments - 3 Insights

Why do we need both src and public folders?

src holds the code that Svelte compiles, like components and scripts. public holds static files like images and CSS that don’t change during build. See steps 2 and 5 in execution_table.

What is the role of main.js in the project?

main.js is the entry point that tells Svelte where to put the app in the browser. It imports App.svelte and starts the app. See step 4 in execution_table.

Why do we have package.json in the root?

package.json manages dependencies and scripts for building and running the app. It’s essential for npm or yarn to work. See step 7 in execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the main Svelte component created?

A Step 4

B Step 5

C Step 3

D Step 7

💡 Hint

Check the 'Folder/File Created' column for 'src/App.svelte'

According to variable_tracker, which folder is created first?

A my-svelte-project/

B src/

C public/

D package.json

💡 Hint

Look at the first row in variable_tracker for creation order

If we skip creating the public folder, what impact would it have?

A App won’t start because main.js is missing

B No static files like images or CSS will be served

C App won’t compile

D package.json will be invalid

💡 Hint

Refer to step 5 in execution_table about public folder purpose

Concept Snapshot

Svelte Project Structure:
- Root folder holds all files
- src/ contains App.svelte and main.js
- public/ holds static assets
- package.json manages dependencies
- svelte.config.js configures build
- Run dev server to start app

Full Transcript

A Svelte project starts with a root folder. Inside it, the src folder holds the main Svelte component App.svelte and the entry script main.js. The public folder stores static files like CSS and images that the app uses directly. The package.json file manages dependencies and scripts, while svelte.config.js sets build options. After creating these folders and files, running the development server launches the app in the browser. This structure keeps code and assets organized for easy development and deployment.

Practice

1. In a Svelte project, where should you place reusable components that can be used across multiple pages?

easy

A. static/components

B. src/routes

C. src/lib

D. public/assets

Solution

1. Step 1: Understand folder purpose

   src/lib is designed for reusable components and utilities.

2. Step 2: Compare with other folders

   src/routes holds pages, public/assets is for static files, and static/components is not a standard folder.

3. Final Answer:

   src/lib -> Option C

4. Quick Check:

   Reusable components = src/lib [OK]

Hint: Reusable parts go in src/lib folder [OK]

Common Mistakes:

• Putting reusable components in src/routes
• Using public folder for components
• Creating non-standard folders like static/components

2. Which of the following is the correct folder to place page files in a SvelteKit project?

easy

A. src/pages

B. src/lib

C. public/pages

D. src/routes

Solution

1. Step 1: Identify the folder for pages

   In SvelteKit, src/routes is the folder where page components live.

2. Step 2: Check other options

   src/lib is for reusable components, public/pages and src/pages are not standard folders for pages.

3. Final Answer:

   src/routes -> Option D

4. Quick Check:

   Pages go in src/routes [OK]

Hint: Pages always go in src/routes in SvelteKit [OK]

Common Mistakes:

• Confusing src/lib with src/routes
• Placing pages in public folder
• Using non-standard src/pages folder

3. Given the following SvelteKit project structure:

project/
├─ public/
│  └─ logo.png
├─ src/
│  ├─ lib/
│  │  └─ Button.svelte
│  └─ routes/
│     └─ index.svelte

Where should you import the Button.svelte component to use it on the homepage?

medium

A. From ./Button.svelte inside src/routes/index.svelte

B. From ../lib/Button.svelte inside src/routes/index.svelte

C. From ../../public/logo.png inside src/routes/index.svelte

D. From public/Button.svelte inside src/routes/index.svelte

Solution

1. Step 1: Understand folder hierarchy

   src/routes/index.svelte is one level deeper than src/lib/Button.svelte, so import path is ../lib/Button.svelte.

2. Step 2: Eliminate wrong paths

   ../../public/logo.png is for static assets, not components; ./Button.svelte assumes Button is in routes folder; public/Button.svelte is incorrect location.

3. Final Answer:

   From ../lib/Button.svelte inside src/routes/index.svelte -> Option B

4. Quick Check:

   Import reusable components with relative path ../lib [OK]

Hint: Use relative path ../lib to import components from routes [OK]

Common Mistakes:

• Trying to import components from public folder
• Using wrong relative path like ./Button.svelte
• Confusing static assets with components

4. You placed an image file inside src/lib/images and tried to use it in your SvelteKit page, but it doesn't load in the browser. What is the most likely reason?

medium

A. Static assets must be inside the public folder to be served correctly.

B. Images must be imported from src/routes folder only.

C. You need to rename the image file to have a .svelte extension.

D. The image file size is too large to load.

Solution

1. Step 1: Understand static asset serving

   SvelteKit serves static files only from the public folder, so files in src/lib/images are not accessible directly.

2. Step 2: Check other options

   Images don't belong in src/routes, renaming to .svelte is incorrect, and file size doesn't prevent loading if path is correct.

3. Final Answer:

   Static assets must be inside the public folder to be served correctly. -> Option A

4. Quick Check:

   Static files go in public folder [OK]

Hint: Put images in public folder to load in browser [OK]

Common Mistakes:

• Placing images inside src/lib or src/routes
• Renaming images as .svelte files
• Assuming large file size causes loading failure

5. You want to organize your SvelteKit project so that:
1. All page routes are inside src/routes.
2. Reusable UI components are inside src/lib/components.
3. Static assets like images and fonts are inside public/assets.

Which folder structure below correctly reflects this setup?

hard

A. project/
├─ public/
│ └─ assets/
│ ├─ images/
│ └─ fonts/
├─ src/
│ ├─ lib/
│ │ └─ components/
│ │ └─ Button.svelte
│ └─ routes/
│ └─ index.svelte

B. project/
├─ src/
│ ├─ assets/
│ │ ├─ images/
│ │ └─ fonts/
│ ├─ components/
│ │ └─ Button.svelte
│ └─ pages/
│ └─ index.svelte

C. project/
├─ public/
│ └─ components/
│ └─ Button.svelte
├─ src/
│ ├─ lib/
│ └─ routes/
│ └─ index.svelte

D. project/
├─ public/
│ └─ assets/
│ └─ Button.svelte
├─ src/
│ ├─ lib/
│ └─ routes/
│ └─ index.svelte

Solution

1. Step 1: Verify static assets location

   Static assets like images and fonts must be inside public/assets to be served correctly.

2. Step 2: Check reusable components and routes

   Reusable components go inside src/lib/components, and pages go inside src/routes.

3. Step 3: Match folder structure

   project/
   ├─ public/
   │  └─ assets/
   │     ├─ images/
   │     └─ fonts/
   ├─ src/
   │  ├─ lib/
   │  │  └─ components/
   │  │     └─ Button.svelte
   │  └─ routes/
   │     └─ index.svelte

   matches all requirements exactly; other options place assets or components incorrectly.

4. Final Answer:

   Option A folder structure -> Option A

5. Quick Check:

   Correct folder setup =

   project/
   ├─ public/
   │  └─ assets/
   │     ├─ images/
   │     └─ fonts/
   ├─ src/
   │  ├─ lib/
   │  │  └─ components/
   │  │     └─ Button.svelte
   │  └─ routes/
   │     └─ index.svelte

   [OK]

Hint: Static assets in public, components in src/lib, pages in src/routes [OK]

Common Mistakes:

• Putting static assets inside src folder
• Placing components in public folder
• Using non-standard folders like pages instead of routes