[{"data":1,"prerenderedAt":444},["ShallowReactive",2],{"blog-how-to/netlify-env-vars":3},{"id":4,"title":5,"body":6,"category":425,"date":426,"dateModified":426,"description":427,"draft":428,"extension":429,"faq":430,"featured":428,"headerVariant":431,"image":430,"keywords":430,"meta":432,"navigation":433,"ogDescription":434,"ogTitle":430,"path":435,"readTime":430,"schemaOrg":436,"schemaType":437,"seo":438,"sitemap":439,"stem":440,"tags":441,"twitterCard":442,"__hash__":443},"blog/blog/how-to/netlify-env-vars.md","How to Set Up Netlify Environment Variables",{"type":7,"value":8,"toc":403},"minimark",[9,13,17,21,27,32,52,71,106,181,217,227,231,238,248,252,256,262,266,272,281,285,291,295,299,305,309,315,366,384],[10,11],"category-badge",{"category":12},"How-To Guide",[14,15,5],"h1",{"id":16},"how-to-set-up-netlify-environment-variables",[18,19,20],"p",{},"Securely configure secrets for your Netlify deployments",[22,23,24],"tldr",{},[18,25,26],{},"TL;DR:\nGo to Site Configuration → Environment Variables in your Netlify dashboard. Add key-value pairs and set the scope (Builds, Functions, or both). Use deploy contexts to set different values for production vs branch deploys. Trigger a deploy with cleared cache to apply changes.",[28,29,31],"h2",{"id":30},"step-by-step-setup","Step-by-Step Setup",[33,34,36,41],"step",{"number":35},"1",[37,38,40],"h3",{"id":39},"open-your-netlify-site","Open your Netlify site",[18,42,43,44,51],{},"Go to ",[45,46,50],"a",{"href":47,"rel":48},"https://app.netlify.com",[49],"nofollow","app.netlify.com"," and select your site from the dashboard.",[33,53,55,59],{"number":54},"2",[37,56,58],{"id":57},"navigate-to-environment-variables","Navigate to Environment Variables",[18,60,61,62,66,67,70],{},"Click on ",[63,64,65],"strong",{},"Site configuration"," in the left sidebar, then select ",[63,68,69],{},"Environment variables",".",[33,72,74,78,85],{"number":73},"3",[37,75,77],{"id":76},"add-a-new-variable","Add a new variable",[18,79,80,81,84],{},"Click ",[63,82,83],{},"Add a variable"," and enter:",[86,87,88,100],"ul",{},[89,90,91,94,95,99],"li",{},[63,92,93],{},"Key:"," Variable name (e.g., ",[96,97,98],"code",{},"STRIPE_SECRET_KEY",")",[89,101,102,105],{},[63,103,104],{},"Values:"," The secret value(s) for each context",[33,107,109,113,116,172],{"number":108},"4",[37,110,112],{"id":111},"configure-scopes","Configure scopes",[18,114,115],{},"Choose where the variable should be available:",[117,118,119,135],"table",{},[120,121,122],"thead",{},[123,124,125,129,132],"tr",{},[126,127,128],"th",{},"Scope",[126,130,131],{},"Available In",[126,133,134],{},"Use For",[136,137,138,150,161],"tbody",{},[123,139,140,144,147],{},[141,142,143],"td",{},"Builds",[141,145,146],{},"Build process, SSG",[141,148,149],{},"Build-time secrets",[123,151,152,155,158],{},[141,153,154],{},"Functions",[141,156,157],{},"Netlify Functions, Edge",[141,159,160],{},"Runtime API keys",[123,162,163,166,169],{},[141,164,165],{},"Post processing",[141,167,168],{},"Netlify plugins",[141,170,171],{},"Plugin configuration",[18,173,174,175,177,178,180],{},"Most variables should have both ",[63,176,143],{}," and ",[63,179,154],{}," enabled.",[33,182,184,188,191],{"number":183},"5",[37,185,187],{"id":186},"set-deploy-contexts-optional","Set deploy contexts (optional)",[18,189,190],{},"You can set different values for different environments:",[86,192,193,199,205,211],{},[89,194,195,198],{},[63,196,197],{},"All deploy contexts:"," Same value everywhere",[89,200,201,204],{},[63,202,203],{},"Production:"," Only for production deploys",[89,206,207,210],{},[63,208,209],{},"Deploy Previews:"," For PR preview builds",[89,212,213,216],{},[63,214,215],{},"Branch deploys:"," For specific branch deployments",[33,218,220,224],{"number":219},"6",[37,221,223],{"id":222},"trigger-a-new-deploy","Trigger a new deploy",[18,225,226],{},"Go to Deploys → Trigger deploy → Clear cache and deploy site. This ensures your new variables take effect.",[28,228,230],{"id":229},"using-netlifytoml-for-environment-variables","Using netlify.toml for Environment Variables",[18,232,233,234,237],{},"You can reference environment variables in your ",[96,235,236],{},"netlify.toml"," file, but never store actual secrets there:",[239,240,245],"pre",{"className":241,"code":243,"language":244},[242],"language-text","# netlify.toml\n\n[build]\n  command = \"npm run build\"\n  publish = \"dist\"\n\n[context.production]\n  environment = { NODE_ENV = \"production\" }\n\n[context.deploy-preview]\n  environment = { NODE_ENV = \"staging\" }\n\n# Don't put secrets in netlify.toml - use the dashboard!\n","text",[96,246,243],{"__ignoreMap":247},"",[28,249,251],{"id":250},"accessing-variables-in-your-code","Accessing Variables in Your Code",[37,253,255],{"id":254},"in-netlify-functions","In Netlify Functions",[239,257,260],{"className":258,"code":259,"language":244},[242],"// netlify/functions/api.js\nexport const handler = async (event) => {\n  const apiKey = process.env.STRIPE_SECRET_KEY;\n\n  if (!apiKey) {\n    return { statusCode: 500, body: 'Missing API key' };\n  }\n\n  // Use the key...\n};\n",[96,261,259],{"__ignoreMap":247},[37,263,265],{"id":264},"in-build-process-ssg","In Build Process (SSG)",[239,267,270],{"className":268,"code":269,"language":244},[242],"// Available at build time\nconst supabaseUrl = process.env.SUPABASE_URL;\n\n// For frameworks like Astro, Vite\nconst apiUrl = import.meta.env.VITE_API_URL;\n",[96,271,269],{"__ignoreMap":247},[273,274,275,278],"warning-box",{},[18,276,277],{},"Build-time vs Runtime",[18,279,280],{},"Variables used in static site generation are embedded at build time. To use secrets at runtime (when users visit your site), you need Netlify Functions or Edge Functions.",[28,282,284],{"id":283},"using-the-netlify-cli","Using the Netlify CLI",[239,286,289],{"className":287,"code":288,"language":244},[242],"# List all environment variables\nnetlify env:list\n\n# Set a variable\nnetlify env:set STRIPE_SECRET_KEY \"sk_test_xxxxx\"\n\n# Set for specific context\nnetlify env:set STRIPE_SECRET_KEY \"sk_live_xxxxx\" --context production\n\n# Get a variable value\nnetlify env:get STRIPE_SECRET_KEY\n\n# Delete a variable\nnetlify env:unset STRIPE_SECRET_KEY\n\n# Pull variables to .env for local dev\nnetlify env:pull\n",[96,290,288],{"__ignoreMap":247},[28,292,294],{"id":293},"framework-specific-notes","Framework-Specific Notes",[37,296,298],{"id":297},"nextjs-on-netlify","Next.js on Netlify",[239,300,303],{"className":301,"code":302,"language":244},[242],"# Server-side only\nDATABASE_URL=postgresql://...\n\n# Exposed to browser (be careful!)\nNEXT_PUBLIC_API_URL=https://api.example.com\n",[96,304,302],{"__ignoreMap":247},[37,306,308],{"id":307},"astro-on-netlify","Astro on Netlify",[239,310,313],{"className":311,"code":312,"language":244},[242],"# Server-side (in .ts files, API routes)\nSECRET_KEY=xxxxx\n\n# Client-side (use PUBLIC_ prefix)\nPUBLIC_API_URL=https://api.example.com\n",[96,314,312],{"__ignoreMap":247},[316,317,318,333,346],"faq-section",{},[319,320,322],"faq-item",{"question":321},"Why aren't my environment variables working?",[18,323,324,325,328,329,332],{},"Make sure you've enabled the right scopes (Builds and/or Functions). Then clear cache and redeploy. If using a framework, check if it requires a specific prefix (like ",[96,326,327],{},"NEXT_PUBLIC_"," or ",[96,330,331],{},"VITE_",").",[319,334,336],{"question":335},"Can I use environment variables in redirects?",[18,337,338,339,342,343,345],{},"No, environment variables cannot be used in the ",[96,340,341],{},"_redirects"," file or the redirects section of ",[96,344,236],{},". These are processed at the edge and don't have access to your build-time variables.",[319,347,349],{"question":348},"How do I sync environment variables for local development?",[18,350,351,352,355,356,359,360,362,363,70],{},"Use ",[96,353,354],{},"netlify env:pull"," to download your variables to a local ",[96,357,358],{},".env"," file. Make sure to add ",[96,361,358],{}," to your ",[96,364,365],{},".gitignore",[18,367,368,371,375,376,375,380],{},[63,369,370],{},"Related guides:",[45,372,374],{"href":373},"/blog/how-to/environment-variables","Environment Variables Guide"," ·\n",[45,377,379],{"href":378},"/blog/how-to/vercel-env-vars","Vercel Environment Variables",[45,381,383],{"href":382},"/blog/how-to/hide-api-keys","How to Hide API Keys",[385,386,387,393,398],"related-articles",{},[388,389],"related-card",{"description":390,"href":391,"title":392},"Complete guide to Content Security Policy setup. Learn CSP directives, implement nonces, configure reporting, and create","/blog/how-to/csp-setup","How to Set Up Content Security Policy (CSP)",[388,394],{"description":395,"href":396,"title":397},"Step-by-step guide to configuring SSL certificates for custom domains on Vercel, Netlify, and Cloudflare. Includes DNS c","/blog/how-to/custom-domain-ssl","How to Set Up SSL for Custom Domains",[388,399],{"description":400,"href":401,"title":402},"Step-by-step guide to implementing database audit logging. Track who accessed what data, when, and detect unauthorized a","/blog/how-to/database-audit-logs","How to Set Up Database Audit Logs",{"title":247,"searchDepth":404,"depth":404,"links":405},2,[406,415,416,420,421],{"id":30,"depth":404,"text":31,"children":407},[408,410,411,412,413,414],{"id":39,"depth":409,"text":40},3,{"id":57,"depth":409,"text":58},{"id":76,"depth":409,"text":77},{"id":111,"depth":409,"text":112},{"id":186,"depth":409,"text":187},{"id":222,"depth":409,"text":223},{"id":229,"depth":404,"text":230},{"id":250,"depth":404,"text":251,"children":417},[418,419],{"id":254,"depth":409,"text":255},{"id":264,"depth":409,"text":265},{"id":283,"depth":404,"text":284},{"id":293,"depth":404,"text":294,"children":422},[423,424],{"id":297,"depth":409,"text":298},{"id":307,"depth":409,"text":308},"how-to","2026-01-20","Complete guide to configuring environment variables in Netlify. Set up secrets for builds, functions, and different deploy contexts securely.",false,"md",null,"yellow",{},true,"Complete guide to Netlify environment variables configuration.","/blog/how-to/netlify-env-vars","[object Object]","HowTo",{"title":5,"description":427},{"loc":435},"blog/how-to/netlify-env-vars",[],"summary_large_image","Q47O_l0isbmyBnnmyZn_1mpMYx7A1ptq8lZv6zGo_m0",1775843928103]