# LOCAL_PREVIEW.md — Run the staging preview on a Windows PC

> For a non-technical user. Follow the steps in order. Every command is
> copy-pasteable. No secrets or credentials are needed at any step.

## What you need

- A Windows 10 or Windows 11 PC with internet access.
- About 15 minutes the first time.

## Step 1 — Install Git for Windows

1. Open your web browser and go to `https://git-scm.com/download/win`.
2. Download the installer and run it.
3. Accept all the default options (keep clicking Next / Install).
4. Check it worked. Open **PowerShell** (press the Windows key, type
   `PowerShell`, press Enter) and run:

```powershell
git --version
```

5. You should see something like `git version 2.x.x`. If you see an
   error, close PowerShell, reopen it, and try again.

## Step 2 — Install Node.js LTS

1. Open your web browser and go to `https://nodejs.org/`.
2. Download the button marked **LTS** (Long Term Support) for Windows
   and run the installer. Accept the defaults.
3. Check it worked. In the same PowerShell window, run:

```powershell
node --version
```

```powershell
npm --version
```

4. You should see version numbers for both (for example `v22.x.x`
   and `10.x.x`). If not, close PowerShell, reopen it, and try again.

## Step 3 — Install VS Code (recommended editor)

1. Open your web browser and go to `https://code.visualstudio.com/`.
2. Download VS Code for Windows and run the installer. Accept the defaults.
3. You do not have to use VS Code, but the steps below assume you can
   open a folder in it if you want to look at the files.

## Step 4 — Get the preview files (clone the repo)

1. In PowerShell, go to where you want the files. For example:

```powershell
cd $HOME\Documents
```

2. Clone the repository (the CTO will give you the exact address;
   replace the example below with it):

```powershell
git clone <REPO-URL-FROM-CTO>
```

3. Move into the new folder. The folder name is
   `afc-youth-summit-staging` unless the CTO tells you otherwise:

```powershell
cd afc-youth-summit-staging
```

4. Make sure you are on the production branch:

```powershell
git branch --show-current
```

5. If the command does not print `main`, run:

```powershell
git checkout main
```

## Step 5 — Check the files (no install needed)

1. This preview has no dependencies, so there is nothing to install.
2. Confirm the files are there:

```powershell
dir
```

3. You should see `index.html`, `package.json`, `LOCAL_PREVIEW.md`,
   and `CLOUDFLARE_PAGES.md`.

## Step 6 — Start the local preview

1. In the same folder, run:

```powershell
npm run preview
```

2. Leave that PowerShell window open. You should see:

```text
Preview: http://localhost:8080/
```

3. If the port is busy, run it on another port instead:

```powershell
$env:PORT=8081; npm run preview
```

## Step 7 — Open the site

1. Open your web browser and go to:

```text
http://localhost:8080/
```

2. (If you used port 8081 in Step 6, open `http://localhost:8081/` instead.)
3. You should see the page **“Youth Summit and Teenage Camp”** with the
   yellow **STAGING PREVIEW** banner, the dates **Dec 25–28, 2026**,
   and the Venue / Programme / Contact placeholders.

## Step 8 — Stop the preview

1. Go back to the PowerShell window running the preview.
2. Press `Ctrl + C` once, then answer `Y` if asked to terminate.
3. Close PowerShell when done.

## If something goes wrong

| Problem | What to do |
|---|---|
| `git` is not recognized | Close and reopen PowerShell after installing Git, then retry Step 1. |
| `node` is not recognized | Close and reopen PowerShell after installing Node.js, then retry Step 2. |
| `npm run preview` shows an error | Run `node --check scripts\serve.mjs` and send the CTO the exact error text. |
| Browser shows “connection refused” | Check the preview is still running (Step 6 window open) and the port matches. |
| You see an old version of the page | Run `git pull` in the project folder, restart the preview (Steps 6–7). |

## Quick reference (all commands)

```powershell
git --version
node --version
npm --version
cd $HOME\Documents
git clone <REPO-URL-FROM-CTO>
cd afc-youth-summit-staging
git branch --show-current
dir
npm run preview
```

Open `http://localhost:8080/` in your browser.