[{"data":1,"prerenderedAt":448},["ShallowReactive",2],{"blog-how-to/dotenv-setup":3},{"id":4,"title":5,"body":6,"category":429,"date":430,"dateModified":430,"description":431,"draft":432,"extension":433,"faq":434,"featured":432,"headerVariant":435,"image":434,"keywords":434,"meta":436,"navigation":437,"ogDescription":438,"ogTitle":17,"path":439,"readTime":434,"schemaOrg":440,"schemaType":441,"seo":442,"sitemap":443,"stem":444,"tags":445,"twitterCard":446,"__hash__":447},"blog/blog/how-to/dotenv-setup.md","How to Set Up .env Files - Complete Guide",{"type":7,"value":8,"toc":411},"minimark",[9,13,18,22,28,33,110,114,140,156,175,179,183,186,192,196,199,205,209,212,218,221,227,231,238,244,248,254,288,292,295,322,328,372,392],[10,11],"category-badge",{"category":12},"How-To Guide",[14,15,17],"h1",{"id":16},"how-to-set-up-env-files","How to Set Up .env Files",[19,20,21],"p",{},"Complete configuration guide for local development",[23,24,25],"tldr",{},[19,26,27],{},"TL;DR:\nCreate a\n.env.local\nfile in your project root with\nKEY=value\npairs. Add it to\n.gitignore\n. Most modern frameworks (Next.js, Vite) load .env files automatically. For Node.js, install the\ndotenv\npackage and import it at the top of your entry file.",[29,30,32],"h2",{"id":31},"file-naming-conventions","File Naming Conventions",[34,35,36,52],"table",{},[37,38,39],"thead",{},[40,41,42,46,49],"tr",{},[43,44,45],"th",{},"File",[43,47,48],{},"Purpose",[43,50,51],{},"Commit to Git?",[53,54,55,67,78,89,99],"tbody",{},[40,56,57,61,64],{},[58,59,60],"td",{},".env",[58,62,63],{},"Base defaults",[58,65,66],{},"Sometimes (no secrets)",[40,68,69,72,75],{},[58,70,71],{},".env.local",[58,73,74],{},"Local overrides with secrets",[58,76,77],{},"Never",[40,79,80,83,86],{},[58,81,82],{},".env.development",[58,84,85],{},"Development environment",[58,87,88],{},"Sometimes",[40,90,91,94,97],{},[58,92,93],{},".env.production",[58,95,96],{},"Production environment",[58,98,77],{},[40,100,101,104,107],{},[58,102,103],{},".env.example",[58,105,106],{},"Template with placeholder values",[58,108,109],{},"Yes",[29,111,113],{"id":112},"step-by-step-setup","Step-by-Step Setup",[115,116,118,123,130],"step",{"number":117},"1",[119,120,122],"h3",{"id":121},"create-your-envlocal-file","Create your .env.local file",[19,124,125,126,129],{},"In your project root, create ",[127,128,71],"code",{},":",[131,132,137],"pre",{"className":133,"code":135,"language":136},[134],"language-text","# .env.local\n\n# Database\nDATABASE_URL=postgresql://localhost:5432/mydb\n\n# API Keys\nSTRIPE_SECRET_KEY=sk_test_xxxxx\nOPENAI_API_KEY=sk-xxxxx\n\n# Public variables (exposed to browser in Next.js)\nNEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co\nNEXT_PUBLIC_API_URL=http://localhost:3000/api\n","text",[127,138,135],{"__ignoreMap":139},"",[115,141,143,147,150],{"number":142},"2",[119,144,146],{"id":145},"add-to-gitignore","Add to .gitignore",[19,148,149],{},"Make sure .env files with secrets are never committed:",[131,151,154],{"className":152,"code":153,"language":136},[134],"# .gitignore\n\n# Environment files\n.env\n.env.local\n.env.*.local\n.env.production\n\n# Keep the example\n!.env.example\n",[127,155,153],{"__ignoreMap":139},[115,157,159,163,169],{"number":158},"3",[119,160,162],{"id":161},"create-an-example-file","Create an example file",[19,164,165,166,168],{},"Create ",[127,167,103],{}," as a template for other developers:",[131,170,173],{"className":171,"code":172,"language":136},[134],"# .env.example - Copy to .env.local and fill in values\n\nDATABASE_URL=postgresql://user:password@localhost:5432/dbname\nSTRIPE_SECRET_KEY=sk_test_your_key_here\nOPENAI_API_KEY=sk-your_key_here\nNEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co\n",[127,174,172],{"__ignoreMap":139},[29,176,178],{"id":177},"framework-specific-setup","Framework-Specific Setup",[119,180,182],{"id":181},"nextjs","Next.js",[19,184,185],{},"Next.js loads .env files automatically. No installation needed.",[131,187,190],{"className":188,"code":189,"language":136},[134],"// Access in server components, API routes, etc.\nconst apiKey = process.env.STRIPE_SECRET_KEY;\n\n// Access in client components (must have NEXT_PUBLIC_ prefix)\nconst apiUrl = process.env.NEXT_PUBLIC_API_URL;\n",[127,191,189],{"__ignoreMap":139},[119,193,195],{"id":194},"vite-react-vue-svelte","Vite (React, Vue, Svelte)",[19,197,198],{},"Vite also loads .env files automatically, but uses a different prefix:",[131,200,203],{"className":201,"code":202,"language":136},[134],"# .env.local\nVITE_API_URL=https://api.example.com\n\n// Access in code\nconst apiUrl = import.meta.env.VITE_API_URL;\n",[127,204,202],{"__ignoreMap":139},[119,206,208],{"id":207},"nodejs-express-etc","Node.js (Express, etc.)",[19,210,211],{},"For plain Node.js, install the dotenv package:",[131,213,216],{"className":214,"code":215,"language":136},[134],"npm install dotenv\n",[127,217,215],{"__ignoreMap":139},[19,219,220],{},"Then import it at the very top of your entry file:",[131,222,225],{"className":223,"code":224,"language":136},[134],"// index.js or server.js - MUST be first import\nimport 'dotenv/config';\n// or: require('dotenv').config();\n\n// Now process.env has your variables\nconst port = process.env.PORT || 3000;\nconst dbUrl = process.env.DATABASE_URL;\n",[127,226,224],{"__ignoreMap":139},[119,228,230],{"id":229},"create-react-app","Create React App",[19,232,233,234,237],{},"CRA uses the ",[127,235,236],{},"REACT_APP_"," prefix:",[131,239,242],{"className":240,"code":241,"language":136},[134],"# .env.local\nREACT_APP_API_URL=https://api.example.com\n\n// Access in code\nconst apiUrl = process.env.REACT_APP_API_URL;\n",[127,243,241],{"__ignoreMap":139},[29,245,247],{"id":246},"env-file-syntax",".env File Syntax",[131,249,252],{"className":250,"code":251,"language":136},[134],"# Comments start with #\n# Basic format: KEY=value (no spaces around =)\n\n# Simple values\nPORT=3000\nNODE_ENV=development\n\n# Strings with spaces need quotes\nAPP_NAME=\"My Awesome App\"\n\n# URLs don't need quotes\nAPI_URL=https://api.example.com/v1\n\n# Multi-line values use quotes\nPRIVATE_KEY=\"-----BEGIN RSA PRIVATE KEY-----\nMIIEpAIBAAKCAQEA\n-----END RSA PRIVATE KEY-----\"\n\n# Reference other variables (in some implementations)\nBASE_URL=https://api.example.com\nFULL_URL=${BASE_URL}/v1\n",[127,253,251],{"__ignoreMap":139},[255,256,257,260],"warning-box",{},[19,258,259],{},"Common Syntax Mistakes",[261,262,263,275,282],"ul",{},[264,265,266,267,270,271,274],"li",{},"Spaces around ",[127,268,269],{},"=",": ",[127,272,273],{},"KEY = value"," (wrong)",[264,276,277,278,281],{},"Trailing spaces: ",[127,279,280],{},"KEY=value"," (can cause issues)",[264,283,284,285,274],{},"Missing quotes with spaces: ",[127,286,287],{},"NAME=My App",[29,289,291],{"id":290},"loading-order","Loading Order",[19,293,294],{},"Most frameworks load .env files in this order (later files override earlier ones):",[296,297,298,302,306,314],"ol",{},[264,299,300],{},[127,301,60],{},[264,303,304],{},[127,305,71],{},[264,307,308,310,311,313],{},[127,309,82],{}," or ",[127,312,93],{}," (based on NODE_ENV)",[264,315,316,310,319],{},[127,317,318],{},".env.development.local",[127,320,321],{},".env.production.local",[323,324,325],"tip-box",{},[19,326,327],{},"Pro tip:\nUse\n.env.local\nfor local secrets and\n.env\nfor shared, non-sensitive defaults.",[329,330,331,345,357],"faq-section",{},[332,333,335],"faq-item",{"question":334},"Do I need to restart my dev server after changing .env?",[19,336,337,338,340,341,344],{},"Yes. Environment variables are loaded when your application starts. After changing ",[127,339,71],{},", restart your dev server with ",[127,342,343],{},"npm run dev"," or equivalent.",[332,346,348],{"question":347},"Why isn't my variable showing up?",[19,349,350,351,353,354,356],{},"Check: 1) You restarted the dev server, 2) The variable is in ",[127,352,71],{}," not just ",[127,355,60],{},", 3) For browser access, you're using the correct prefix (NEXT_PUBLIC_, VITE_, REACT_APP_).",[332,358,360],{"question":359},"Should I commit .env files?",[19,361,362,363,365,366,368,369,371],{},"Never commit files with real secrets. You can commit ",[127,364,60],{}," with non-sensitive defaults or ",[127,367,103],{}," as a template. Always keep ",[127,370,71],{}," and any file with secrets in .gitignore.",[19,373,374,378,383,384,383,388],{},[375,376,377],"strong",{},"Related guides:",[379,380,382],"a",{"href":381},"/blog/how-to/environment-variables","Environment Variables Guide"," ·\n",[379,385,387],{"href":386},"/blog/how-to/gitignore-secrets","How to Gitignore Secrets",[379,389,391],{"href":390},"/blog/how-to/hide-api-keys","How to Hide API Keys",[393,394,395,401,406],"related-articles",{},[396,397],"related-card",{"description":398,"href":399,"title":400},"Step-by-step guide to implementing rate limiting. Protect your API from abuse with Upstash, Redis, or in-memory solution","/blog/how-to/implement-rate-limiting","How to Implement Rate Limiting in Your API",[396,402],{"description":403,"href":404,"title":405},"Step-by-step guide to secure JWT implementation. Choose the right algorithm, handle token storage, implement refresh tok","/blog/how-to/jwt-security","How to Implement JWT Security",[396,407],{"description":408,"href":409,"title":410},"Step-by-step guide to implementing secure magic link authentication. Passwordless login via email with proper security c","/blog/how-to/magic-links","How to Implement Magic Link Authentication",{"title":139,"searchDepth":412,"depth":412,"links":413},2,[414,415,421,427,428],{"id":31,"depth":412,"text":32},{"id":112,"depth":412,"text":113,"children":416},[417,419,420],{"id":121,"depth":418,"text":122},3,{"id":145,"depth":418,"text":146},{"id":161,"depth":418,"text":162},{"id":177,"depth":412,"text":178,"children":422},[423,424,425,426],{"id":181,"depth":418,"text":182},{"id":194,"depth":418,"text":195},{"id":207,"depth":418,"text":208},{"id":229,"depth":418,"text":230},{"id":246,"depth":412,"text":247},{"id":290,"depth":412,"text":291},"how-to","2026-01-13","Complete guide to setting up .env files for local development. Learn the dotenv package, file naming conventions, and how to keep secrets out of git.",false,"md",null,"yellow",{},true,"Complete guide to .env file configuration for local development.","/blog/how-to/dotenv-setup","[object Object]","HowTo",{"title":5,"description":431},{"loc":439},"blog/how-to/dotenv-setup",[],"summary_large_image","cysnOI6SiodUNVvI77CNT2UxRgH9hhr1YoY25yzhOvQ",1775843928379]