Part 50: Production Build Optimization, CI/CD & Deployment

Transforming development code into a lightning-fast, minified, production-ready bundle and deploying it reliably via CI/CD.

1. Running the Production Build

npm run build

Vite runs Rollup under the hood: - Minifies JavaScript and CSS. - Treeshakes unused dependencies. - Generates cache-busting hashes on static asset filenames (e.g. index-4a8f9.js).

Testing the Production Build Locally:

npm run preview

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

Automate testing and deployment whenever changes merge to main:

name: Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci

      - name: Run Tests
        run: npm run test

      - name: Build Application
        run: npm run build

      - name: Deploy to Hosting
        run: echo "Deploying bundle to cloud provider..."

Key Takeaways

• npm run build compiles, minifies, and optimizes static assets for production.
• Use npm run preview to verify production behavior locally.
• Implement CI/CD pipelines to guarantee test verification before deployment.

In Part 51, we enter our bonus capstone to explore Fullstack React with Next.js App Router & Server Components!