Public and assets folders in Ruby on Rails - Step-by-Step Execution

Concept Flow - Public and assets folders

Request from browser

↓

Rails server receives request

↓

Check if file exists in /public

↓

Serve static file

↓

Send file to browser

↓

Response sent to browser

When a browser requests a file, Rails first looks in the public folder for static files. If not found, it checks the assets folder to compile and serve CSS, JS, or images.

Execution Sample

Ruby on Rails

# Browser requests /assets/logo.png
# Rails checks /public/assets/logo.png
# If found, serves directly
# Else, compiles from /app/assets/images/logo.png
# Sends file back to browser

This shows how Rails serves static files from public or compiles assets from the assets folder.

Execution Table

Step	Action	File Checked	Result	Response to Browser
1	Browser requests /assets/logo.png	-	-	Waiting
2	Rails checks /public/assets/logo.png	/public/assets/logo.png	File exists	Serve static file
3	Send file to browser	-	-	Browser receives /assets/logo.png
4	Request complete	-	-	Response finished

💡 File found in /public, served directly without asset pipeline

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
requested_path	/assets/logo.png	/assets/logo.png	/assets/logo.png	/assets/logo.png
file_location	unknown	/public/assets/logo.png	/public/assets/logo.png	/public/assets/logo.png
response_status	waiting	ready to send	sent	completed

Key Moments - 2 Insights

Why does Rails serve files directly from the public folder without compiling?

Because files in /public are static and ready to serve, Rails skips asset compilation for faster response, as shown in execution_table step 2.

What happens if the requested file is not in the public folder?

Rails then looks in the assets folder to compile the file before serving, but this is not shown here because the file was found in /public.

Visual Quiz - 3 Questions

Look at the execution table, what file path does Rails check first when a request comes in?

A /public/assets/logo.png

B /app/assets/images/logo.png

C /config/routes.rb

D /tmp/cache/assets

💡 Hint

Check Step 2 in the execution_table where Rails checks the file location

At which step does Rails send the file back to the browser?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Response to Browser column in the execution_table

If the file was not found in /public, what would Rails do next?

A Return 404 error immediately

B Check and compile from assets folder

C Restart the server

D Ignore the request

💡 Hint

Refer to the concept_flow where No leads to checking the asset pipeline

Concept Snapshot

Rails serves static files from the /public folder first.
If not found, it compiles assets from /app/assets.
Public files are served directly for speed.
Assets folder files go through the asset pipeline.
This ensures efficient delivery of images, CSS, and JS.
Requests flow: browser -> public -> assets -> response.

Full Transcript

When a browser requests a file, Rails first looks in the public folder for that file. If the file exists there, Rails serves it directly to the browser without extra work. This makes serving static files fast and simple. If the file is not in the public folder, Rails then checks the assets folder. Files in assets are processed by the asset pipeline, which compiles and prepares them before sending. This process ensures that CSS, JavaScript, and images are optimized. The flow is: browser sends request, Rails checks public folder, if found serves file, else compiles from assets, then sends response. This helps Rails efficiently handle static and dynamic assets.

Practice

1. What is the main purpose of the public folder in a Rails application?

easy

A. To store static files served directly without processing

B. To hold Ruby code files for controllers and models

C. To keep database migration files

D. To store files that Rails compiles before sending

Solution

1. Step 1: Understand the role of the public folder

   The public folder contains files like images, HTML, or JavaScript that Rails serves directly to the browser without any processing.

2. Step 2: Compare with other folders

   The assets folder is for files Rails processes (like compiling CSS or JavaScript), so it is not the public folder's role.

3. Final Answer:

   To store static files served directly without processing -> Option A

4. Quick Check:

   Public folder = static files served directly [OK]

Hint: Public folder serves files as-is, no processing needed [OK]

Common Mistakes:

• Confusing public with assets folder
• Thinking public holds Ruby code
• Assuming public processes files before serving

2. Which of the following is the correct path to place a CSS file that Rails will precompile and serve?

