diff --git a/constructs/overview.mdx b/constructs/overview.mdx index d7f9e43..602fff1 100644 --- a/constructs/overview.mdx +++ b/constructs/overview.mdx @@ -1,14 +1,17 @@ --- -title: Using Constructs -description: 'Build monitoring infrastructure with reusable TypeScript classes' +title: Using Checkly CLI Constructs +description: 'Build monitoring infrastructure using JavaScript/TypeScript and the Checkly CLI' sidebarTitle: 'Overview' --- import JsTsNote from '/snippets/js-ts-note.mdx'; import ChecklyConfigCodeBlock from '/snippets/checkly-config-example-code-block.mdx'; -Constructs are JavaScript/TypeScript classes that represent your all monitoring resources. Import them from `checkly/constructs` to create checks, alert channels, and other resources in code. + + You must install the [Checkly CLI](/cli/overview) before you can use constructs. + +Constructs are JavaScript/TypeScript classes that represent your all monitoring resources. Import them from `checkly/constructs` to create checks, alert channels, and other resources in code. diff --git a/constructs/quickstarts/browser-check.mdx b/constructs/quickstarts/browser-check.mdx deleted file mode 100644 index d71388f..0000000 --- a/constructs/quickstarts/browser-check.mdx +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Getting Started with Browser Checks as Code -sidebarTitle: Browser Check -description: Quick start guide for using Checkly constructs with the CLI ---- - -import ChecklyConfigCodeBlock from '/snippets/checkly-config-example-code-block.mdx'; -import CliInstallation from '/snippets/cli-installation.mdx'; - -Get started with Checkly constructs by building your first monitoring setup using the CLI. - - - -- Node.js 18+ installed -- A Checkly account - - - -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. - -## Installation - -Create a new directory and initialize your monitoring project: - -```bash Terminal -mkdir my-monitoring-project -cd my-monitoring-project -npm init -y -``` - -Install the Checkly CLI. - -```bash Terminal -npm install --save-dev checkly -``` - -Recommended: Install [jiti](https://www.npmjs.com/package/jiti) to use TypeScript for your Checkly monitoring setup. - -```bash Terminal -npm i --save-dev jiti -``` - -## Project Setup - -Create a `checkly.config` file with basic settings: - - - -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 -mkdir -p src/__checks__ -``` - -Create `src/__checks__/website-monitoring.check.ts`: - -```ts src/__checks__/website-monitoring.check.ts -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 -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() -}) -``` - -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). - -## Testing Your Setup - -Test your configuration locally before deployment: - -```bash Terminal -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 -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 diff --git a/constructs/quickstarts/playwright-check.mdx b/constructs/quickstarts/playwright-check.mdx deleted file mode 100644 index 6d360b8..0000000 --- a/constructs/quickstarts/playwright-check.mdx +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: 'Creating A Playwright Check' -description: 'Get started with Checkly by creating your first Browser Check' -sidebarTitle: 'Playwright Check' ---- - -## QuickStart Guide - -Here's how to get from zero to deployed checks in 5 minutes. - -### Before you begin - -What you need: - -* A checkly account -* A repository using Playwright for E2E tests and a Playwright configuration file. - -## Steps - -### 1. Install the Checkly CLI - - - ```bash terminal - npm install --save-dev checkly - ``` - -### 2. [Optional] If you're using TypeScript - - If you're using TypeScript, install the dev dependencies [`jiti`](https://www.npmjs.com/package/jiti) and [`typescript`](https://www.npmjs.com/package/typescript). These help the CLI bundle your typescript config and test files correctly. - - ```bash terminal - npm install --save-dev jiti typescript - ``` - - - -### 3. Use `pw-test` to test in Checkly - -Run your Playwright test suite using `pw-test`. - -`pw-test` accepts both Checkly and Playwright command line arguments using the following syntax: - -`npx checkly pw-test --checkly-flag -- --playwright-flag`. Use `--` to separate Checkly and Playwright flags. - -The CLI command will then return a link to results, traces and more details: - -```bash -> npx checkly pw-test -- --project=chromium - -Parsing your Playwright project... ✅ - -Validating project resources... ✅ - -Bundling project resources... ✅ - -Running 1 checks in eu-west-1. - -playwright.config.ts - ✔ Playwright Test: --project=chromium (16s) - -Detailed session summary at: https://chkly.link/l/linkhere -``` - - -### 4. Convert tests to checks with `pw-test`: - -Using `pw-test` with the `--create-check` flag will create a `checkly.config.ts` file if it doesn't exist, and will add the new check. Afterwards, you can tweak the monitoring configuration for your check. - -For example: - -```bash -> npx checkly pw-test --create-check -- --project=chromium -⚠ No Checkly config file found - -ℹ Creating a default checkly config file. - -Creating Checkly check from Playwright test... ✅ -``` - -Review the resulting check configuration in your `checkly.config.ts` file and make sure to tweak locations and schedule as needed. - -```typescript {title="checkly.config.ts"} -import { defineConfig } from 'checkly' - -const config = defineConfig({ - logicalId: 'my-repo-name', - projectName: 'my-repo-name', - checks: { - playwrightConfigPath: './playwright.config.ts', - playwrightChecks: [ - { - logicalId: 'playwright-check-project-chromium', // tweak ID - name: 'Playwright Test: --project=chromium', // tweak name - testCommand: 'npx playwright test --project=chromium', // what we'll run as part of your check suite - locations: [ - 'eu-central-1', // add or change locations - ], - frequency: 10, // a custom per-check frequency - }, - ], - frequency: 10, // a global default frequency - locations: [ - 'us-east-1', // a global default location - ], - }, - cli: { - runLocation: 'us-east-1', // where test and pw-test will run - }, -}) - -export default config - -``` - -### 5. Deploy your Playwright Check Suites - -Once you are ready to start monitoring your applications with these checks, deploy your Playwright Check Suite into global monitoring with `npx checkly deploy`. - - ```bash terminal -npx checkly deploy - -> You are about to deploy your project "playwright-check-suites" to account "Checkly E2E Prod". Do you want to continue? … yes - -Successfully deployed project "playwright-check-suite" to account "Checkly E2E Prod". -``` - -Once deployed, your checks will run on a schedule and results will appear in your [home dashboard](https://app.checklyhq.com/). - -### 6. Set up Alerts - -Configure alert channels and alert groups to get notified when checks fail. You can receive alerts via email, Slack, webhooks, and more. - -To set up alerts: - -1. Go to the Checkly dashboard. -2. Navigate to [**Alert Channels** ](https://app.checklyhq.com/accounts/alerts/settings) to create a new channel. -3. Assign channels to your project or individual checks. - -Learn more in the [alerting guide](https://www.checklyhq.com/docs/alerts/). - -And all done! diff --git a/docs.json b/docs.json index b1c92ec..fcdb9b8 100644 --- a/docs.json +++ b/docs.json @@ -464,14 +464,7 @@ "pages": [ "constructs/overview", - "constructs/including-checks", - { - "group": "Quickstarts", - "pages": [ - "constructs/quickstarts/browser-check", - "constructs/quickstarts/playwright-check" - ] - } + "constructs/including-checks" ] },