Learn the Good Patterns
Real-world engineering guide on how top e-commerce websites achieve sub-1.0s LCP, zero layout shifts, impenetrable checkout security, and effortless scale.
Protecting .env, Git Hygiene & Secret Scanning
Why e-commerce stores must never commit .env files or expose Stripe secret keys, database credentials, or private API keys to git repositories or client bundles.
Strict .gitignore, Secret Isolation & Safe Environment Loaders
A production e-commerce store isolates secret tokens (Stripe secret keys, database passwords, JWT signing salts) on the server. Secret variables are never prefixed with client-exposed prefixes (like NEXT_PUBLIC_), .env files are locked out of git tracking with .gitignore, and pre-commit secret scanners block accidental leaks.
# 1. .gitignore (Never commit credentials)
.env
.env.local
.env.production
*.pem
credentials.json
# 2. Server-side only secret usage (Next.js / Node.js)
import Stripe from 'stripe';
// Safe: process.env.STRIPE_SECRET_KEY is only accessed on the server
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
apiVersion: '2023-10-16',
});
// NEVER prefix secret keys with NEXT_PUBLIC_:
// WRONG: NEXT_PUBLIC_STRIPE_SECRET_KEY (Exposed to any user via DevTools!)
// RIGHT: NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY (Safe public token for Stripe Elements)
# 3. Emergency Git cleanup if .env was accidentally committed:
# git rm --cached .env
# git commit -m "chore: remove tracked .env file"
# git push origin mainKey Engineering & Business Benefits:
- Guarantees merchant payment gateways and customer credit card pipelines remain secure.
- Prevents automated GitHub scraping bots from draining server budgets or stealing data within seconds.
- Enforces clean separation between public client assets and private server configuration.
The Horror Site: .env Committed & Secrets in Client Bundle
The bad site tracked .env in its public GitHub repository with STRIPE_SECRET_KEY=sk_live_... and DATABASE_URL=postgres://admin:pass@db. Furthermore, developers assigned NEXT_PUBLIC_ADMIN_KEY="master123", allowing any visitor to view credentials in Chrome DevTools Sources and execute administrative operations.
// The Bad Site exposed private keys directly in client-side code:
const STRIPE_SECRET = "sk_live_99847192847120938471";
const DB_CONN = "postgres://root:secretPass123@db.store.com:5432/main";
fetch('/api/drain-balance', { headers: { 'X-Admin-Secret': 'master123' } });How to Implement / Fix in 3 Practical Steps
Add .env, .env.*, and *.pem to .gitignore before running git init or creating initial repository commits.
Audit environment variables: only attach client-facing prefixes (like NEXT_PUBLIC_) to non-sensitive public IDs.
Configure CI/CD secret scanning (e.g. GitHub Secret Scanning, Gitleaks, or TruffleHog) to reject builds with exposed tokens.
Open DevTools (F12) -> Sources -> Press Ctrl+P -> search for "sk_live", "postgres://", or ".env". Verify no private connection strings appear in client chunks.
Finished reading this lesson?
Mark it as mastered below, or click Next Lesson to auto-complete.