Project structure in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the src folder in a Svelte project?

The src folder holds all the source code files like components, styles, and scripts that make up the app. It's where you write your app's logic and UI.

beginner

What does the public folder contain in a Svelte project?

The public folder contains static files like images, icons, and the main index.html file. These files are served directly to the browser without processing.

beginner

Why is the package.json file important in a Svelte project?

It lists the project dependencies, scripts to run or build the app, and metadata. It helps manage packages and commands for your project.

beginner

What role does the node_modules folder play in a Svelte project?

It stores all the installed packages and libraries your project depends on. You usually don't edit files here; it's managed by the package manager.

beginner

Where do you place reusable UI parts like buttons or headers in a Svelte project?

Reusable UI parts are usually placed inside the src/lib or src/components folder to keep the code organized and easy to find.

Which folder in a Svelte project contains the main HTML file served to the browser?

A src

B public

C node_modules

D lib

The public folder contains static files like index.html that the browser loads directly.

Where do you write your Svelte components and app logic?

A src

B public

C node_modules

D package.json

The src folder is where you write your components, styles, and scripts.

What is the main purpose of the package.json file?

A Manage dependencies and scripts

B Save user data

C Hold compiled code

D Store static images

It manages project dependencies and scripts like build or start commands.

Which folder should you avoid editing directly because it is managed by the package manager?

A src

B public

C node_modules

D lib

The node_modules folder is managed automatically and contains installed packages.

Where do you typically put reusable UI components in a Svelte project?

A package.json

B public

C node_modules

D src/components or src/lib

Reusable components are organized inside src/components or src/lib folders.

Describe the main folders and files in a Svelte project and their roles.

Think about where you write code, where static files live, and how dependencies are managed.

Explain why organizing your Svelte project structure well helps in development.

Consider how a tidy workspace helps you work faster and avoid confusion.