Project structure in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Svelte component correctly.

Svelte

<script>
  import Header from './[1]';
</script>

Drag options to blanks, or click blank then click option'

AHeader.css

BHeader.js

CHeader.html

DHeader.svelte

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add the .svelte extension when importing.

Trying to import a CSS or JS file as a component.

In Svelte, components are files with the .svelte extension. To import a component, you must include the .svelte file extension.

2fill in blank

medium

Complete the code to define the main entry point file in a Svelte project.

Svelte

<main>
  <script src="[1]"></script>
</main>

Drag options to blanks, or click blank then click option'

Amain.js

Bapp.js

Cindex.js

Dbundle.js

Attempts:

3 left

💡 Hint

Common Mistakes

Using app.js or index.js which are common in other frameworks but not default in Svelte.

Using bundle.js which is usually a build output file.

The main entry point for a Svelte app is usually main.js, which initializes the app and mounts it to the DOM.

3fill in blank

hard

Fix the error in the Svelte project folder structure by choosing the correct folder for components.

Svelte

src/
  [1]/
    Header.svelte
    Footer.svelte
  main.js

Drag options to blanks, or click blank then click option'

Acomponents

Bassets

Cstyles

Dscripts

Attempts:

3 left

💡 Hint

Common Mistakes

Placing components inside assets or styles folders.

Not organizing components in a dedicated folder.

In Svelte projects, reusable UI parts like Header.svelte and Footer.svelte are stored in the components folder inside src.

4fill in blank

hard

Fill both blanks to create a Svelte project folder structure with a styles folder and a public folder.

Svelte

project-root/
  src/
    components/
    [1]/
  [2]/

Drag options to blanks, or click blank then click option'

Astyles

Bscripts

Cpublic

Dassets

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing assets with public folder.

Placing public folder inside src.

The styles folder inside src holds CSS or style files. The public folder at the root contains static files served directly by the server.

5fill in blank

hard

Fill all three blanks to complete the Svelte project structure with correct folder names and main file.

Svelte

project-root/
  [1]/
    [2]/
      App.svelte
    [3]/
  package.json

Drag options to blanks, or click blank then click option'

Asrc

Bcomponents

Cstyles

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Placing components or styles outside src.

Confusing public with src.

The src folder contains the source code. Inside it, components holds Svelte components like App.svelte. The styles folder stores CSS files.

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