Layout and UI

Goal

This snapshot advances Copperline Journal by teaching you to render EJS pages with shared partials and Bootstrap 5.

Every numbered folder is a complete app. Run this stage independently, then compare it with the previous folder to see the new responsibility clearly.

Prerequisites

Use Node.js 20 or newer, npm, and a terminal. You should recognize basic JavaScript functions, objects, and HTTP requests.

Port 3000 must be available. MongoDB snapshots use Docker locally; copy the example environment file before starting them.

• Node.js and npm installed
• A code editor and terminal
• Docker from part 4 onward

Concepts

EJS combines server data with HTML. Shared header and footer partials prevent repeated navigation and layout markup.

Keep responsibilities visible: middleware prepares requests, routes choose handlers, models protect data rules, and EJS views present escaped values.

Walkthrough

Configure the view engine and public folder, pass sample posts to the feed, and include Bootstrap-based partials on every page.

Read the example from input to output, then inspect the matching snapshot. The repository includes the surrounding setup and error handling.

app.set("view engine", "ejs");
app.use(express.static("public"));
res.render("home", { title: "Latest stories", posts });

Run and verify

Enter 03-Layout-And-UI, install its dependencies, copy .env.example when present, and start the server.

Open http://localhost:3000. Keep the terminal visible so route, validation, and database errors can be connected to the browser action that caused them.

git clone https://github.com/michaeldunga1/fcc-express-blog.git
cd fcc-express-blog/03-Layout-And-UI
npm install
cp .env.example .env
npm start

Troubleshooting

For a missing view, verify the views directory and exact filename casing. Print untrusted text with escaped EJS tags.

A missing-module error usually means npm install ran in another snapshot. For database failures, check the container and that this folder uses its own Copperline database name.

• Read the first error first
• Restart after environment changes
• Never commit .env or node_modules

Try this

Render a friendly empty state when the posts array is empty.

Test a happy path and one invalid or unauthorized request. Useful applications return clear feedback without exposing secrets or stack traces.

• Make one small change
• Test it in the browser
• Compare with the next snapshot only after it works