---
title: "Run Your Website"
description: "Choose the Node.js version and package manager for your project, install its dependencies, and start and stop a local development server."
canonical_url: "https://vercel.com/academy/build-and-launch-with-ai/run-your-website"
md_url: "https://vercel.com/academy/build-and-launch-with-ai/run-your-website.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-09-25T16:42:53.709Z"
content_type: "lesson"
course: "build-and-launch-with-ai"
course_title: "Build and Launch with AI"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Run Your Website

# Run your website

The website's files are on our computer. We'll run them locally so we can check an edit before publishing it. First, we need the software that runs the application and the packages it depends on.

Open the terminal in the folder from “Keep Your Code.” Check the location and read the project settings:

```sh
cd ~/projects/small-hours-studio
pwd
cat package.json
```

`cat` prints a file's contents. `package.json` lists the app's dependencies and its named commands, called *scripts*. Use your chosen folder name if it differs from ours.

## Outcome

Run the workshop website locally, then stop and restart its development server.

## Hands-on exercise 2.3

### Install the runtime

Node.js runs JavaScript outside the browser. Next.js uses it to prepare and serve our website. The reference app uses Node.js 22; its `package.json` has an `engines` entry that allows versions from 22 up to, but excluding, 23. A `.nvmrc` file also specifies 22.

Check your generated project's `engines` entry and any `.nvmrc` file before installing. Use its specified supported version when one exists. For a project without a version requirement, use Node.js 22 for this course.

On macOS, open the [Node.js download page](https://nodejs.org/en/download), select the required major version and macOS, and use the installer. In Ubuntu through WSL, use the Linux instructions on that page with the recommended version manager. Run those instructions inside Ubuntu, where the project lives. A Node.js installation in Windows alone doesn't set up the Linux environment.

Open a fresh terminal after installation, return to the website folder, and check:

```sh
node --version
npm --version
```

Both commands should print a version. npm is included with Node.js and can install the packages the project uses. Record the versions in your notes; setup errors are easier to investigate when we know what is installed.

### Follow the project's lockfile

A dependency is a package our application uses, such as React. The *lockfile* records the exact package versions installed for the project, so we can install those same versions again.

Run `ls` and look for one of these files:

| Lockfile            | Package manager | Install                          | Start the website |
| ------------------- | --------------- | -------------------------------- | ----------------- |
| `package-lock.json` | npm             | `npm ci`                         | `npm run dev`     |
| `pnpm-lock.yaml`    | pnpm            | `pnpm install --frozen-lockfile` | `pnpm run dev`    |

The reference app uses npm. A v0-generated app may use pnpm. Follow the row for your project throughout the course; changing package managers mid-project can introduce a second lockfile with different dependencies.

For pnpm, inspect the `packageManager` field in `package.json`. If it specifies a version such as `pnpm@10.17.1`, install that version with `npm install --global pnpm@10.17.1`, substituting the version your file names. If no version is specified, 10.17.1 is the course fallback. Check `pnpm --version` afterward. The [pnpm installation guide](https://pnpm.io/installation) covers installation errors.

Run the install command from your row in the website folder. Wait for it to finish successfully. A `node_modules` directory will contain the installed packages; we won't edit its files.

### Start the development server

In the reference app, the script we're about to run is defined like this:

```json
"dev": "next dev"
```

This launches Next.js in development mode. In your project folder, run `npm run dev`, or `pnpm run dev` for a pnpm project. Leave this terminal running.

Open the **Local** URL printed by the server. `localhost` refers to your computer. The number after the colon is the *port*, which identifies this running service. Use the printed URL because Next.js may choose another port if the usual one is occupied.

The homepage should show the workshop catalog. The public URL from Section 1 continues serving the published version while we work here.

**Requirements:**

1. Install a Node.js version compatible with the project.
2. Use the package manager selected by its lockfile.
3. Open the local URL and check both workshop listings.
4. Stop and restart the server below.

## Try It

Check the gardening workshop's two-hour duration and $45 example price on the local page. Select “Find your workshop.” These are the same checks we performed on the published site, now against the local copy.

Return to the terminal running the server and press Ctrl+C. Wait for the shell prompt to return. Reload the local page; it should fail to connect if that was the only server using the address. The published website should still open normally.

Run the same development command again and reopen the printed Local URL. Leave the restarted server running for the next lesson. Use a second terminal window for other commands.

### The install command cannot find `package.json`

Run `pwd` and `ls`. Move into the website folder containing `package.json` and retry the command. If `pwd` ends in `/projects`, we're still one folder above it.

### Installation reports an incompatible version or lockfile

Compare `node --version` with `engines` and `.nvmrc`, and compare the package-manager version with `packageManager`. Correct the mismatch before retrying. Keep the existing lockfile; removing it changes what we're installing. If the generated project has conflicting lockfiles or unsupported requirements, resolve that setup with the author before continuing.

## Commit

Record the runtime version and package manager beside your local folder path. Run `git status` in a second terminal in the website folder. Installing from the lockfile should leave the source files unchanged, and Git should ignore `node_modules`. Inspect unexpected changes before continuing.

## Done-When

- [ ] The runtime and package-manager version checks succeed.
- [ ] Dependencies install using the project's existing lockfile.
- [ ] The local homepage displays both workshops and its catalog link works.
- [ ] Ctrl+C stops the server, and restarting brings the homepage back.

## Solution

With the required runtime installed, the reference app's npm path is:

```sh
cd ~/projects/small-hours-studio
npm ci
npm run dev
```

Open the printed Local URL. Press Ctrl+C in that terminal to stop, then run `npm run dev` to restart. For a pnpm project, use `pnpm install --frozen-lockfile` and `pnpm run dev` in the same sequence. Keep the working server available for our first file edit.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)