Deployment Strategies
Learn various deployment strategies for JavaScript applications. This is a foundational concept in programming and web interactivity that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world JavaScript experience. Take your time with each section and practice the examples
Static Site Deployment
Deploy static JavaScript applications to CDNs and static hosting services.. This is an essential concept that every JavaScript developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Netlify Deployment
# netlify.toml
[build]
publish = "dist"
command = "npm run build"
[build.environment]
NODE_VERSION = "18"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
# Build script
npm run build
netlify deploy --prod --dir=distVercel Deployment
// vercel.json
{
"builds": [
{
"src": "package.json",
"use": "@vercel/static-build",
"config": {
"distDir": "dist"
}
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/index.html"
}
]
}
# Deploy
vercel --prodDocker Deployment
# Dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# nginx.conf
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}Kubernetes Deployment
# deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: js-app
spec:
replicas: 3
selector:
matchLabels:
app: js-app
template:
metadata:
labels:
app: js-app
spec:
containers:
- name: js-app
image: js-app:latest
ports:
- containerPort: 80
resources:
requests:
memory: "64Mi"
cpu: "250m"
limits:
memory: "128Mi"
cpu: "500m"
---
apiVersion: v1
kind: Service
metadata:
name: js-app-service
spec:
selector:
app: js-app
ports:
- port: 80
targetPort: 80
type: LoadBalancerMini-Project: Deployment Pipeline
// deployment-pipeline.js
const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');
class DeploymentPipeline {
constructor(config) {
this.config = config;
this.stages = ['build', 'test', 'deploy'];
}
async run() {
console.log('🚀 Starting deployment pipeline...');
for (const stage of this.stages) {
try {
await this.executeStage(stage);
console.log(`✅ ${stage} completed successfully`);
} catch (error) {
console.error(`❌ ${stage} failed:`, error.message);
throw error;
}
}
console.log('🎉 Deployment completed successfully!');
}
async executeStage(stage) {
switch (stage) {
case 'build':
await this.build();
break;
case 'test':
await this.test();
break;
case 'deploy':
await this.deploy();
break;
}
}
async build() {
console.log('🔨 Building application...');
execSync('npm run build', { stdio: 'inherit' });
// Verify build output
const distPath = path.join(process.cwd(), 'dist');
if (!fs.existsSync(distPath)) {
throw new Error('Build output not found');
}
}
async test() {
console.log('🧪 Running tests...');
execSync('npm test', { stdio: 'inherit' });
}
async deploy() {
console.log('🚀 Deploying application...');
switch (this.config.deployment.target) {
case 'netlify':
await this.deployToNetlify();
break;
case 'vercel':
await this.deployToVercel();
break;
case 'docker':
await this.deployWithDocker();
break;
default:
throw new Error('Unknown deployment target');
}
}
async deployToNetlify() {
execSync('netlify deploy --prod --dir=dist', { stdio: 'inherit' });
}
async deployToVercel() {
execSync('vercel --prod', { stdio: 'inherit' });
}
async deployWithDocker() {
execSync('docker build -t js-app .', { stdio: 'inherit' });
execSync('docker run -d -p 3000:80 js-app', { stdio: 'inherit' });
}
}
// Usage
const config = {
deployment: {
target: 'netlify'
}
};
const pipeline = new DeploymentPipeline(config);
pipeline.run().catch(console.error);