From 91b1c523591b37c2efc18596b2d6de0ebfcb9290 Mon Sep 17 00:00:00 2001 From: Dan Giordano Date: Tue, 16 Jun 2026 16:12:19 -0400 Subject: [PATCH 1/3] ai quickstart --- docs.json | 1 + quickstarts/general.mdx | 211 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 212 insertions(+) create mode 100644 quickstarts/general.mdx diff --git a/docs.json b/docs.json index 8e42572b..bf0af640 100644 --- a/docs.json +++ b/docs.json @@ -50,6 +50,7 @@ { "group": "Quickstarts", "pages": [ + "quickstarts/general", "quickstarts/tcp-monitor", "quickstarts/url-monitor", "quickstarts/browser-check", diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx new file mode 100644 index 00000000..3bb8fb89 --- /dev/null +++ b/quickstarts/general.mdx @@ -0,0 +1,211 @@ +--- +title: 'Checkly Quickstart' +description: 'Go from an empty folder to synthetic monitoring running in production with the Checkly CLI.' +sidebarTitle: 'General' +--- + +import CliAuth from '/snippets/cli-auth.mdx'; +import CliProjectInit from '/snippets/cli-project-init.mdx'; + +This quickstart walks you through the complete Checkly workflow with the [Checkly CLI](/cli/overview): bootstrap a project, write a check as code, test it against Checkly's global infrastructure, and deploy it to run around the clock. This is the [Monitoring as Code](/concepts/monitoring-as-code) path — your monitoring lives in your repository, right next to your application code. + +If you'd rather create a single check in the web UI, start with one of the check-type quickstarts like the [API Check](/quickstarts/api-check) or [Browser Check](/quickstarts/browser-check) instead. + + +- [Node.js](https://nodejs.org) 18 or later, and npm +- A terminal +- (Optional) the URL of an app or API you want to monitor + + + + + Run the init command in your project directory. It guides you through the required steps to set up a fully working example. + + + + This scaffolds a `checkly.config.ts` file and a `__checks__` folder containing a few starter checks: + + ```bash Project structure + |- checkly.config.ts + |__checks__ + |- api.check.ts + |- heartbeat.check.ts + |- homepage.spec.ts + ``` + + The `checkly.config.ts` file holds your project-wide settings, such as the default run frequency, locations, and which files contain your checks. + + + + Log in to your Checkly account — or create a free one — right from the terminal. + + + + This opens your browser to authenticate. Once you're logged in, you can run and deploy checks from your machine. Run `npx checkly whoami` at any time to confirm which account you're connected to. + + + + Checks are plain TypeScript or JavaScript. Open `__checks__/api.check.ts` and point it at an endpoint you care about. An [API Check](/quickstarts/api-check) sends an HTTP request and asserts on the response: + + + ```ts api.check.ts + import { ApiCheck, AssertionBuilder, Frequency } from 'checkly/constructs' + + new ApiCheck('hello-api-1', { + name: 'Hello API', + activated: true, + frequency: Frequency.EVERY_1M, + request: { + method: 'GET', + url: 'https://mac-demo-repo.vercel.app/api/hello', + assertions: [ + AssertionBuilder.statusCode().equals(200), + ], + }, + }) + ``` + + ```js api.check.js + const { ApiCheck, AssertionBuilder, Frequency } = require('checkly/constructs') + + new ApiCheck('hello-api-1', { + name: 'Hello API', + activated: true, + frequency: Frequency.EVERY_1M, + request: { + method: 'GET', + url: 'https://mac-demo-repo.vercel.app/api/hello', + assertions: [ + AssertionBuilder.statusCode().equals(200), + ], + }, + }) + ``` + + + To monitor a realistic user flow instead, edit `__checks__/homepage.spec.ts` — it's a standard `@playwright/test` file that runs as a [Browser Check](/quickstarts/browser-check). For every construct and option, see the [Constructs reference](/constructs/overview). + + + + Dry-run all your checks against Checkly's global infrastructure before you deploy anything: + + ```bash Terminal + npx checkly test + ``` + + You'll see the results in your terminal: + + ``` + Running 2 checks in eu-west-1. + + __checks__/api.check.ts + ✔ Hello API (222ms) + __checks__/homepage.spec.ts + ✔ Homepage (24s) + + 2 passed, 2 total + ``` + + Add `--record` to capture full logs, traces, and videos and review them in the [Checkly web app](https://app.checklyhq.com). + + + + Deploy your checks and related resources to Checkly. From now on, they run around the clock from Checkly's global locations: + + ```bash Terminal + npx checkly deploy + ``` + + Open [your Checkly dashboard](https://app.checklyhq.com) and you'll see your checks, ready to start monitoring. + + + + Add an [alert channel](/communicate/alerts/overview) so you're notified the moment a check fails. Define it as a construct and attach it to your check through the `alertChannels` array. + + + + ```ts alert-channels.ts + import { SlackAppAlertChannel } from 'checkly/constructs' + + export const slackChannel = new SlackAppAlertChannel('slack-alert-channel', { + slackChannels: ['#alerts'], + sendFailure: true, + sendRecovery: true, + sendDegraded: false, + }) + ``` + + + + ```ts alert-channels.ts + import { PhoneCallAlertChannel } from 'checkly/constructs' + + export const phoneChannel = new PhoneCallAlertChannel('phone-alert-channel', { + name: 'On-call engineer', + phoneNumber: '+1234567890', + }) + ``` + + + + ```ts alert-channels.ts + import { EmailAlertChannel } from 'checkly/constructs' + + export const emailChannel = new EmailAlertChannel('email-alert-channel', { + address: 'alerts@example.com', + }) + ``` + + + + Import the channel into your check and add it to `alertChannels`: + + ```ts api.check.ts + import { ApiCheck, AssertionBuilder, Frequency } from 'checkly/constructs' + import { slackChannel } from './alert-channels' + + new ApiCheck('hello-api-1', { + name: 'Hello API', + activated: true, + frequency: Frequency.EVERY_1M, + alertChannels: [slackChannel], + request: { + method: 'GET', + url: 'https://mac-demo-repo.vercel.app/api/hello', + assertions: [ + AssertionBuilder.statusCode().equals(200), + ], + }, + }) + ``` + + Run `npx checkly deploy` again to apply your alerting. See the [alert channels overview](/communicate/alerts/channels) for every supported channel. + + + + +Done experimenting? Tear down everything this project created with `npx checkly destroy`. + + +## Go deeper + + + + Every check, monitor, and alert channel you can define as code. + + + All `npx checkly` commands and options. + + + Monitor realistic user flows with Playwright. + + + Monitor your backend services and endpoints. + + + Configure who gets notified, and how. + + + Run and deploy your checks from your pipeline. + + From 2a0e7b21e0a274bd06ce99ad31d39503a0131c6f Mon Sep 17 00:00:00 2001 From: Dan Giordano Date: Tue, 16 Jun 2026 16:27:00 -0400 Subject: [PATCH 2/3] cleaned --- quickstarts/general.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index 3bb8fb89..95dbd1cd 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -7,7 +7,7 @@ sidebarTitle: 'General' import CliAuth from '/snippets/cli-auth.mdx'; import CliProjectInit from '/snippets/cli-project-init.mdx'; -This quickstart walks you through the complete Checkly workflow with the [Checkly CLI](/cli/overview): bootstrap a project, write a check as code, test it against Checkly's global infrastructure, and deploy it to run around the clock. This is the [Monitoring as Code](/concepts/monitoring-as-code) path — your monitoring lives in your repository, right next to your application code. +This quickstart walks you through the complete Checkly workflow with the [Checkly CLI](/cli/overview): bootstrap a project, write a check as code, test it against Checkly's global infrastructure, and deploy it to run around the clock. This is the [Monitoring as Code](/concepts/monitoring-as-code) path, where your monitoring lives in your repository alongside your application code. If you'd rather create a single check in the web UI, start with one of the check-type quickstarts like the [API Check](/quickstarts/api-check) or [Browser Check](/quickstarts/browser-check) instead. @@ -37,7 +37,7 @@ If you'd rather create a single check in the web UI, start with one of the check - Log in to your Checkly account — or create a free one — right from the terminal. + Log in to your Checkly account, or create a free one, right from the terminal. @@ -45,7 +45,7 @@ If you'd rather create a single check in the web UI, start with one of the check - Checks are plain TypeScript or JavaScript. Open `__checks__/api.check.ts` and point it at an endpoint you care about. An [API Check](/quickstarts/api-check) sends an HTTP request and asserts on the response: + Checks are plain TypeScript or JavaScript. Open `__checks__/api.check.ts` and point it at an endpoint you want to monitor. An [API Check](/quickstarts/api-check) sends an HTTP request and asserts on the response: ```ts api.check.ts @@ -83,7 +83,7 @@ If you'd rather create a single check in the web UI, start with one of the check ``` - To monitor a realistic user flow instead, edit `__checks__/homepage.spec.ts` — it's a standard `@playwright/test` file that runs as a [Browser Check](/quickstarts/browser-check). For every construct and option, see the [Constructs reference](/constructs/overview). + To monitor a realistic user flow instead, edit `__checks__/homepage.spec.ts`, a standard `@playwright/test` file that runs as a [Browser Check](/quickstarts/browser-check). For every construct and option, see the [Constructs reference](/constructs/overview). @@ -120,7 +120,7 @@ If you'd rather create a single check in the web UI, start with one of the check - Add an [alert channel](/communicate/alerts/overview) so you're notified the moment a check fails. Define it as a construct and attach it to your check through the `alertChannels` array. + Add an [alert channel](/communicate/alerts/overview) so you're notified when a check fails. Define it as a construct and attach it to your check through the `alertChannels` array. @@ -184,7 +184,7 @@ If you'd rather create a single check in the web UI, start with one of the check -Done experimenting? Tear down everything this project created with `npx checkly destroy`. +When you're done experimenting, tear down everything this project created with `npx checkly destroy`. ## Go deeper From 70d6660fdb47043628d90df494329cd30535d5db Mon Sep 17 00:00:00 2001 From: Dan Giordano Date: Wed, 17 Jun 2026 11:30:08 -0400 Subject: [PATCH 3/3] Browser Check --- quickstarts/general.mdx | 85 +++++++++++++++++------------------------ 1 file changed, 34 insertions(+), 51 deletions(-) diff --git a/quickstarts/general.mdx b/quickstarts/general.mdx index 95dbd1cd..6494188e 100644 --- a/quickstarts/general.mdx +++ b/quickstarts/general.mdx @@ -45,45 +45,33 @@ If you'd rather create a single check in the web UI, start with one of the check - Checks are plain TypeScript or JavaScript. Open `__checks__/api.check.ts` and point it at an endpoint you want to monitor. An [API Check](/quickstarts/api-check) sends an HTTP request and asserts on the response: + Checks are code. The scaffolded `__checks__/homepage.spec.ts` is a [Browser Check](/quickstarts/browser-check): a standard `@playwright/test` file that Checkly runs as a monitor. Edit it to load a page and assert on what matters: - ```ts api.check.ts - import { ApiCheck, AssertionBuilder, Frequency } from 'checkly/constructs' - - new ApiCheck('hello-api-1', { - name: 'Hello API', - activated: true, - frequency: Frequency.EVERY_1M, - request: { - method: 'GET', - url: 'https://mac-demo-repo.vercel.app/api/hello', - assertions: [ - AssertionBuilder.statusCode().equals(200), - ], - }, + ```ts homepage.spec.ts + import { test, expect } from '@playwright/test' + + test('homepage loads', async ({ page }) => { + const response = await page.goto('https://www.checklyhq.com') + expect(response?.status()).toBeLessThan(400) + await expect(page).toHaveTitle(/Checkly/) + await page.screenshot({ path: 'homepage.jpg' }) }) ``` - ```js api.check.js - const { ApiCheck, AssertionBuilder, Frequency } = require('checkly/constructs') - - new ApiCheck('hello-api-1', { - name: 'Hello API', - activated: true, - frequency: Frequency.EVERY_1M, - request: { - method: 'GET', - url: 'https://mac-demo-repo.vercel.app/api/hello', - assertions: [ - AssertionBuilder.statusCode().equals(200), - ], - }, + ```js homepage.spec.js + const { test, expect } = require('@playwright/test') + + test('homepage loads', async ({ page }) => { + const response = await page.goto('https://www.checklyhq.com') + expect(response?.status()).toBeLessThan(400) + await expect(page).toHaveTitle(/Checkly/) + await page.screenshot({ path: 'homepage.jpg' }) }) ``` - To monitor a realistic user flow instead, edit `__checks__/homepage.spec.ts`, a standard `@playwright/test` file that runs as a [Browser Check](/quickstarts/browser-check). For every construct and option, see the [Constructs reference](/constructs/overview). + Checkly turns every `*.spec.ts` file into a Browser Check through the `browserChecks.testMatch` pattern in your `checkly.config.ts`. To monitor an endpoint instead, edit `__checks__/api.check.ts`, which defines an [API Check](/quickstarts/api-check). For every construct and option, see the [Constructs reference](/constructs/overview). @@ -98,10 +86,10 @@ If you'd rather create a single check in the web UI, start with one of the check ``` Running 2 checks in eu-west-1. + __checks__/homepage.spec.ts + ✔ homepage loads (24s) __checks__/api.check.ts ✔ Hello API (222ms) - __checks__/homepage.spec.ts - ✔ Homepage (24s) 2 passed, 2 total ``` @@ -120,7 +108,7 @@ If you'd rather create a single check in the web UI, start with one of the check - Add an [alert channel](/communicate/alerts/overview) so you're notified when a check fails. Define it as a construct and attach it to your check through the `alertChannels` array. + Add an [alert channel](/communicate/alerts/overview) so you're notified when a check fails. Define it in a new `__checks__/alert-channels.ts` file, then attach it to your checks through the `alertChannels` defaults in your config. @@ -158,28 +146,23 @@ If you'd rather create a single check in the web UI, start with one of the check - Import the channel into your check and add it to `alertChannels`: - - ```ts api.check.ts - import { ApiCheck, AssertionBuilder, Frequency } from 'checkly/constructs' - import { slackChannel } from './alert-channels' - - new ApiCheck('hello-api-1', { - name: 'Hello API', - activated: true, - frequency: Frequency.EVERY_1M, - alertChannels: [slackChannel], - request: { - method: 'GET', - url: 'https://mac-demo-repo.vercel.app/api/hello', - assertions: [ - AssertionBuilder.statusCode().equals(200), - ], + Set the channel as a default in your `checkly.config.ts` so every check, including your Browser Check, uses it: + + ```ts checkly.config.ts + import { defineConfig } from 'checkly' + import { slackChannel } from './__checks__/alert-channels' + + export default defineConfig({ + projectName: 'My Project', + logicalId: 'my-project', + checks: { + // ...your existing check defaults + alertChannels: [slackChannel], }, }) ``` - Run `npx checkly deploy` again to apply your alerting. See the [alert channels overview](/communicate/alerts/channels) for every supported channel. + You can also attach `alertChannels` to an individual check or a [check group](/constructs/check-group-v2) for finer control. Run `npx checkly deploy` again to apply your alerting, and see the [alert channels overview](/communicate/alerts/channels) for every supported channel.