Deployment Process

Relevant source files

The following files were used as context for generating this wiki page:

• astro.config.ts
• package.json
• README.md
• scripts/screenshot.js
• src/pages/database/data-index.json.ts
• src/pages/robots.txt.ts

The deployment process for the CertDb project centers around building a static website using the Astro framework. The process is initiated via an npm script that performs several steps, including type checking, static site generation, and running a custom script to generate a screenshot of the application. The final output is a dist directory containing all the necessary static assets to be hosted on a web server.

The official website is updated automatically with every new release, which implies a Continuous Integration/Continuous Deployment (CI/CD) pipeline that executes this build process and deploys the resulting artifacts.

Sources: README.md:19-23, package.json:6-8, [astro.config.ts:25-26]

Build Execution

The entire build and deployment preparation is orchestrated by a single npm script defined in package.json.

Sources: [package.json:6-8]

Build Script

The build is triggered by running the pnpm run build command. This command executes a chain of tasks sequentially.

"build": "astro check && astro build && astro preferences disable devToolbar && npx puppeteer browsers install chrome && node ./scripts/screenshot.js",

Sources: [package.json:8]

The steps involved are:

1. astro check: Runs a diagnostic check on the project files, including type-checking for TypeScript and validating Astro components.
2. astro build: This is the core command that compiles the Astro project into a static site. It generates HTML, CSS, and JavaScript assets.
3. astro preferences disable devToolbar: Disables the Astro developer toolbar in the build output.
4. npx puppeteer browsers install chrome: Ensures that a compatible version of the Chrome browser is installed for Puppeteer to use.
5. node ./scripts/screenshot.js: Executes a custom Node.js script that generates a screenshot of the application's database page.

This diagram illustrates the flow of the build script.

Astro Build Configuration

The behavior of the astro build command is configured in astro.config.ts. This file specifies that the project should be built as a static site.

Static Site Generation

The configuration explicitly sets the output mode to static, which instructs Astro to pre-render every page to static HTML.

// https://astro.build/config
export default defineConfig({
    site:         "https://certdb.cyberpath-hq.com",
    base:          `/`,
    trailingSlash: `ignore`,
    // ...
    build:        {
        assets: "assets",
    },
    output:       "static",
});

Sources: [astro.config.ts:11-26]

Key configuration properties for the build include:

Property	Value	Description
site	https://certdb.cyberpath-hq.com	The base URL for the production site. Used for generating sitemaps and canonical URLs.
output	static	Configures the build to produce a statically generated site.
build.assets	assets	Defines the name of the directory within the build output (dist/) where assets will be placed.
integrations	sitemap()	Includes the sitemap integration, which generates a sitemap-index.xml file during the build.

Sources: astro.config.ts:12, astro.config.ts:19, [astro.config.ts:24-26]

During the build, Astro also generates dynamic assets like robots.txt and JSON data endpoints. For example, src/pages/database/data-index.json.ts creates a pre-computed search index for Fuse.js, which is then used by the frontend.

Sources: src/pages/database/data-index.json.ts, src/pages/robots.txt.ts

Post-Build Screenshot Generation

After the astro build command completes, the scripts/screenshot.js script is executed. This script is responsible for creating a promotional screenshot of the database page.

Sources: scripts/screenshot.js

Screenshot Script Flow

The script uses Puppeteer to control a headless Chrome browser and Sharp for image optimization.

1. Start Dev Server: It programmatically starts the Astro development server using npm run dev.
2. Initialize Puppeteer: Launches a headless browser and sets the viewport to 1920x800.
3. Navigate and Prepare: It navigates to http://localhost:4321/database/, waits for the network to be idle, removes the cookie banner, and scrolls down to hide the header. It then waits 10 seconds for the React components to load data and render.
4. Take Screenshot: Captures a screenshot of the page.
5. Optimize Image: The captured buffer is processed with sharp. The image is cropped to remove 300px from the left and right sides and then converted to WebP format with 80% quality.
6. Save Image: The final image is saved into the ./dist/assets/ directory with a dynamically determined filename (e.g., CyberPath-Database-*.webp).
7. Shutdown: The script kills the Astro development server.

The following sequence diagram shows the interaction between the script, the dev server, and the browser.

Build Output

The final output of the pnpm run build command is the dist/ directory. This directory contains the complete static website, ready for deployment to any static hosting service.

The structure includes:

• Statically rendered HTML files for each page.
• The assets/ directory containing CSS, JS, images, and the generated screenshot.
• sitemap-index.xml for SEO.
• robots.txt.
• JSON files that serve as data APIs for the frontend, such as data.json and data-index.json.

Sources: astro.config.ts:24-26, src/pages/database/data-index.json.ts, [scripts/screenshot.js:123-125]