Deployment

Master production deployment: CDNs, bundlers, minification, caching, and everything needed to ship fast, globally optimized JavaScript applications.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

💡 This lesson covers advanced deployment concepts including build systems (Webpack, Vite), CDN configuration, cache strategies, and production optimization techniques used by major companies.

Why Deployment Is More Than "Upload Files"

Shipping a JavaScript app to the world means getting it to load fast, load globally, be secure, be versioned correctly, use caching properly, and serve as few bytes as possible.

Development Mode

Production Mode

Your goal: Max performance, low bandwidth cost, global speed, zero unnecessary code.

Understanding CDNs (Content Delivery Networks)

A CDN is a global network of servers that stores ("caches") your files and delivers them to users from the closest location. This makes your app load WAY faster globally.

💡 When a user visits your site, they get the file from the nearest CDN node, NOT your origin server. This reduces latency by hundreds of milliseconds.

Popular CDNs:

CDNs host JavaScript bundles, CSS, images, videos, and sometimes API responses.

Minification (Shrinking Your Code)

Minification removes spaces, newlines, long variable names, unused code, comments, and formatting.

Popular Minification Tools:

Bundling (Combining Files for Fewer Requests)

Browsers load faster when 1 big file loads instead of 30 small ones. Bundlers do tons of work:

Popular Bundlers:

Fastest, uses esbuild for dev and Rollup for production

Tree Shaking — Removing Unused Code

Tree shaking automatically removes code you import but never use.

Code Splitting (Huge Performance Boost)

Instead of one giant bundle, create chunks. Only load what the page needs.

Hashing & Cache Busting

Browsers aggressively cache JS files. If you deploy updates but the old file is cached, users see OLD code. Solve this with hashed filenames.

Compression (Gzip & Brotli)

Browsers support compressed JS files. CDNs automatically compress your bundles.

A 600KB file can become 80KB with Brotli. CDNs like Cloudflare and Vercel handle this automatically.

Modern Build Systems

Vite Configuration (Recommended)

Webpack Configuration (Full Control)

Cache-Control Headers

These headers decide when browser reloads files, what gets cached, and how long it stays cached.

Automated Deployment (CI/CD)

Push to GitHub → CI builds your JS → CI uploads to CDN → deployment is fully automatic.

SPA Rewrite Rules (Critical!)

For history mode routing, all routes must serve index.html. Without this rule, refreshing SPA pages will crash.

HTTP Security Headers

Large companies REQUIRE these headers for production apps.

The Ultimate Production Checklist

Performance

Security

Stability

Deployment

Key Takeaways

Practice quiz

What is a CDN (Content Delivery Network)?

  • A tool that minifies JavaScript
  • A type of bundler
  • A global network of servers that caches files and serves them from the closest location
  • A database for storing user data

Answer: A global network of servers that caches files and serves them from the closest location. A CDN is a global network of servers that caches your files and delivers them from the node nearest the user, reducing latency.

What does minification do to your code?

  • Removes whitespace, comments, and shortens variable names while keeping the logic
  • Encrypts it for security
  • Splits it into multiple files
  • Converts it to TypeScript

Answer: Removes whitespace, comments, and shortens variable names while keeping the logic. Minification removes spaces, newlines, comments, and shortens names, typically reducing file size 30-70% while keeping functionality.

What does tree shaking remove?

  • Duplicate CSS rules
  • Source maps
  • Compressed assets
  • Code you import but never use

Answer: Code you import but never use. Tree shaking automatically removes code you import but never use, so only the code you actually use ships to production.

Why do production builds use hashed filenames like app.8c1f19a.js?

  • To hide the source code
  • For cache busting, so updated code gets a new filename and isn't served stale
  • To make files smaller
  • To enable HTTPS

Answer: For cache busting, so updated code gets a new filename and isn't served stale. When code changes the hash changes, so the browser downloads the fresh version while old, unchanged files can be cached forever.

Which compression format gives the best compression (~70-80% smaller)?

  • Brotli
  • Gzip
  • Zip
  • Deflate

Answer: Brotli. Brotli is the newest format with the best compression (~70-80% smaller); Gzip is older at ~60-70%.

What Cache-Control header is recommended for hashed JS/CSS files?

  • no-cache
  • max-age=0, must-revalidate
  • public, max-age=31536000, immutable
  • private, no-store

Answer: public, max-age=31536000, immutable. Hashed files use 'public, max-age=31536000, immutable' to cache for a year and never revalidate, since the hash guarantees uniqueness.

Why is an SPA rewrite rule (serve index.html for all routes) critical?

  • It speeds up the CDN
  • Without it, refreshing a route like /dashboard returns a 404
  • It minifies the HTML
  • It enables tree shaking

Answer: Without it, refreshing a route like /dashboard returns a 404. For history-mode routing, all routes must serve index.html; without the rewrite rule, refreshing an SPA page crashes with a 404.

What does the Content-Security-Policy header primarily protect against?

  • Clickjacking
  • MIME sniffing
  • Slow load times
  • XSS attacks

Answer: XSS attacks. Content-Security-Policy prevents XSS attacks; X-Frame-Options handles clickjacking and X-Content-Type-Options handles MIME sniffing.

In a CI/CD pipeline, what triggers the automated build and deploy?

  • Manually uploading files via FTP
  • Pushing code to the main branch
  • Refreshing the browser
  • Clearing the CDN cache

Answer: Pushing code to the main branch. Pushing to main triggers GitHub Actions to checkout, install, build, and deploy to the CDN automatically.

Which header forces browsers to always use HTTPS?

  • X-Frame-Options
  • X-Content-Type-Options
  • Strict-Transport-Security
  • Cache-Control

Answer: Strict-Transport-Security. Strict-Transport-Security (e.g. max-age=31536000; includeSubDomains) forces HTTPS for the site.

Continue this course