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

> Learn how the TCG Pocket Collection Tracker builds its React frontend with Vite for optimized performance and deploys automatically to GitHub Pages using GitHub Actions CI/CD.

- Repository: [Marcel Panse/tcg-pocket-collection-tracker](https://github.com/marcelpanse/tcg-pocket-collection-tracker)
- Tags: how-to-guide
- Published: 2026-03-07

---

**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`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/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`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/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`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/frontend/package.json) wires Vite commands into the monorepo's script ecosystem:

```json
"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`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/.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:

   ```bash
   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`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/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`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/.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`](https://github.com/marcelpanse/tcg-pocket-collection-tracker/blob/main/.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.