> ## Documentation Index
> Fetch the complete documentation index at: https://checkly-422f444a-paula-tree-202-entitlements-group-troubles.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started with Browser Checks as Code

> Quick start guide for using Checkly constructs with the CLI

Get started with Checkly constructs by building your first monitoring setup using the CLI.

<AccordionGroup>
  <Accordion title="Prerequisites">
    * Node.js 18+ installed
    * A Checkly account
  </Accordion>
</AccordionGroup>

<Note>Use this guide to manually set up your Checkly configuration. [Follow the quickstart guide](quickstarts/browser-check/) and `npm create checkly` for an automatic setup.</Note>

## Installation

Create a new directory and initialize your monitoring project:

```bash Terminal theme={null}
mkdir my-monitoring-project
cd my-monitoring-project
npm init -y
```

Install the Checkly CLI.

```bash Terminal theme={null}
npm install --save-dev checkly
```

Recommended: Install [jiti](https://www.npmjs.com/package/jiti) to use TypeScript for your Checkly monitoring setup.

```bash Terminal theme={null}
npm i --save-dev jiti
```

## Project Setup

Create a `checkly.config` file with basic settings:

<CodeGroup dropdown>
  ```ts checkly.config.ts theme={null}
  import { defineConfig } from "checkly"
  import { Frequency } from "checkly/constructs"

  export default defineConfig({
    projectName: "Website Monitoring",
    logicalId: "website-monitoring-1",
    repoUrl: "https://github.com/you/your-project",
    checks: {
      activated: true,
      muted: false,
      runtimeId: "2025.04",
      frequency: Frequency.EVERY_5M,
      locations: ["us-east-1", "eu-west-1"],
      tags: ["website", "api"],
      checkMatch: "**/*.check.ts",
      browserChecks: {
        frequency: Frequency.EVERY_10M,
        testMatch: "browsers/**/*.spec.ts",
      },
      multiStepChecks: {
        testMatch: "multistep/**/*.spec.ts",
      },
    },
    cli: {
      runLocation: "eu-west-1",
    },
  })
  ```

  ```js checkly.config.js theme={null}
  const { defineConfig } = require("checkly")
  const { Frequency } = require("checkly/constructs")

  module.exports = defineConfig({
    projectName: "Website Monitoring",
    logicalId: "website-monitoring-1",
    repoUrl: "https://github.com/you/your-project",
    checks: {
      activated: true,
      muted: false,
      runtimeId: "2025.04",
      frequency: Frequency.EVERY_5M,
      locations: ["us-east-1", "eu-west-1"],
      tags: ["website", "api"],
      checkMatch: "**/*.check.js",
      browserChecks: {
        frequency: Frequency.EVERY_10M,
        testMatch: "browsers/**/*.spec.js",
      },
      multiStepChecks: {
        testMatch: "multistep/**/*.spec.js",
      },
    },
    cli: {
      runLocation: "eu-west-1",
    },
  })
  ```
</CodeGroup>

Learn more about the general Checkly settings at [Project and Configuration](/constructs/project).

## Your First Checkly CLI Construct

Create a monitoring setup using monitoring as code constructs. First, create the directory structure:

```bash Terminal theme={null}
mkdir -p src/__checks__
```

Create `src/__checks__/website-monitoring.check.ts`:

```ts src/__checks__/website-monitoring.check.ts theme={null}
import {
  BrowserCheck,
  Frequency
} from 'checkly/constructs'

// Create a browser check running a Playwright Test script
new BrowserCheck("homepage-check", {
  name: "Homepage Test",
  frequency: Frequency.EVERY_5M,
  locations: ["us-east-1", "eu-west-1"],
  code: {
    entrypoint: "./homepage.spec.ts"
  }
})
```

Create the browser test file `src/__checks__/homepage.spec.ts`:

```ts src/__checks__/homepage.spec.ts theme={null}
import { test, expect } from '@playwright/test'

test('Homepage loads successfully', async ({ page }) => {
  // Navigate to your website
  await page.goto('https://your-website.com')

  // Check the page title
  await expect(page).toHaveTitle(/Your Site Name/)

  // Verify main navigation is visible
  const navigation = page.locator('nav')
  await expect(navigation).toBeVisible()

  // Check for key content
  const mainContent = page.getByRole('main')
  await expect(mainContent).toBeVisible()
})
```

<Tip>If you're unfamiliar with Playwright Test, [learn more about Microsoft's end-to-end testing framework in the `/learn` section](/learn/playwright/what-is-playwright).</Tip>

## Testing Your Setup

Test your configuration locally before deployment:

```bash Terminal theme={null}
npx checkly test
```

[This `test` command](/cli/checkly-test) will run your browser check in the Checkly infrastructure. Use this flow to test your monitoring configuration and validate preview environments.

## Deployment

Deploy your monitoring to Checkly:

```bash Terminal theme={null}
npx checkly deploy
```

[The `deploy` command](/cli/checkly-deploy) turns your browser check into a synthetic monitor checking your website every 5 minutes from multiple locations.

## Next Steps

* Add [API checks](/constructs/api-check) to monitor your backend services
* Set up [alert channels](/constructs/email-alert-channel) for notifications
* Organize checks with [check groups](/constructs/check-group-v2)
* Create [dashboards](/constructs/dashboard) for monitoring visualization

## Learn More

* [Project configuration](/constructs/project) - Understand how to configure your monitoring project
* [Browser checks](/constructs/browser-check) - Deep dive into browser monitoring
* [Retry strategies](/constructs/retry-strategy) - Configure resilient monitoring