Step 4

Run your app for the first time

What you're about to do

Install your app's dependencies and start it running. By the end of this page, your app will be live in your browser.

Why it matters

This is the payoff moment. Until now, you've been preparing. Now you actually see your app running.

What you'll need

Your code editor open with the boilerplate folder loaded. 5–10 minutes.

Open the terminal inside your project

You should still have your code editor open with the boilerplate folder loaded. Open a new terminal (if it's not already open):

  • Click Terminal → New Terminal in the top menu

When the terminal opens, it should automatically be positioned inside your project folder. You can confirm by looking at the prompt — it should mention “boilerplate” or whatever you renamed your folder to:

yourname@yourcomputer boilerplate %

If you see something else (like just yourname@yourcomputer ~ %), close the terminal and reopen it. The “New Terminal” command should always start in your project folder.

Install the dependencies

Type this and press Enter:

pnpm install

This downloads all the building blocks your app needs (about 300 MB worth — it's a lot, but it's normal). You'll see a wall of text scrolling by, and a progress indicator.

This takes 2–5 minutes the first time. Don't worry if it seems slow — it's downloading hundreds of small packages.

When it's done, you'll see something like:

Dependencies installed successfully.
Done in 2m 34s

And the command prompt will return (blinking cursor with % or >).

Start the app

Now the magic moment. Type this and press Enter:

pnpm dev

You'll see more text scrolling by — your app is starting up. After 5–15 seconds, you'll see something like:

  ▲ Next.js 15.x.x
  - Local:        http://localhost:3000

 ✓ Ready in 1247ms

That http://localhost:3000 is your app, running on your computer.

Open your app in your browser

Open any web browser (Chrome, Safari, Firefox, Edge — whatever you usually use). In the address bar, type:

http://localhost:3000

Press Enter. You should see your app's landing page — the boilerplate's default homepage.

Take a moment. You just installed and ran a real web app. It might look generic right now, but it has working authentication, billing infrastructure, email systems, an admin dashboard, all of it. You're going to make it yours over the next several steps.

Keep the terminal running

Important: as long as your app is running, your terminal will be busy (you won't be able to type new commands in it). That's normal. The terminal is showing your app's activity log — every page load, every action, gets logged here.

If you ever need to stop your app:

  • Click into the terminal
  • Press Ctrl+C (on Mac, that's the Control key, not Command)
  • The app stops, and your terminal becomes available for new commands

If you ever need to restart your app:

  • Stop it with Ctrl+C
  • Type pnpm dev again and press Enter

You'll be doing this many times over the journey. It becomes second nature.

How to verify it worked

  • Your terminal shows a “Ready” message and a localhost:3000 URL
  • You can visit http://localhost:3000 in your browser
  • You see your app's landing page

If all three are true, you're done with this step.

What to do if something went wrong

Problem: pnpm install shows errors.

Most often this happens because Node didn't install correctly. Run node --version — if it doesn't show a number, go back to Step 2.

Problem: pnpm dev says “port 3000 already in use”.

Something else is using port 3000 — likely another app or a previous version of this one. In the terminal, press Ctrl+C, then try:

Mac: kills whatever is on port 3000.

lsof -ti:3000 | xargs kill -9

Then run pnpm dev again.

Problem: Page won't load in browser.

Check that your terminal still shows the “Ready” message. If it shows errors, scroll up to see the first error — that's usually the real cause. Often a quick fix; if not, click Support.

Problem: I see the landing page but it looks broken.

Make sure you're at http://localhost:3000 (not https) and not at some other URL. If styling is broken (no colors, no layout), restart the app: Ctrl+C in the terminal, then pnpm dev again.

If you're stuck, click Support at the top of this page.