All web developers wanting to avoid accidentally leaking private database passwords or API keys to GitHub or client browsers.
- ✓Understanding of Git commits and client vs server architectures
🚀 What You Will Learn & Build
- ▸Why .env files must ALWAYS be added to .gitignore
- ▸The role and structure of .env.example
- ▸Client-side prefixes (NEXT_PUBLIC_, VITE_, REACT_APP_) and their security risks
- ▸Removing accidentally committed secrets from Git history
1. The #1 Rule: .env Belongs in .gitignore
2. The .env.example Documentation Pattern
# App Configuration
APP_NAME="Nepali Developer Guide"
APP_ENV=local
APP_URL=http://localhost:3000
# Database
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password_here
# Payment Gateway Keys (Never put live secrets here!)
ESEWA_PRODUCT_CODE=EPAYTEST
ESEWA_SECRET_KEY=8gBm/:&EnhH.1/q
KHALTI_SECRET_KEY=your_khalti_test_key_here3. Understanding Client-Side Prefixes (NEXT_PUBLIC_)
✨ Expected Output & Verification
Git status reports .env as untracked/ignored, and building the project bundles zero secret keys into public JS chunks.
🧪 How to Test the Implementation
- 1Run `git status` and verify .env does NOT appear in untracked files list
- 2Inspect browser bundle via View Source and confirm no secret keys are present
⚠️ Common Errors & How to Fix Them
Root Cause: Added .gitignore after running 'git add .'.
Fix: Remove from Git tracking without deleting file: 'git rm --cached .env'. Commit the change and rotate any leaked API keys immediately!
🛡️ Security Considerations & Best Practices
- !If you ever accidentally commit a secret key to a public GitHub repo, assume it has been compromised by automated bots within seconds. Regenerate the key immediately.
❓ Frequently Asked Questions (FAQ)
On Vercel/Netlify, enter them in the platform's Environment Variables dashboard. On a VPS/cPanel, create the .env file directly on the server via SSH or File Manager.
📌 Summary of Key Takeaways
- ✓Never commit .env files to GitHub.
- ✓Provide a clean .env.example for other developers.
- ✓Keep secrets out of NEXT_PUBLIC_ client variables.
Official References & Further Reading
- 🔗12-Factor App: Config— Industry standard principles for environment configuration.
Written by Manoj Neupane
AuthorSoftware developer and programming instructor, Nepal
Building software systems and SaaS platforms with Laravel, Next.js, and Node.js. Passionate about helping students and developers in Nepal master practical, real-world development skills.