How the TCG Pocket Collection Tracker Builds Its React Frontend with Vite and Deploys to GitHub Pages

The TCG Pocket Collection Tracker uses a React 19 single-page application bundled with Vite, featuring manual chunking for vendor libraries and an automated GitHub Actions pipeline that publishes to GitHub Pages on every push to main.

The marcelpanse/tcg-pocket-collection-tracker repository demonstrates a modern approach to building a React frontend application using Vite. Located in the frontend/ workspace, the project leverages Vite's fast build tooling, experimental React Compiler support, and optimized chunking strategies. This article examines the Vite configuration, local development workflow, and the CI/CD pipeline that automatically publishes the application to GitHub Pages.

Vite Configuration and Build Optimization

The Vite configuration in frontend/vite.config.ts defines the plugins, module-resolution aliases, and manual chunking strategies that shape the final production bundle.

Plugin Architecture and React Compiler

The project uses a carefully selected plugin stack to support modern React development:

• React support with experimental React Compiler: The @vitejs/plugin-react plugin is configured with Babel settings to enable the experimental React Compiler via babel-plugin-react-compiler (lines 10-15 in frontend/vite.config.ts).
• Tailwind CSS integration: The @tailwindcss/vite plugin provides first-class Tailwind support.
• Comment stripping: The vite-plugin-strip-comments plugin removes comments from production builds (configured with type: 'none').
• HTTPS development server: The vite-plugin-mkcert plugin generates self-signed certificates for local HTTPS development.

Path Aliases and Manual Chunking

The configuration establishes a path alias @ that maps to the src/ directory, enabling cleaner imports throughout the codebase (lines 22-24).

To optimize caching and reduce initial load times, the build configuration implements manual chunking for large vendor libraries. The rollupOptions in the Vite config splits dependencies into separate chunks (lines 40-47):

• react-vendor: Contains React, React-DOM, and React Router
• supabase-vendor: Contains the Supabase JavaScript client
• tensorflow-vendor: Contains TensorFlow.js
• xlsx-vendor: Contains the XLSX library

This strategy ensures that changes to application code don't invalidate cached vendor libraries, improving long-term caching efficiency.

Local Development and Build Scripts

The workspace's frontend/package.json wires Vite commands into the monorepo's script ecosystem:

"scripts": {
  "dev":   "vite",
  "build": "pnpm run lint && tsc -b && vite build",
  "lint":  "pnpm -w run biome:check",
  "preview": "vite preview"
}

The pnpm run build command (used in CI) performs a three-step process:

1. Linting: Runs Biome checks via the monorepo's linting configuration
2. TypeScript compilation: Executes tsc -b for full type checking
3. Vite build: Generates the production-ready static files in frontend/dist

The vite preview command allows local testing of the production build before deployment.

CI/CD Pipeline for GitHub Pages Deployment

The GitHub Actions workflow defined in .github/workflows/deploy.yml automates the entire deployment process, triggering on every push to the main branch.

Workflow Triggers and Build Steps

The pipeline executes the following sequence:

1. Repository checkout: Uses actions/checkout@v4 to access the source code

2. PNPM setup: Configures the package manager using pnpm/action-setup@v4

3. Dependency installation and build: Executes the build command:

   pnpm install
   pnpm run build

   This produces the static site assets under frontend/dist (lines 20-24 in the workflow file).

Deployment Configuration and Secrets

The workflow handles environment-specific configuration through GitHub Secrets. The VITE_GHOST_API_KEY secret is injected into the build environment (lines 8-10), making it available to the Vite process via import.meta.env.VITE_GHOST_API_KEY.

The final deployment step uses the JamesIves/github-pages-deploy-action@v4 action to push the contents of frontend/dist to the gh-pages branch, which GitHub Pages serves automatically (lines 25-28).

Summary

• The React frontend application resides in the frontend/ workspace and uses Vite for fast development and optimized production builds.
• The Vite configuration (frontend/vite.config.ts) includes experimental React Compiler support, Tailwind CSS integration, path aliases, and manual chunking for vendor libraries like React, Supabase, TensorFlow.js, and XLSX.
• The build process runs linting, TypeScript compilation, and Vite bundling via pnpm run build, outputting static assets to frontend/dist.
• The CI/CD pipeline (.github/workflows/deploy.yml) automatically builds and deploys to GitHub Pages on every push to main, using the JamesIves/github-pages-deploy-action to publish the frontend/dist folder.

Frequently Asked Questions

What Vite plugins does the project use for the React frontend?

The project uses @vitejs/plugin-react configured with the experimental React Compiler, @tailwindcss/vite for styling, vite-plugin-strip-comments to remove comments from production builds, and vite-plugin-mkcert to enable HTTPS during local development.

How does the build process optimize vendor libraries?

The Vite configuration implements manual chunking via rollupOptions.output.manualChunks, splitting large dependencies into separate files: react-vendor (React, React-DOM, Router), supabase-vendor, tensorflow-vendor, and xlsx-vendor. This ensures browser caching remains effective when application code changes.

What triggers the deployment to GitHub Pages?

The GitHub Actions workflow in .github/workflows/deploy.yml triggers on every push to the main branch. It installs dependencies, runs the build process, and uses the JamesIves/github-pages-deploy-action to push the frontend/dist directory to the gh-pages branch.

How are environment variables handled in the Vite build?

Sensitive environment variables like VITE_GHOST_API_KEY are stored as GitHub Secrets and injected into the workflow environment during the CI/CD run. Vite exposes these to the application code via import.meta.env.VITE_GHOST_API_KEY, ensuring API keys remain secure while being available at build time.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}