Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/dadu0699/qr-code/llms.txt

Use this file to discover all available pages before exploring further.

QR Code Generator supports two local development modes. The Astro dev server gives you fast hot-reload during day-to-day coding, while the Wrangler preview mode builds the project and runs it inside a local simulation of the Cloudflare Workers runtime — useful for catching any edge-case differences before you deploy.

​
Prerequisites

You need Node.js v24 and pnpm installed before cloning the project. The exact Node.js version is pinned in .nvmrc (v24.15.0); using a version manager such as nvm or fnm ensures you match it precisely. 
# With nvm
nvm install
nvm use

# Install pnpm (if not already available)
npm install -g pnpm@11.9.0

​
Getting Started

1

Clone the repository

git clone https://github.com/dadu0699/qr-code.git
cd qr-code
2

Install dependencies

pnpm install
3

Start the dev server

The dev script generates Wrangler type declarations first, then starts the Astro development server with hot module replacement.
pnpm dev
4

Open the app in your browser

Navigate to http://localhost:4321. The server reloads automatically as you edit source files.

​
Available Scripts

ScriptCommandDescription
devwrangler types && astro devGenerates Cloudflare type bindings and starts the Astro dev server on port 4321
startwrangler types && astro devAlias for dev — identical behavior
buildwrangler types && astro check && astro buildType-checks the project and produces a production build
previewpnpm build && wrangler devBuilds the app, then serves it locally using the Wrangler Workers runtime
publishpnpm build && wrangler deployBuilds and deploys the app to Cloudflare Workers
checkwrangler types && astro checkRuns Wrangler type generation and Astro’s TypeScript type checker
linteslint .Lints all source files with ESLint
testvitest runRuns the full test suite once
test:coveragevitest run --coverageRuns the suite with V8 coverage instrumentation and writes a report to coverage/
formatprettier --write .Formats all source files with Prettier
astroastroDirect access to the Astro CLI
wranglerwranglerDirect access to the Wrangler CLI

​
Wrangler Preview Mode

The Astro dev server uses Vite under the hood and does not emulate the Cloudflare Workers runtime. To verify runtime-specific behavior — such as how bindings and environment variables are resolved — use the preview script instead: 
pnpm preview
This runs pnpm build first (which includes type-checking via astro check) and then hands the output to wrangler dev, which spins up a local Workers runtime. The app is served on a Wrangler-assigned port rather than 4321.

​
TypeScript Path Aliases

The project configures several paths aliases in tsconfig.json to avoid deep relative imports across the codebase: 
{
  "compilerOptions": {
    "paths": {
      "@layouts/*": ["./src/layouts/*"],
      "@styles/*":  ["./src/styles/*"],
      "@lib/*":     ["./src/lib/*"],
      "@app-types/*": ["./src/types/*"],
      "@scripts/*": ["./src/scripts/*"]
    }
  }
}
Vitest mirrors the @lib and @app-types aliases (without the /* wildcard, as Vite’s alias resolver handles the prefix match) via its own resolve.alias config so tests can import shared utilities the same way as production code.

​
Code Quality

The project enforces consistent style and type safety through three complementary tools.

​
Linting

ESLint is configured with the @eslint/js, eslint-plugin-astro, and typescript-eslint plugins. Run it across the entire codebase with: 
pnpm lint
The config ignores generated directories (dist/, .astro/, coverage/, worker-configuration.d.ts) and disables the no-undef rule in favour of TypeScript’s own undefined-identifier checking.

​
Formatting

Prettier handles all formatting. Three plugins are active: prettier-plugin-astro for .astro files, prettier-plugin-organize-imports for automatic import ordering, and prettier-plugin-tailwindcss for class-name sorting. The key style settings are: 
{
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "endOfLine": "crlf"
}
Run the formatter with: 
pnpm format

​
Type Checking

To run Wrangler’s type generation (which produces worker-configuration.d.ts from wrangler.jsonc) together with Astro’s full TypeScript check: 
pnpm check
This is the same command the CI pipeline runs before linting and testing.
Use pnpm dev for everyday feature work — it starts instantly and reflects edits without a full rebuild. Switch to pnpm preview when you need to verify Cloudflare Workers-specific behavior (environment variable bindings, the cloudflare:workers virtual module, etc.) before opening a pull request or deploying.

Build docs developers (and LLMs) love

Get started for freeTalk to us