Project structure overview in Astro - Step-by-Step Execution

Concept Flow - Project structure overview

Start: Create Astro Project

↓

Create src/ folder

↓

Add components/ folder

↓

Add pages/ folder

↓

Add layouts/ folder

↓

Add public/ folder

↓

Add astro.config.mjs

↓

Add package.json

↓

Project Ready to Develop

This flow shows the typical steps to set up an Astro project folder with main directories and config files.

Execution Sample

Astro

my-astro-project/
  ├── src/
  │   ├── components/
  │   ├── layouts/
  │   └── pages/
  ├── public/
  ├── astro.config.mjs
  └── package.json

This is the typical folder and file layout of an Astro project showing main folders and config files.

Execution Table

Step	Action	Folder/File Created	Purpose
1	Initialize project folder	my-astro-project/	Root folder for project files
2	Create src/ folder	src/	Source code lives here
3	Add components/ inside src/	src/components/	Reusable UI parts
4	Add layouts/ inside src/	src/layouts/	Page layout templates
5	Add pages/ inside src/	src/pages/	Site pages and routes
6	Create public/ folder	public/	Static assets like images
7	Add astro.config.mjs file	astro.config.mjs	Project configuration
8	Add package.json file	package.json	Project dependencies and scripts
9	Project structure complete	-	Ready for development

💡 All main folders and config files created, project structure ready

Variable Tracker

Folder/File	Start	After Step 2	After Step 5	After Step 8	Final
my-astro-project/	Does not exist	Exists	Exists	Exists	Exists
src/	Does not exist	Exists	Exists	Exists	Exists
src/components/	Does not exist	Does not exist	Exists	Exists	Exists
src/layouts/	Does not exist	Does not exist	Exists	Exists	Exists
src/pages/	Does not exist	Does not exist	Exists	Exists	Exists
public/	Does not exist	Does not exist	Does not exist	Exists	Exists
astro.config.mjs	Does not exist	Does not exist	Does not exist	Exists	Exists
package.json	Does not exist	Does not exist	Does not exist	Exists	Exists

Key Moments - 3 Insights

Why do we put components inside src/components instead of directly in src?

Components are reusable UI parts, so we organize them in src/components to keep code clean and easy to find, as shown in step 3 of the execution_table.

What is the purpose of the public folder?

The public folder holds static files like images or icons that do not change, so they can be served directly. This is created at step 6 in the execution_table.

Why do we need astro.config.mjs and package.json files?

astro.config.mjs configures the Astro project settings, and package.json manages dependencies and scripts. Both are essential for project setup, created at steps 7 and 8.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the src/pages folder created?

A Step 3

B Step 5

C Step 6

D Step 2

💡 Hint

Check the 'Folder/File Created' column for src/pages in the execution_table rows.

According to variable_tracker, which folder exists after step 2 but before step 5?

A src/

B src/components/

C public/

D astro.config.mjs

💡 Hint

Look at the 'After Step 2' and 'After Step 5' columns in variable_tracker for folder existence.

If we skip creating the public folder, which step in execution_table would be missing?

A Step 5

B Step 7

C Step 6

D Step 8

💡 Hint

Refer to the 'Folder/File Created' column in execution_table to find when public/ is created.

Concept Snapshot

Astro project structure:
- Root folder contains src/, public/, astro.config.mjs, package.json
- src/ holds components/, layouts/, pages/
- components/ for reusable UI parts
- layouts/ for page templates
- pages/ for site routes
- public/ for static assets
- Config files setup project behavior

Full Transcript

This visual execution shows how an Astro project folder is built step-by-step. We start by creating the main project folder, then add the src folder for source code. Inside src, we add components, layouts, and pages folders to organize UI parts, templates, and pages. Next, we add the public folder for static files like images. Finally, we add configuration files astro.config.mjs and package.json to set up project settings and dependencies. The variable tracker shows when each folder or file appears during the steps. Key moments clarify why components go inside src/components, the role of public/, and the importance of config files. The quiz tests understanding of folder creation order and existence. This structure keeps the project organized and ready for development.

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