psychiatryTest Garden Docs

Local Sandbox Development

To develop and test local changes to the dashboard or to debug your application's integrations without deploying to staging or production, you should run the Test Garden workspace locally.

The Mixed Content Barrier

Web browsers enforce strict security rules regarding iframe embedding and script loading:

  • If your dashboard is served over secure HTTPS (e.g. https://testgarden.dev), it cannot load a local development child site served over insecure HTTP (e.g. http://localhost:3001).
  • Similarly, a secure child site (HTTPS) cannot load an insecure local script (http://localhost:3000/js/testgarden-recorder.js) due to Mixed Content Security Restrictions.

To bypass this barrier during local development, both the parent dashboard and the child sandbox application must run locally over HTTP.

Step-by-Step Local Setup

Follow these steps to spin up the local development environment:

1. Start the Dashboard Server

Run the Next.js development server in your main test-garden repository:

npm run dev

This serves the dashboard application at http://localhost:3000.

2. Start the Mockup Sandbox Server

In order to test the recording and playback features, run the standalone mockup website sandbox. This serves a simple client site locally:

npm run mockup

This serves the client website sandbox at http://localhost:3001 (utilizing serve).

3. Connect the Local Property

  1. Open your local browser at http://localhost:3000 and sign in.
  2. Go to the Properties management page and click "Add New Website".
  3. Register localhost:3001 as your website domain.
  4. In the verification modal, set the URL to http://localhost:3001 and click Verify.
  5. The handshake will complete instantly via postMessage since both parent and iframe share HTTP protocol origins.

Modifying the Tracker Script Locally

Any changes made to the tracking script inside /public/js/testgarden-recorder.js in the main repository will take effect immediately. Since the local sandbox iframe loads the script directly from http://localhost:3000/js/testgarden-recorder.js, reloading the workspace iframe instantly applies your updates without needing any compiler steps.

Was this page helpful?