Skip to main content
Handbook/Set Up/Chapter 10 · Scaffolding

Blank Screen to Running App

Share

Share this page

Pass it to someone who needs it.

Key takeaway: Get a running app before features

You have a stack picked and an empty folder. Everything after this asks you to change an app, and you do not have one yet: nothing runs, no page loads. This chapter gets you from that empty folder to a running app skeleton you can see in your browser, before you decide a single thing about what it will do.

1.6.1From blank folder to running app

The gap that stalls people is not writing features, it is the plumbing before the first one: install the tools, wire the build, get a server to boot. Your first goal skips straight past that struggle.

Aim for a running app that does almost nothing useful yet, a skeleton that boots, serves one page, and proves the whole toolchain works end to end. Once it runs, every feature drops into something already alive, so a broken feature stands out against a baseline you know works.

From an empty folder to a running skeleton with your own name on screen.

1.6.2Start from a boilerplate

Do not hand-assemble the plumbing. A boilerplate is a ready-made starter project with the build, the config, and one working page already wired together, and a scaffolder is a single command that generates one in seconds. For a typical web app, create-next-app is the fastest path from nothing to running:

npx create-next-app@latest my-app cd my-app npm run dev

That last line starts the dev server, the small web server that runs your app on your own machine. It boots at http://localhost:3000, with a shape like this:

my-app/ app/ page.tsx (the home page you see) layout.tsx public/ package.json

Watch out: get the default booting before you customize anything. If you tweak first and it breaks, you cannot tell whether the boilerplate or your change is at fault.

1.6.3Get one thing on screen first

Before a single feature, put one thing on screen that is unmistakably yours. Open the home page the scaffolder made and replace it with your app's name:

// app/page.tsx export default function Home() { return <h1>Ledger is running.</h1>; }

Save, and the page in your browser updates on its own. Seeing your own words render proves the loop you will live in all through building: change a file, see the result. That tiny win is the entire point of the skeleton.

The loop you live in while building: change a file, see the result.

1.6.4Stop here, before any feature

A running skeleton is the most valuable state your project will be in for a while: it works, and nothing you have added can have broken it yet. Resist adding a feature to it today.

That is because you have no way back yet. The next chapter gives you one, a safety net that saves this exact working state so you can always return to it, and from then on every feature is a change against something known good.

This prompt has your agent scaffold that skeleton for your stack:

Ready prompt
Act as a senior engineer scaffolding my project. Pick the right scaffolder for my stack and use its official generator: create-next-app for a Next.js web app, Vite for a plain single-page app, or the framework's own CLI otherwise. Generate the starter, get it booting locally, and confirm the dev server serves one page in the browser. Then replace that page with a single line showing my app's name, so I see my own output render. Do not add any feature yet. Show me the commands to run and the file tree they produce first. My app idea and stack:

Do this now: paste the prompt, name your app and stack, and let your agent scaffold a running skeleton, then open it in your browser and see your own app name on the screen.

Mahmoud Zalt

Mahmoud Zalt

Software engineer, 16+ yrs · built Sistava.com in 3 months, idea to production, using these methods

Resources
Contribute
Donate

Support my work

A small tip keeps the free work coming.

© 2026 Mahmoud Zalt. Free to read, not to republish.
Copyright & license