While .env.development is more secure than hardcoding values, it's not a complete security solution. Follow these best practices to protect your configuration:
# The environment name (usually 'development' for this file) NODE_ENV=development # Port number for the local development server # Full URL for the local frontend APP_URL=http://localhost:3000 # --- API & BACKEND --- # Local backend API URL (standard for general use) API_BASE_URL=http://localhost:8080/api/v1 # Prefix for React (Required for Create React App) REACT_APP_API_URL=http://localhost:8080/api/v1 # Prefix for Vite VITE_API_URL=http://localhost:8080/api/v1 # Prefix for Next.js (Exposed to the browser) NEXT_PUBLIC_API_URL=http://localhost:8080/api/v1 # --- DATABASE (LOCAL DEV ONLY) --- # Connection details for your local database instance
Never expose sensitive keys in client-side code. Variables prefixed with framework-specific patterns ( REACT_APP_ , NEXT_PUBLIC_ , VUE_APP_ , VITE_ ) are bundled into your frontend JavaScript and can be viewed by anyone who opens browser DevTools.
echo "API_BASE=http://localhost:9999" >> .env.development.local .env.development
: It keeps development-only logic out of the main code and prevents development settings from accidentally leaking into staging or production. Critical Considerations
Immediately rotate and revoke the leaked API keys or passwords. Update your .gitignore to include the file.
Understanding where .env.development fits in the broader ecosystem of environment files is essential: echo "API_BASE=http://localhost:9999" >>
// This only works in server components and API routes console.log(process.env.DATABASE_URL);
The structure is intentionally simple and human-readable. A typical .env.development file might look like this:
: Changes to .env files require a server restart to take effect. This is one of the most frequently encountered issues. Understanding where
The Definitive Guide to .env.development: Managing Environments in Modern Web Development
// ✅ Safe - redact sensitive information app.use((err, req, res, next) => const requestId = crypto.randomUUID(); console.error( [$requestId] $err.message ); res.status(500).json( error: message: 'Internal server error', requestId ); );
The .env.development file is a specialized environment configuration file that is loaded exclusively when an application is running in development mode. Unlike the generic .env file, which loads in all environments, .env.development is environment-aware and only activates during local development. This file is typically designed for use with frameworks and tools that automatically detect the environment based on commands like npm run dev , npm start , or the value of NODE_ENV .
| Practice | Rationale | |----------|-----------| | Commit .env.development (with safe defaults) | Provides consistent team configuration | | Gitignore .env.local and .env.*.local | Prevents accidental secret commits | | Use prefix conventions ( REACT_APP_ , NEXT_PUBLIC_ , etc.) | Enables framework integration | | Never commit real secrets, even in development | Secrets can be stolen from repos | | Validate required variables at startup | Catches configuration errors early | | Use secret managers in production | More secure than file-based config | | Rotate exposed credentials immediately | Mitigates security breaches |