Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Learners ready to move projects from local development to real public deployment
• Beginners who want safer release habits and cleaner environment handling
• Anyone who has shipped once and thought, “Why does it break only in production?”

What you’ll learn

• Practical differences between development mode and production build
• Environment variable strategy and secret management basics
• A beginner-friendly deployment flow for frontend and backend

Why this topic matters

Deployment is where side projects become real products used by real people.

Good production habits help you avoid painful mistakes like broken releases, misconfigured APIs, and leaked secrets.

Core concepts

Build pipeline

• Transform source code for production performance
• Use environment-specific configuration

Production build should be deterministic and repeatable.

Secrets and environment variables

• Store secrets outside source code
• Provide .env.example for documentation

Treat secrets as sensitive operational data, never as source code.

Hosting options

• Frontend: Vercel/Netlify
• Backend: Render/Railway

Choose platforms that keep deployment simple and observable for your current stage.

Step-by-step walkthrough

Step 1 — Prepare build scripts

Make sure the app builds cleanly and fails loudly when env vars are missing.

Step 2 — Configure environment variables

Define env vars for development, staging (optional), and production.

Step 3 — Deploy and verify

Deploy both frontend and backend, then run quick smoke checks for key user flows.

Goal: each release is predictable, not stressful.

Practical examples

Example 1 — Environment variable usage

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

Tip:

• Validate this value on app startup and show a clear error if missing.

Example 2 — Deployment checklist

• Build passes
• Env vars set correctly
• Health route responds

Also verify:

• Frontend points to the correct backend URL,
• key feature flow works end-to-end.

Common mistakes and how to avoid them

• Committing .env files -> use .gitignore and maintain .env.example
• Hardcoding production URLs -> always use environment variables
• Skipping post-deploy checks -> run a smoke test after every release
• No rollback plan -> keep a simple rollback approach documented

Mini Project

• Deploy your frontend + API and validate:
• one full user flow,
• one error flow (for example, failed API request),
• one health/monitoring check.

Bonus:

• Write a short release checklist file for future deployments.

Quick practice

• Create .env.example with all required keys
• Verify runtime uses production API URL
• Run one post-deploy smoke test
• Add one “deployment notes” section in your project README

Key takeaways

• Shipping to production is a core engineering skill, not an optional step
• Environment variable hygiene is essential for security and reliability
• Post-deploy verification should be fast, repeatable, and non-negotiable

Next step

Continue to [19. Resources and Next Steps]