Production Bundling, Testing & Deployment0%

Production Bundling, Testing & Deployment

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Capstone Part 4: Production Bundling, Testing & Deployment

Building a world-class JavaScript application culminates in deploying it reliably to global production infrastructure. In this final capstone tutorial, you will master the end-to-end production workflow: automated unit testing (Vitest), bundle optimization (Vite/Rollup), CI/CD pipelines, and zero-downtime deployment.

1. Automated Testing Pyramid

Output
┌───────────────┐
│ E2E Tests │ (Playwright / Cypress: User flows across real browser)
└───────┬───────┘
│
┌───────▼───────┐
│ Integration │ (Component mounting, API mock integration)
└───────┬───────┘
│
┌───────▼───────┐
│ Unit Tests │ (Vitest / Jest: Fast, pure function verification)
└───────────────┘

2. Writing Production Unit Tests with Vitest

JavaScript
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { Store } from './Store.js';
import { appReducer } from './appReducer.js';
 
describe('Central Store Architecture', () => {
let store;
 
beforeEach(() => {
store = new Store(appReducer, { count: 0, theme: 'light' });
});
 
it('should initialize with provided initial state', () => {
expect(store.getState()).toEqual({ count: 0, theme: 'light' });
});
 
it('should update state immutably when an action is dispatched', () => {
store.dispatch({ type: 'INCREMENT' });
expect(store.getState().count).toBe(1);
});
 
it('should notify subscribers when state updates', () => {
const subscriberMock = vi.fn();
store.subscribe(subscriberMock);
 
store.dispatch({ type: 'INCREMENT' });
 
expect(subscriberMock).toHaveBeenCalledTimes(1);
expect(subscriberMock).toHaveBeenCalledWith(expect.objectContaining({ count: 1 }));
});
 
it('should throw an error when mutating state directly', () => {
expect(() => {
store.getState().count = 99;
}).toThrow();
});
});

3. Production Bundler Configuration (vite.config.js)

A production bundler configuration enforces code splitting, minification, and asset compression:

JavaScript
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
 
export default defineConfig({
build: {
target: 'es2022', // Emit modern, compact ES2022 output
minify: 'terser', // High-performance minification
sourcemap: 'hidden', // Generates sourcemaps without public comments for Sentry
rollupOptions: {
output: {
// Manual Chunk Splitting
manualChunks: {
vendor: ['react', 'react-dom'],
charts: ['chart.js']
}
},
plugins: [
visualizer({ open: false, filename: 'bundle-analysis.html' })
]
}
}
});

4. GitHub Actions CI/CD Pipeline (.github/workflows/deploy.yml)

Automate testing, linting, building, and deployment on every git push:

YAML
name: Production CI/CD Pipeline
 
on:
push:
branches: [ main ]
 
jobs:
verify-and-deploy:
runs-on: ubuntu-latest
 
steps:
- name: Checkout Code
uses: actions/checkout@v4
 
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
 
- name: Install Dependencies
run: npm ci
 
- name: Type Check
run: npx tsc --noEmit
 
- name: Run Unit Tests
run: npm run test:run
 
- name: Build Production Assets
run: npm run build
 
- name: Deploy to Cloudflare Pages / Vercel
run: npx wrangler pages deploy dist --project-name=enterprise-app
env:
CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}

5. Production Release Checklist

Before promoting code to live production traffic:

  1. 1
    Zero TypeScript Errors: npx tsc --noEmit exits cleanly.
  2. 2
    100% Test Suite Passing: All unit and integration test assertions pass.
  3. 3
    Bundle Size Budgets Enforced: No initial chunk exceeds 150KB gzip.
  4. 4
    Security Headers Configured: Content Security Policy (CSP), HSTS, and X-Frame-Options enabled.
  5. 5
    Monitoring & Sentry Configured: Production release tagged with git commit hash.
Interactive Quiz

Practice Quiz

Question 1
What command ensures a clean, deterministic install of dependencies based strictly on package-lock.json in CI/CD pipelines?
Question 2
What is the primary role of manual chunk splitting in a Rollup or Vite configuration?
Question 3
What is the difference between Unit Tests and End-to-End (E2E) Tests?
Question 4
Why is sourcemap: 'hidden' configured in production bundlers?
Question 5
What is the purpose of npm run test:run in CI/CD pipelines compared to standard test mode?

Related Lessons

Previous LessonNext Lesson
Offline-First Sync with IndexedDB & Service WorkerNone

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous
PrevNext