easy

A. app/public/stylesheets/style.css

B. public/assets/stylesheets/style.css

C. app/assets/stylesheets/style.css

D. config/assets/stylesheets/style.css

Solution

1. Step 1: Identify the standard assets folder for stylesheets

   Rails expects CSS files to be inside app/assets/stylesheets for precompilation and processing.

2. Step 2: Eliminate incorrect paths

   The public folder is for static files, not processed assets. The config folder does not hold assets.

3. Final Answer:

   app/assets/stylesheets/style.css -> Option C

4. Quick Check:

   CSS in assets/stylesheets = app/assets/stylesheets/style.css [OK]

Hint: Assets folder is inside app/, not public or config [OK]

Common Mistakes:

• Placing CSS directly in public folder
• Using wrong folder like config/assets
• Confusing assets with public folder paths

3. Given a file logo.png placed inside public/images, what URL path will serve this image in a Rails app?

medium

A. /assets/images/logo.png

B. /public/images/logo.png

C. /app/assets/images/logo.png

D. /images/logo.png

Solution

1. Step 1: Understand how public folder maps to URL

   Files inside public are served from the root URL path. So public/images/logo.png is accessible at /images/logo.png.

2. Step 2: Eliminate other options

   /assets/images/logo.png is for assets pipeline files, not public. /public/images/logo.png and /app/assets/images/logo.png are not valid URL paths.

3. Final Answer:

   /images/logo.png -> Option D

4. Quick Check:

   Public folder maps directly to root URL [OK]

Hint: Public folder files appear at root URL path [OK]

Common Mistakes:

• Using /assets prefix for public files
• Including 'public' in URL path
• Confusing assets and public URL paths

4. You placed a JavaScript file in app/assets/javascripts but it is not loading in your Rails app. What is a likely cause?

medium

A. You forgot to include the JavaScript pack or manifest in your layout

B. The file is missing from the public folder

C. JavaScript files must be placed in public/javascripts

D. Rails does not support JavaScript in assets folder

Solution

1. Step 1: Check how assets are loaded in Rails

   Files in app/assets/javascripts need to be referenced in your layout via a manifest or pack tag to load properly.

2. Step 2: Eliminate incorrect causes

   JavaScript files do not belong in public for processing. Rails fully supports JavaScript in assets folder.

3. Final Answer:

   You forgot to include the JavaScript pack or manifest in your layout -> Option A

4. Quick Check:

   Assets must be linked in layout to load [OK]

Hint: Always include asset manifests or packs in your layout [OK]

Common Mistakes:

• Expecting assets to load without linking in layout
• Placing JS files in wrong folders
• Thinking public folder is for processed assets

5. You want to add a favicon to your Rails app that loads instantly without asset pipeline processing. Where should you place the favicon file and how should you reference it in your HTML?

hard

A. Place in app/assets/images and use <%= favicon_link_tag 'favicon.ico' %>

B. Place in public folder root and use <link rel='shortcut icon' href='/favicon.ico'>

C. Place in app/assets/images and use <link rel='icon' href='/assets/favicon.ico'>

D. Place in public/images and use <%= image_tag 'favicon.ico' %>

Solution

1. Step 1: Choose folder for instant loading without processing

   Files in public are served directly, so placing favicon.ico in public root ensures instant loading.

2. Step 2: Reference favicon correctly in HTML

   Use a standard HTML <link> tag with href pointing to /favicon.ico for browsers to find it.

3. Final Answer:

   Place in public folder root and use <link rel='shortcut icon' href='/favicon.ico'> -> Option B

4. Quick Check:

   Favicon in public root + direct link = Place in public folder root and use <link rel='shortcut icon' href='/favicon.ico'> [OK]

Hint: Put favicon in public root and link with standard HTML tag [OK]

Common Mistakes:

• Placing favicon in assets and expecting instant load
• Using image_tag instead of link tag for favicon
• Referencing wrong URL path for favicon