ai quickstart

docs.json

@@ -50,6 +50,7 @@
               {
                 "group": "Quickstarts",
                 "pages": [
+                  "quickstarts/general",
                   "quickstarts/tcp-monitor",
                   "quickstarts/url-monitor",
                   "quickstarts/browser-check",

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.
+
+<Accordion title="Prerequisites">
+- [Node.js](https://nodejs.org) 18 or later, and npm
+- A terminal
+- (Optional) the URL of an app or API you want to monitor
+</Accordion>
+
+<Steps>
+  <Step title="Bootstrap a Checkly project">
+  Run the init command in your project directory. It guides you through the required steps to set up a fully working example.
+
+  <CliProjectInit />
+
+  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.
+  </Step>
+
+  <Step title="Log in to Checkly">
+  Log in to your Checkly account, or create a free one, right from the terminal.
+
+  <CliAuth />
+
+  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.
+  </Step>
+
+  <Step title="Write your first check">
+  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:
+
+  <CodeGroup dropdown>
+  ```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' })
+  })
+  ```
+  </CodeGroup>
+
+  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).
+  </Step>
+
+  <Step title="Run your checks locally">
+  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).
+  </Step>
+
+  <Step title="Deploy to production">
+  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.
+  </Step>
+
+  <Step title="Set up alerts">
+  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.
+
+  <Tabs>
+    <Tab title="Slack">
+    ```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,
+    })
+    ```
+    </Tab>
+
+    <Tab title="Phone">
+    ```ts alert-channels.ts
+    import { PhoneCallAlertChannel } from 'checkly/constructs'
+
+    export const phoneChannel = new PhoneCallAlertChannel('phone-alert-channel', {
+      name: 'On-call engineer',
+      phoneNumber: '+1234567890',
+    })
+    ```
+    </Tab>
+
+    <Tab title="Email">
+    ```ts alert-channels.ts
+    import { EmailAlertChannel } from 'checkly/constructs'
+
+    export const emailChannel = new EmailAlertChannel('email-alert-channel', {
+      address: 'alerts@example.com',
+    })
+    ```
+    </Tab>
+  </Tabs>
+
+  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.
+  </Step>
+</Steps>
+
+<Note>
+When you're done experimenting, tear down everything this project created with `npx checkly destroy`.
+</Note>
+
+## Go deeper
+
+<Columns cols={2}>
+  <Card title="Constructs reference" href="/constructs/overview">
+    Every check, monitor, and alert channel you can define as code.
+  </Card>
+  <Card title="CLI reference" href="/cli/overview">
+    All `npx checkly` commands and options.
+  </Card>
+  <Card title="Browser Checks" href="/quickstarts/browser-check">
+    Monitor realistic user flows with Playwright.
+  </Card>
+  <Card title="API Checks" href="/quickstarts/api-check">
+    Monitor your backend services and endpoints.
+  </Card>
+  <Card title="Alerts" href="/communicate/alerts/overview">
+    Configure who gets notified, and how.
+  </Card>
+  <Card title="CI/CD integration" href="/integrations/ci-cd/overview">
+    Run and deploy your checks from your pipeline.
+  </Card>
+</Columns>