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..6494188e --- /dev/null +++ b/quickstarts/general.mdx @@ -0,0 +1,194 @@ +--- +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, 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. + + +- [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 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 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 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' }) + }) + ``` + + + 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). + + + + 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__/homepage.spec.ts + ✔ homepage loads (24s) + __checks__/api.check.ts + ✔ Hello API (222ms) + + 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 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. + + + + ```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', + }) + ``` + + + + 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], + }, + }) + ``` + + 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. + + + + +When you're 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. + +