.env.development -: PORT = 3000 will fail or load an incorrect key name. Use PORT=3000 . Once you have mastered the basics, you can explore advanced techniques that leverage the full power of .env.development . # Database Configuration DATABASE_URL=mongodb://localhost:27017/dev_db DATABASE_TIMEOUT=5000 # Third-Party APIs STRIPE_PUBLIC_KEY=pk_test_51Nx... ANOTHER_API_URL="https://example.com" Use code with caution. The Environment Variable Hierarchy At the center of this strategy is the environment file. While you might be familiar with the standard .env file, the environment-specific variant— .env.development —plays a critical role in streamlining local coding workflows. .env.development You must add .env.development to your .gitignore file. This ensures that your secrets stay on your local machine and are not pushed to GitHub or Bitbucket for the world to see. # Gitignore entry for environment files .env*.local .env.production Use code with caution. 4. Group and Document Your Variables Which (Next.js, Vite, Node/Express, etc.) you are building with. : PORT = 3000 will fail or load an incorrect key name By using a dedicated .env.development file, you ensure that your local application automatically boots up with development-friendly configurations without risking or modifying production data. How .env.development Works in the Build Lifecycle The way .env.development works depends on your framework. Here's a breakdown of common frameworks: Machine-specific development overrides. This file is kept local to your computer and never committed to git. While you might be familiar with the standard Vite-based Vue projects handle environment variables elegantly. When you run vite dev (development mode), Vite loads .env.development ; when you run vite build (production mode), it loads .env.production . Variables must be prefixed with VITE_ to be accessible in client-side code, and you access them via import.meta.env instead of process.env . # Example of a basic .env.development file PORT=3000 DATABASE_URL=postgresql://localhost:5432/my_dev_db ANALYTICS_KEY=dev_mock_key_12345 DEBUG_MODE=true Use code with caution. // This works anywhere (client and server) console.log(process.env.NEXT_PUBLIC_API_URL); : For development mode ( npm start ), files load in the following order of priority: .env.development.local (highest priority) → .env.development → .env.local → .env (lowest priority). |