Project structure overview in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the main folder for page components in Astro

In an Astro project, which folder typically contains the page components that define the routes of the website?

A src/pages

B public/assets

C src/components

D node_modules

💡 Hint

Think about where you place files that correspond to website pages.

The src/pages folder holds page components that map to routes in Astro. Files here become pages automatically.

❓ component_behavior

intermediate

Where to place reusable UI parts in Astro?

You want to create a button component to reuse across many pages in your Astro project. Which folder is the best place to put this component?

A src/components

B src/pages

C public

D src/layouts

💡 Hint

Reusable UI parts usually go in a dedicated folder separate from pages.

The src/components folder is for reusable UI components like buttons, headers, or cards.

📝 Syntax

advanced

What is the correct file extension for Astro components?

Which file extension should you use for Astro component files to ensure they are recognized and processed correctly?

A .html

B .jsx

C .astro

D .js

💡 Hint

Astro components have their own special file extension.

Astro components use the .astro extension to enable Astro's templating and features.

🔧 Debug

advanced

Why is a static asset not loading from the public folder?

You placed an image file in the public/images folder but it does not show up on your site. What is a common mistake that causes this?

A Not importing the image in a JavaScript file

B Referencing the image with a relative path like './images/pic.png' instead of '/images/pic.png'

C Using an unsupported image format like .txt

D Placing the image in <code>src/components</code> instead of <code>public</code>

💡 Hint

Static assets in public are served from the root URL, so paths must start with a slash.

Assets in public are served from the root. Using a relative path like ./images/pic.png will not find the file. Use /images/pic.png instead.

❓ lifecycle

expert

How does Astro handle server-side rendering and static generation in project structure?

In Astro, where do you configure whether a page is statically generated or server-side rendered, and how does this relate to the project structure?

A In a global config file at the project root named <code>astro.config.mjs</code> only

B By naming files with .ssr.astro or .static.astro extensions

C By placing pages in either <code>src/static</code> or <code>src/server</code> folders

D In the frontmatter of each page component file inside <code>src/pages</code>, using the <code>export const prerender = true</code> or <code>prerender = false</code> flags

💡 Hint

Astro uses frontmatter flags inside page files to control rendering mode.

Astro lets you control rendering per page by exporting the prerender flag in the frontmatter of files in src/pages. This is part of the project structure and file content.

Practice

1. In an Astro project, which folder is primarily used to store your source code like components and pages?

easy

A. src/

B. public/

C. assets/

D. dist/

Solution

1. Step 1: Understand folder roles in Astro

   The src/ folder is where you put your source code like components, pages, and styles.

2. Step 2: Identify the correct folder for code

   The public/ folder is for static files like images, not code.

3. Final Answer:

   src/ -> Option A

4. Quick Check:

   Source code folder = src/ [OK]

Hint: Code lives in src/, static files in public/ [OK]

Common Mistakes:

• Confusing public/ with src/
• Thinking assets/ is default code folder
• Assuming dist/ holds source code

2. Which of the following is the correct way to reference a static image stored in the public/ folder inside an Astro component?

easy

A. <img src="../src/images/photo.jpg" />

B. <img src="src/images/photo.jpg" />

C. <img src="/images/photo.jpg" />

D. <img src="./public/images/photo.jpg" />

Solution

1. Step 1: Understand how public/ files are served

   Files in public/ are served from the root URL, so you reference them with a leading slash.

2. Step 2: Choose the correct path format

   Using /images/photo.jpg correctly points to public/images/photo.jpg.

3. Final Answer:

   <img src="/images/photo.jpg" /> -> Option C

4. Quick Check:

   Static files use root-relative paths [OK]

Hint: Static files use root-relative paths starting with '/' [OK]

Common Mistakes:

• Using relative paths like 'src/images' for public files
• Including 'public/' in the path
• Using relative paths that don't work in deployed site

3. Given this Astro project structure:

project/
├─ public/
│  └─ logo.png
├─ src/
│  └─ components/
│     └─ Header.astro
└─ src/pages/index.astro

What will be the correct way to display logo.png inside Header.astro?

medium

A. <img src="src/public/logo.png" alt="Logo" />

B. <img src="../public/logo.png" alt="Logo" />

C. <img src="./logo.png" alt="Logo" />

D. <img src="/logo.png" alt="Logo" />

Solution

1. Step 1: Recall how public/ files are served

   Files in public/ are served from the root URL, so you use a root-relative path starting with '/'.

2. Step 2: Apply correct path in component

   Using /logo.png correctly points to the image regardless of component location.

3. Final Answer:

   <img src="/logo.png" alt="Logo" /> -> Option D

4. Quick Check:

   Public files use root-relative paths [OK]

Hint: Always use root-relative paths for public folder files [OK]

Common Mistakes:

• Trying to use relative paths to public/ folder
• Including 'public' in the path
• Using relative paths that break on deployment

4. You see this error when running your Astro project:
Cannot find module './public/image.png'
What is the likely cause based on Astro's project structure?

medium

A. The src/ folder is missing

B. Trying to import a static file from public/ using a relative import

C. The public/ folder is inside src/

D. The image file is corrupted

Solution

1. Step 1: Understand how static files are accessed

   Static files in public/ are not imported via relative paths in code; they are referenced by URL paths.

2. Step 2: Identify the error cause

   Trying to import a file from public/ using a relative import causes this error.

3. Final Answer:

   Trying to import a static file from public/ using a relative import -> Option B

4. Quick Check:

   Static files are referenced by URL, not imported [OK]

Hint: Never import files from public/; use URL paths [OK]

Common Mistakes:

• Importing images or static files as modules
• Placing public/ inside src/
• Assuming public/ files are bundled like code

5. You want to add a new page to your Astro site at URL /about. Where should you place the new file in the project structure?

hard

A. src/pages/about.astro

B. public/about/index.html

C. src/components/about.astro

D. src/about.astro

Solution

1. Step 1: Understand Astro's page routing

   Files inside src/pages/ map directly to site URLs.

2. Step 2: Choose correct location for new page

   Placing about.astro inside src/pages/ creates the /about route.

3. Final Answer:

   src/pages/about.astro -> Option A

4. Quick Check:

   Pages go in src/pages/ folder [OK]

Hint: Put new pages in src/pages/ for routing [OK]

Common Mistakes:

• Placing pages in src/components/
• Adding pages directly in src/ without pages folder
• Putting pages in public/ folder