Aller au contenu principal

.env.development.local «Premium»

.env.development.local is a simple, effective convention for machine-specific development configuration. When used with clear documentation, an example template, and proper .gitignore settings, it helps teams keep secrets off version control while allowing safe, flexible local development. Remember to check your framework’s exact dotenv handling so you rely on the correct precedence and naming conventions.

The .env.development.local file is used to store environment-specific overrides and sensitive secrets for your local development environment. It is specifically designed to be ignored by version control (Git) so that personal API keys or local database passwords aren't shared with other developers. Suggested Content for .env.development.local

Below is a draft structure containing common variables for local development. Replace the placeholder values with your actual local credentials.

# --- DATABASE CONFIGURATION --- # Local database connection (different from staging/production) DATABASE_URL="postgresql://user:password@localhost:5432/my_dev_db" # --- API KEYS & SECRETS --- # Personal API keys for local testing STRIPE_SECRET_KEY="sk_test_51Mz..." AWS_SECRET_ACCESS_KEY="your-local-dev-key" AUTH_SECRET="a-very-long-random-string-for-local-auth" # --- APPLICATION SETTINGS --- # Local API endpoint overrides NEXT_PUBLIC_API_URL="http://localhost:4000/api" DEBUG=true # --- THIRD-PARTY SERVICES --- # Local-only sandbox credentials MAILTRAP_USER="your_mailtrap_user" MAILTRAP_PASS="your_mailtrap_password" Use code with caution. Copied to clipboard Key Rules for This File

Git Security: Ensure this file is listed in your .gitignore. Never commit it to a repository.

Variable Precedence: In frameworks like Next.js or Create React App, variables in .env.development.local will override those in .env.development and .env.

Comments: You can use the # symbol to add notes or categorize your variables for better organization.

Browser Exposure: Remember that variables prefixed with NEXT_PUBLIC_ or REACT_APP_ will be accessible in the browser. Do not put highly sensitive server-side secrets in these specific public variables. .env.development.local

.env.development.local file is a specialized configuration file used in modern web development frameworks like Create React App

. It is used to store sensitive or machine-specific environment variables that should only be active during local development. Core Purpose Local Overrides

: Its primary role is to override default development settings without affecting other team members' environments. Development Only

: Variables in this file are only loaded when the application is running in "development" mode (e.g., npm run dev Security & Privacy : It is intended to be kept local to your machine and must never be committed to version control (Git). Loading Priority (Hierarchy)

Frameworks typically load environment files in a specific order of precedence. In most systems like .env.development.local highest priority for development environments: .env.development.local (Highest priority; local machine overrides) .env.local (Local overrides for all modes except .env.development (Shared development settings) (Default settings for all environments) Best Practices

How can I handle dev and testing environment on a single machine?

If you are using dotenv manually, you can implement this pattern yourself using the dotenv-expand package or by conditionally loading files: If you are using dotenv manually, you can

const dotenv = require('dotenv');
const path = require('path');

// Load base .env
dotenv.config( path: path.resolve(process.cwd(), '.env') );


// Load environment-specific
if (process.env.NODE_ENV === 'development') 
dotenv.config( path: path.resolve(process.cwd(), '.env.development') );



// Load local override (highest priority)
dotenv.config( path: path.resolve(process.cwd(), '.env.development.local') );

Checklist:

To understand why this file is necessary, you must understand the order in which these files load. Generally, the system loads files from lowest priority to highest priority (the last one loaded wins).

Typical Priority Order (Highest to Lowest): // Load local override (highest priority) dotenv

Why this matters: If you define API_URL=http://localhost:3000 in .env.development.local, it will override a value defined in .env.development or .env. This allows you to customize the app for your specific machine without breaking the configuration for other developers.

.env.development.local is a dotenv-style environment file commonly used in JavaScript/Node and frontend projects (Create React App, Vite, Next.js, etc.) to store development-only environment variables that should override other development settings on a single machine. It fits into a conventional dotenv hierarchy where different files target different environments and scopes (e.g., .env, .env.development, .env.production, .env.local).

.env.development.local acts as your personal "scratchpad" for environment variables during the development phase. It allows you to:

By adhering to the .gitignore standards and prefix rules of your specific framework, you can utilize this file to streamline your personal workflow while keeping the shared codebase clean.

Create .vscode/extensions.json:


  "recommendations": ["mikestead.dotenv"]

Then in .vscode/settings.json:


  "files.associations": 
    ".env.development.local": "dotenv"
  ,
  "[dotenv]": 
    "editor.tokenColorCustomizations": [
"scope": "variable.other.env",
        "settings": 
          "foreground": "#9CDCFE"
]