\n
Hang up… please wait, we're loading
GitHub flows, automated deployments, Cloudflare's superpower stack, and professional developer workflows.
Every app you use stores data — you'll learn how today.
Git is a version control system that records every change you make. Branch, commit, merge, and collaborate with teams — it is the backbone of modern software development.
Git is a version control system — it tracks every change to your code so you can collaborate, experiment, and roll back mistakes. Every professional uses it daily.
# === Setup (do once) === git config --global user.name "Your Name" git config --global user.email "you@example.com" # === Start a project === git init # initialize git in current folder git clone https://github.com/user/repo.git # copy existing repo # === Daily workflow === git status # see changed files git add . # stage ALL changes git add file.html # stage specific file git commit -m "feat: add contact form" # save snapshot git push origin main # upload to GitHub git pull # download latest changes # === Branching (work without breaking main) === git checkout -b feature/dark-mode # create + switch branch git checkout main # switch back git merge feature/dark-mode # merge into main git branch -d feature/dark-mode # delete branch # === Undo mistakes === git restore file.html # undo unsaved changes git revert HEAD # undo last commit (safe) git log --oneline # see commit history git stash # temporarily save changes git stash pop # restore stashed changes
feat:, fix:, docs:, style:, refactor:, test:, chore:. Example: feat: add Google auth login. Tools like semantic-release can auto-generate changelogs from these.Professional teams never push directly to main. They use the feature branch → Pull Request → Review → Merge workflow.
git checkout -b feat/user-profiles — work in isolation, main branch stays clean.
Make your changes, commit often with clear messages, push to GitHub: git push origin feat/user-profiles
On GitHub, click "Compare & pull request". Write a clear description of what and why. Request reviewers.
GitHub Actions runs tests, linting, and builds your preview deployment automatically on every PR.
Teammate reviews code, approves, and you merge to main. The CI triggers a production deployment.
GitHub Actions automates your workflow. On every push, it can run tests, lint code, build your app, and deploy to production — automatically.
# This file lives in .github/workflows/deploy.yml name: Deploy to Production # Trigger: run this when code is pushed to main branch on: push: branches: [main] pull_request: branches: [main] jobs: # Job 1: Test & Build build: runs-on: ubuntu-latest steps: # 1. Check out the code - uses: actions/checkout@v4 # 2. Set up Node.js - uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' # 3. Install dependencies - run: npm ci # 4. Run tests - run: npm test # 5. Build production bundle - run: npm run build # 6. Upload build artifacts - uses: actions/upload-artifact@v4 with: name: dist path: dist/ # Job 2: Deploy (only on main, after build passes) deploy: needs: build runs-on: ubuntu-latest if: github.ref == 'refs/heads/main' steps: - uses: actions/checkout@v4 # Deploy to Vercel using secret token - uses: amondnet/vercel-action@v25 with: vercel-token: ${{ secrets.VERCEL_TOKEN }} vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} vercel-args: '--prod'
Cloudflare is the #1 tool professionals use. It sits between your domain and your server, adding speed, security, and control — all free on the basic plan.
Go to cloudflare.com → Sign up free → "Add a Site" → enter your domain name.
Cloudflare scans your existing DNS records automatically. Review them, adjust if needed. Make sure your A/CNAME records point to your host.
Cloudflare gives you 2 nameservers (e.g. aria.ns.cloudflare.com). Go to your domain registrar → DNS → change nameservers to these. Takes up to 24h to propagate.
In Cloudflare DNS settings, toggle the orange cloud on for your A/CNAME records. This routes all traffic through Cloudflare's network — enabling CDN, WAF, and DDoS protection.
Cloudflare's CDN caches your site at 300+ edge locations worldwide. Visitors get files from the closest server — drastically cutting load times.
# Cache static assets long-term: URL: example.com/assets/* Cache Level: Cache Everything Edge Cache TTL: 1 month # Bypass cache for API routes: URL: example.com/api/* Cache Level: Bypass
// Cache static files for 1 year app.use('/assets', express.static('public', { maxAge: '1y', immutable: true })); // No cache for HTML res.setHeader('Cache-Control', 'no-cache, no-store');
Cloudflare Workers let you run JavaScript at the edge (close to users) — zero cold starts, free 100k requests/day. Perfect for API endpoints, redirects, A/B testing, and middleware.
// Cloudflare Worker: runs at the edge worldwide // Deploy with: wrangler deploy export default { async fetch(request, env) { const url = new URL(request.url); // Route: API endpoint at the edge if (url.pathname === '/api/geo') { // Cloudflare gives you the user's location for free! const { country, city, latitude, longitude } = request.cf; return Response.json({ country, city, latitude, longitude }); } // Redirect old URLs if (url.pathname === '/old-page') { return Response.redirect('/new-page', 301); } // Add security headers to all responses const response = await fetch(request); const newResponse = new Response(response.body, response); newResponse.headers.set('X-Frame-Options', 'DENY'); newResponse.headers.set('X-Content-Type-Options', 'nosniff'); newResponse.headers.set('Referrer-Policy', 'strict-origin'); return newResponse; } };
# Install Wrangler (Cloudflare's CLI) npm install -g wrangler # Login to Cloudflare wrangler login # Create a new Worker project wrangler init my-worker # Run locally for testing wrangler dev # Deploy to production edge network wrangler deploy
Cloudflare Pages is like Vercel/Netlify but on Cloudflare's network. Unlimited bandwidth for free, runs on the same edge as Workers.
# Deploy via Wrangler CLI wrangler pages deploy ./dist # Or connect via GitHub (recommended): # Cloudflare Dashboard → Pages → Create a project # → Connect to Git → Select repo → Configure build: # Build command: npm run build # Build output directory: dist # → Save and Deploy # Every push to main auto-deploys production # Every PR gets a unique preview URL
Docker packages your app and all its dependencies into a container — so it runs identically on any machine. Essential for backend apps.
# Start from official Node.js image FROM node:20-alpine # Set working directory inside container WORKDIR /app # Copy package files first (layer caching) COPY package*.json ./ # Install dependencies RUN npm ci --only=production # Copy rest of source code COPY . . # Tell Docker which port this app uses EXPOSE 3000 # Command to run when container starts CMD ["node", "server.js"]
# Build image from Dockerfile docker build -t my-app:latest . # Run container locally docker run -p 3000:3000 my-app:latest # Run with environment variables docker run -p 3000:3000 --env-file .env my-app:latest # Push to Docker Hub (free) docker tag my-app:latest yourusername/my-app:latest docker push yourusername/my-app:latest # Deploy on any cloud: Railway, Render, Fly.io # just point at your Docker Hub image
You need to know when your app is down before your users tell you. These tools are essential in production:
UptimeRobot (free) — checks your site every 5 minutes, alerts you via email/Slack if it goes down.
Free PlanSentry.io (free tier) — catches JavaScript errors in real-time, shows you the exact line of code that broke.
EssentialCloudflare Analytics (free) — traffic stats, bandwidth, threats blocked. Privacy-friendly, no cookies needed.
Built-inVercel/Railway Logs — view real-time server logs from your dashboard. Filter by level, search by text.
Platform Built-in