Step 7 of 9Support

Step 7

Run your app for the first time

What you're about to do

Start your app 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

Steps 5 and 6 finished — your Supabase values in .env.local, dependencies installed, and your database tables created. Your code editor open with the project folder loaded. 5 minutes.

Before you start: Supabase and your database must be set up

Two things have to be done first, or your app breaks:

Your Supabase values must be in .env.local (Step 5). Supabase powers both your database and sign-in — there's no “sign up inside the app to set up Supabase,” because signing up is Supabase. Without these, every page crashes with supabaseUrl is required.
Your database tables must exist (Step 6). A brand-new Supabase project is empty, so even though sign-up works, the dashboard crashes with “Something went wrong” until you've run pnpm db:push and pnpm db:apply:manual.

If you skipped either, go back and finish it before running anything here.

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 ~ %), your terminal opened in your home folder instead of your project. The ~ is the giveaway — that's shorthand for “home.” That's fine; you just need to point it at your project, which is what the next part does.

If your terminal isn't in your project folder

You move the terminal into a folder with a command called cd — short for “change directory” (a directory is just another word for a folder). Type cd, then a space, then the path to your project, then press Enter.

If you put your project where Step 4 recommended, this is the command. Replace boilerplate with your folder's name if you renamed it:

cd ~/Documents/Projects/boilerplate

Easier: drag the folder into the terminal

If you're not sure of the exact path, type cd and a space, then drag your project folder from Finder (Mac) or File Explorer (Windows) directly onto the terminal window. It fills in the full path for you. Then press Enter.

Confirm you're in the right place

Run this to list what's in the current folder:

ls

You should see folders like platform, product, website, and a package.json file. If you do, you're in the right place and ready for the next part. If you see something else (or an error like “no such file or directory”), the path was wrong — try the drag-the-folder trick above.

Make sure your dependencies are installed

You installed your app's dependencies back in Step 6 (the pnpm install command). If you did, you're all set — skip straight to starting the app below.

If you're not sure, or you skipped that step, run it now. It takes 2–5 minutes the first time, and it's harmless to run again:

pnpm install

Rather have Cursor do it for you?

Since you installed Cursor in Step 2, you can let its AI run this for you instead of typing the command. Open Cursor's chat (the Cursor panel on the right, or press Cmd+L on Mac / Ctrl+L on Windows), paste this, and send it:

Install this project's dependencies using pnpm. Run pnpm install in the terminal at the project root. If pnpm isn't installed, tell me how to install it first, then run the install. Let me know when it finishes successfully.

Cursor will run the install in its own terminal and tell you when it's done. When it asks for permission to run a command, click Run. Either way works — pick whichever feels more comfortable.

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 (powered by the Supabase project you just connected), billing infrastructure, email systems, an admin dashboard, all of it. Because Supabase is connected, you'll be able to sign in — and from there the in-app journey walks you through Stripe, Resend, branding, and deploying. 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: every page crashes with supabaseUrl is required (or the app won't load at all).

Your Supabase values are missing or incomplete. Open .env.local and confirm all four are filled in: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY, and DATABASE_URL. If any are empty, finish Step 5, then stop the app (Ctrl+C) and run pnpm dev again — env changes only take effect on restart.

Problem: sign-up works, but the dashboard shows “Something went wrong” right after.

Your database tables haven't been created yet — a fresh Supabase project is empty, so the first page that reads your data crashes. Go back to Step 6 and run pnpm db:push (choose “Yes, I want to execute all statements”) and pnpm db:apply:manual. Then refresh the page — no need to restart the app.

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 3.

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.

Continue to Step 8