Public directory for static assets in Astro - Step-by-Step Execution

Concept Flow - Public directory for static assets

Start: Place files in /public

↓

Build or Run Astro

↓

Astro copies /public as-is

↓

Files served at root URL

↓

Browser requests static asset

↓

Server delivers file from /public

↓

Browser displays or uses asset

↓

End

Static files placed in the /public folder are copied as-is and served from the root URL when the site runs.

Execution Sample

Astro

public/
  image.png
  styles.css

<!-- Access in Astro component: -->
<img src="/image.png" alt="Example Image" />

Files in /public are accessible directly by their path from the root URL in the browser.

Execution Table

Step	Action	Input/State	Result/Output
1	Place image.png in /public folder	File system: /public/image.png	File ready to be served statically
2	Run Astro build or dev server	Astro project with /public folder	/public contents copied to output as-is
3	Browser requests /image.png	HTTP GET /image.png	Server responds with /public/image.png file content
4	Browser receives image.png	Image data	Image displayed in page
5	Browser requests /styles.css	HTTP GET /styles.css	Server responds with /public/styles.css file content
6	Browser receives styles.css	CSS data	Styles applied to page
7	Request for /nonexistent.png	HTTP GET /nonexistent.png	404 Not Found error
8	End	All static assets served or 404 if missing	Static assets available at root URL

💡 Static assets are served from /public folder at root URL; missing files return 404.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
public/image.png	Not present	Copied to output	Requested by browser	Delivered to browser	Displayed
public/styles.css	Not present	Copied to output	Requested by browser	Delivered to browser	Applied to page
browser request	None	None	/image.png or /styles.css	Received file data	Rendered or applied
server response	None	None	File content or 404	Sent to browser	Complete

Key Moments - 3 Insights

Why do files in /public appear at the root URL instead of /public/filename?

Astro serves the /public folder contents directly at the root URL, so /public/image.png is accessed as /image.png in the browser, as shown in execution_table step 3.

What happens if a file is missing from /public but requested by the browser?

The server returns a 404 Not Found error because the file does not exist in /public, as shown in execution_table step 7.

Are files in /public processed or transformed by Astro during build?

No, files in /public are copied as-is without changes, ready to be served statically, as shown in execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the browser request the static image file?

A Step 3

B Step 2

C Step 5

D Step 7

💡 Hint

Check the 'Action' column for browser requests of /image.png in execution_table.

According to variable_tracker, what is the state of public/styles.css after Step 4?

A Not present

B Delivered to browser

C Requested by browser

D Copied to output

💡 Hint

Look at the 'public/styles.css' row and the 'After Step 4' column in variable_tracker.

If you add a new file to /public, how does it affect the execution_table steps?

A The file is processed and transformed by Astro

B The browser requests the file at Step 3 automatically

C The file is copied during Step 2

D The file is served from a different URL path

💡 Hint

Refer to execution_table Step 2 where /public contents are copied as-is.

Concept Snapshot

Place static files in /public folder
Astro copies /public files as-is during build
Files are served from root URL (e.g., /image.png)
Browser requests files by root path
Missing files return 404 error
Use /public for images, CSS, fonts, etc.

Full Transcript

In Astro, the public directory holds static files like images and stylesheets. When you put files in /public, Astro copies them exactly as they are during build or when running the dev server. These files become accessible from the root URL of your site. For example, a file /public/image.png is available at /image.png in the browser. When the browser requests these files, the server delivers them directly without processing. If a file is missing, the server returns a 404 error. This setup lets you easily serve static assets alongside your Astro components.