[JavaScript Series 19] Front-End Build and Deployment Basics

It is time to get code into users’ hands. Understanding the build and deployment flow lets you release confidently.

Key terms

1. Bundling: Compressing multiple JS/CSS files into a single package for delivery.
2. Transpiling: Rewriting modern syntax into older syntax that legacy browsers understand.
3. Environment variables: Configuration values stored outside your source (e.g., .env) so each environment gets its own settings.
4. Static hosting: Services such as Netlify or Vercel that serve build artifacts as-is.
5. CI pipeline: An automated workflow that runs tests and builds when code is pushed.

Core ideas

• Bundling (group assets): Tools like Vite or Webpack gather JS/CSS/images into bundles.
• Transpiling (syntax conversion): Babel or esbuild converts modern syntax for older browsers.
• Environment variables (config keys): Keep API URLs or keys outside code, e.g., import.meta.env.VITE_API_URL.
• Static hosting (serve build outputs): Netlify, Vercel, and GitHub Pages deliver the built files.
• CI pipeline (automation flow): GitHub Actions/GitLab CI automate tests, builds, and deployments.

Common tools and deployment commands

Start by generating a Vite project so local development is ready.

npm create vite@latest dashboard -- --template vanilla
cd dashboard
npm install
npm run dev

Create the project and spin up the dev server.

Now build it and inspect the output.

npm run build

A dist/ folder appears with optimized HTML, CSS, and JS files.

Separate configuration per environment using environment variables.

# .env
VITE_API_URL=https://api.school.example

const apiUrl = import.meta.env.VITE_API_URL;
await fetch(`${apiUrl}/tasks`);

Environment variables let each build target point at the correct backend.

Automate tests and deploys with a GitHub Actions workflow.

# .github/workflows/deploy.yml
name: deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: dist

This workflow builds on every push to main and publishes to GitHub Pages.

Finally, align your npm scripts so every environment uses the same commands.

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Consistency across local machines, CI, and production prevents surprises.

Why a reliable deployment process matters

• Knowing the build process helps you tweak performance options.
• Proper env var handling keeps API keys out of source control.
• Automated deployment removes repetitive manual steps and speeds up releases.

Practice

• Follow along: Scaffold a Vite project, run npm run build, and inspect dist/.
• Extend: Create a .env file for the API URL and wire a GitHub Actions build/deploy pipeline.
• Debug: Leave an env var unset, confirm the error shows up, and trace it via CI logs.
• Done: A push to main automatically deploys, and the static hosting URL shows the latest changes.

Wrap-up

Automated build and deploy pipelines make sharing projects effortless. Next we pull everything together with a mini app capstone.