Most modern build tools and frameworks (like Vite, Next.js, Create React App, and Nuxt) look for multiple .env files and load them according to a specific hierarchy or priority order.
Double-check that your server is genuinely running in development mode. If NODE_ENV is accidentally set to production , the .env.development file will be bypassed entirely. If you need help setting this up, let me know:
Your future self—and your team—will thank you. The age of "It works on my machine" is over. Long live .env.development .
To create and use a .env.development file, follow these steps to manage your application's local configuration securely. 1. Create the File
: Environment variables in Create React App are embedded at build time , not runtime. If you change your .env files, you need to restart your development server for changes to take effect. .env.development
ENVIRONMENT=development DEV_DATABASE_URL=sqlite:///db.sqlite3 SECRET_KEY=dev-key-not-for-production
DB_HOST=localhost DB_PORT=5432 DB_NAME=myapp_dev_db DB_USER=dev_user DB_PASSWORD=dev_password_123 # --- THIRD-PARTY INTEGRATIONS (TEST KEYS) ---
Unlike hot-reloading code changes, changes to .env files are not automatically detected. Always restart your development server after modifying any environment file to see the effects.
To create the content for a .env.development file, you need to define key-value pairs for settings specific to your local development environment, such as local database URLs or development API keys. Standard Template .env.development Most modern build tools and frameworks (like Vite, Next
The .env.development file is a used exclusively when your application runs in a development environment.
Environment variables are key-value pairs injected into your application's process at runtime. A standard .env file might look like this:
The following is a sample .env.development file for a typical web development project:
Then, in a configuration file, you could conditionally load based on process.env.APP_ENV . If you need help setting this up, let
Here is the golden rule: A user can open DevTools and see your REACT_APP_ variables. Never, ever put an admin password, database URI, or private key in a frontend .env.development file. Use a backend proxy instead.
Why not just use one massive .env file? The answer lies in the radically different needs of development versus production.
const path = require('path'); require('dotenv').config( path: path.join(__dirname, `.env.$process.env.NODE_ENV`) );
: 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).