diff --git a/mdx-components.tsx b/mdx-components.tsx
index 18690ea..369061b 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -45,9 +45,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
const fileName = codeProps.fileName as string | undefined
const lineNumbers = codeProps.lineNumbers as boolean | undefined
const rawHighlight = codeProps.highlight as
- | string
- | string[]
- | undefined
+ string | string[] | undefined
const highlight =
typeof rawHighlight === 'string'
? (JSON.parse(rawHighlight) as string[])
diff --git a/src/app/basics/replay-qa/localhost/page.mdx b/src/app/basics/replay-qa/localhost/page.mdx
new file mode 100644
index 0000000..a407560
--- /dev/null
+++ b/src/app/basics/replay-qa/localhost/page.mdx
@@ -0,0 +1,120 @@
+---
+title: Testing a localhost app
+description: Connect Replay QA to a web app running on your computer with the managed reverse proxy.
+---
+
+Use the Replay QA reverse proxy to test a development build that is only available on your computer, such as `http://localhost:3000`. The Replay QA CLI creates an outbound tunnel from your computer so Replay QA can reach the app without deploying it or exposing it directly to the public internet.
+
+
+
+This guide is for testing interactively from your development computer. To test a localhost build inside GitHub Actions, use the [CI integration with FRPC](/basics/replay-qa/frpc-ci) instead.
+
+
+
+## How it works
+
+1. You start the app on your computer.
+2. You create a Replay QA project using the app's localhost URL and enable the reverse proxy.
+3. `replayqa proxy` opens an authenticated tunnel from your computer to Replay QA.
+4. Replay QA starts testing after both the tunnel and the local app are ready.
+5. You leave the app and proxy running for the entire test run.
+
+Requests reach the app from your computer, so the proxy uses the same local network, DNS, and VPN access that you do.
+
+## Prerequisites
+
+- The app is running and loads in a browser on this computer
+- The app has a stable local URL, such as `http://localhost:3000`
+- A Replay QA account
+- Node.js and `npx` on the computer running the app
+
+## Connect your app
+
+
+
+### Start the app
+
+Run your normal development command and leave it running. For example:
+
+```sh
+npm run dev
+```
+
+Open the exact URL you plan to test and confirm that it loads before continuing:
+
+```sh
+curl --fail http://localhost:3000
+```
+
+Use the app's actual port in place of `3000`.
+
+### Create a Replay QA project
+
+Open [Replay QA](https://qa.replay.io), create a project, and enter the exact local URL you verified, including the `http://` scheme and port.
+
+When Replay QA identifies the URL as local or private, choose the reverse proxy setup. The project will display a CLI command containing the correct project ID and Replay QA URL for that project.
+
+### Connect the reverse proxy
+
+Copy the CLI command from Replay QA and run it in a second terminal on the same computer as the app. It will look like this:
+
+```sh
+npx --yes replayqa proxy \
+ --project \
+ --qa-url
+```
+
+Use the complete command supplied by the project instead of replacing its project ID or `--qa-url` values yourself.
+
+If the CLI asks you to authenticate, sign in and then run the copied proxy command again:
+
+```sh
+npx --yes replayqa login
+```
+
+### Wait for Replay QA to become ready
+
+Leave the proxy terminal open while it checks the tunnel and local target. Replay QA starts testing automatically once the connection reports ready.
+
+Do not stop the development server or the proxy while Replay QA is exploring the app or running tests. Closing either process disconnects the test browser from the app.
+
+
+
+## Apps that use additional local or private hosts
+
+The proxy allows the project's target host by default. If the app also needs another local API, private hostname, or VPN-only service, add only the required hosts to the copied command:
+
+```sh
+npx --yes replayqa proxy \
+ --project \
+ --qa-url \
+ --allow "api.internal.example,auth.internal.example"
+```
+
+Keep this list narrow so the tunnel does not expose unrelated hosts that your computer can reach.
+
+## Troubleshooting
+
+### The proxy is connected, but Replay QA is not ready
+
+Confirm that the exact project URL still loads on the computer running the proxy. Check that the port has not changed and that the development server has not stopped.
+
+```sh
+curl --fail http://localhost:3000
+```
+
+### The CLI cannot connect or start its managed dependencies
+
+Run the built-in diagnostic, then retry the proxy command copied from Replay QA:
+
+```sh
+npx --yes replayqa doctor --fix --project
+```
+
+### The page loads, but an API or asset does not
+
+Check the failing request's hostname. If it is another local, private, or VPN-only host, add that hostname with `--allow`. Also confirm that the computer running the proxy can reach it directly.
+
+### The CLI asks you to sign in again
+
+Run `npx --yes replayqa login`, complete authentication, and restart the copied proxy command. Keep it running until Replay QA finishes.
diff --git a/src/app/basics/replay-qa/overview/page.mdx b/src/app/basics/replay-qa/overview/page.mdx
index 6237579..119d69d 100644
--- a/src/app/basics/replay-qa/overview/page.mdx
+++ b/src/app/basics/replay-qa/overview/page.mdx
@@ -24,6 +24,8 @@ This requires no existing test suite, no configuration, and no manual reproducti
+If the app is only running on your computer, follow [Testing a localhost app](/basics/replay-qa/localhost) to connect it with the Replay QA reverse proxy.
+
## Connect to a GitHub repo
Connect Replay QA directly to a GitHub repository and let it test every change as it lands. From your Replay QA project, install the GitHub App and authorize the repository you want to test — no CI configuration or workflow files required.
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 3645c86..5f24756 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -176,10 +176,7 @@ export function Navigation({
}) {
let pathname = usePathname()
let initialRoute = pathname.split('/')[1] as
- | 'basics'
- | 'learn'
- | 'reference'
- | undefined
+ 'basics' | 'learn' | 'reference' | undefined
if (
!initialRoute ||
!['basics', 'learn', 'reference'].includes(initialRoute)
diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
index 2e83bb8..cb215f6 100644
--- a/src/lib/navigation.ts
+++ b/src/lib/navigation.ts
@@ -23,6 +23,10 @@ export const navigation: Record = {
title: 'Overview',
href: '/basics/replay-qa/overview',
},
+ {
+ title: 'Testing a localhost app',
+ href: '/basics/replay-qa/localhost',
+ },
{
title: 'CI integration with FRPC',
href: '/basics/replay-qa/frpc-ci',