Developer Scripts

The CyberPath project utilizes a set of scripts defined in package.json to automate common development and build tasks. These scripts, executed via pnpm, handle everything from starting the local development server to creating a production-ready build, including the automated generation of a screenshot asset.

The primary scripts facilitate local development, building the static site, and previewing the production build. The build script is particularly notable for its multi-step process that concludes with running a custom Node.js script to capture a screenshot of the application's database page.

Sources: package.json:5-10, README.md:39-53

Available Scripts

The project's core developer tasks are managed through npm scripts. These are defined in the scripts section of the package.json file.

Sources: package.json:5-10

• start | astro dev | An alias for the dev script. - |
  | build | astro check && astro build && astro preferences disable devToolbar && npx puppeteer browsers install chrome && node ./scripts/screenshot.js | Executes a multi-step production build process. It includes type checking, building the site, disabling the dev toolbar, installing the Chrome browser for Puppeteer, and running the screenshot.js script. |
  | preview | astro preview | Starts a local server to preview the production build. - |
  | astro | astro | Provides direct access to the Astro CLI for other commands. - |

Usage

To run any of the scripts, pnpm is required. The general command format is:

pnpm run <script_name>

For example, to start the development server:

pnpm run dev

Sources: README.md:35-37, 49-53, package.json:5-10

Build Process

The build script is the most complex, chaining several commands to produce a complete production artifact.

Sources: package.json:8

This diagram illustrates the sequence of operations executed by the pnpm run build command.

1. astro check: Performs type checking across the project using TypeScript.
2. astro build: Compiles the Astro project into static files. The output asset directory is configured as assets in astro.config.ts.
3. astro preferences disable devToolbar: Disables the Astro Dev Toolbar in the production build.
4. npx puppeteer browsers install chrome: Ensures the correct version of Chrome for Puppeteer is downloaded. This is a dependency for the screenshot script.
5. node ./scripts/screenshot.js: Executes the custom script to generate a screenshot of the application.

Sources: package.json:8, astro.config.ts:25-27

Screenshot Script (screenshot.js)

This Node.js script is a critical part of the build process. It programmatically launches a headless browser, navigates to the application's database page, and captures a screenshot which is then optimized and saved as a WebP image in the build's asset directory.

Sources: scripts/screenshot.js:1-7, 161-164

Dependencies

The script relies on two key devDependencies:

• puppeteer: To control a headless Chrome browser for navigation and screenshotting.
• sharp: For high-performance image processing to crop and optimize the screenshot into a WebP format.

Sources: package.json:40, 41, scripts/screenshot.js:12, 13

Execution Flow

The following sequence diagram details the internal process of the screenshot.js script.

Key Functions

The script is organized into several asynchronous functions:

Sources: scripts/screenshot.js:22-45, 51-64, 70-87, 93-105, 107-159