{"id":6112,"date":"2026-03-31T11:34:29","date_gmt":"2026-03-31T06:04:29","guid":{"rendered":"https:\/\/codematrix.co.in\/blog\/?page_id=6112"},"modified":"2026-04-03T17:37:34","modified_gmt":"2026-04-03T12:07:34","slug":"environment-variables","status":"publish","type":"page","link":"https:\/\/codematrix.co.in\/blog\/environment-variables\/","title":{"rendered":"Environment Variables"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6112\" class=\"elementor elementor-6112\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdc3e42 e-flex e-con-boxed e-con e-parent\" data-id=\"fdc3e42\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-163af12 elementor-widget elementor-widget-html\" data-id=\"163af12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- Brand Styling --- *\/\r\n    :root {\r\n        --brand-purple: #9C00E4;\r\n        --brand-light: #f3e8ff;\r\n    }\r\n\r\n    \/* Reset & Base *\/\r\n    .python-full-layout * { box-sizing: border-box; }\r\n\r\n    \/* Layout Adjustments *\/\r\n    .python-full-layout { \r\n        display: flex; \r\n        gap: 30px; \r\n        padding: 20px; \r\n        max-width: 1200px; \r\n        margin: 0 auto;\r\n        background: #fdfbff; \r\n    }\r\n\r\n    .sidebar { \r\n        width: 280px; \r\n        position: sticky; \r\n        top: 20px; \r\n        height: fit-content; \r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .sidebar .topic { \r\n        display: block; \r\n        padding: 12px; \r\n        text-decoration: none; \r\n        color: #444; \r\n        border-radius: 8px; \r\n        margin-bottom: 8px; \r\n        background: #fff;\r\n        border: 1px solid #eee;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .sidebar .topic.active { \r\n        background: var(--brand-purple); \r\n        color: white; \r\n        border-color: var(--brand-purple);\r\n    }\r\n\r\n    \/* Main Content *\/\r\n    .main-content { \r\n        flex: 1; \r\n        font-family: 'Segoe UI', sans-serif; \r\n        min-width: 0; \r\n    }\r\n\r\n    .article-card { \r\n        background: white; \r\n        padding: 30px; \r\n        border-radius: 15px; \r\n        box-shadow: 0 4px 15px rgba(0,0,0,0.05); \r\n    }\r\n\r\n    h1 { color: var(--brand-purple); font-size: 2.2rem; margin-bottom: 20px; }\r\n    h2 { color: #333; margin-top: 30px; border-left: 4px solid var(--brand-purple); padding-left: 15px; }\r\n    \r\n    .custom-img { \r\n        display: block; \r\n        margin: 30px auto; \r\n        width: 100%; \r\n        max-width: 600px; \r\n        border: 2px solid #e9d5ff; \r\n        border-radius: 10px;\r\n    }\r\n\r\n    pre { \r\n        background: #1a1a2e; \r\n        color: #fff; \r\n        padding: 15px; \r\n        border-radius: 10px; \r\n        overflow-x: auto; \r\n        font-size: 0.9rem;\r\n        line-height: 1.4;\r\n    }\r\n\r\n    .important-note {\r\n        background: #fff8e1;\r\n        border-left: 5px solid #ffc107;\r\n        padding: 15px;\r\n        margin: 20px 0;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 991px) {\r\n        .python-full-layout { flex-direction: column; }\r\n        .sidebar { width: 100%; position: relative; top: 0; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"python-full-layout\">\r\n    <aside class=\"sidebar\">\r\n        <h2 style=\"font-size: 1.2rem; color: var(--brand-purple); margin-bottom: 15px;\">MERN Security<\/h2>\r\n        <a href=\"#definition\" class=\"topic active\">What are Env Vars?<\/a>\r\n        <a href=\"#backend\" class=\"topic\">1. Node\/Express Setup<\/a>\r\n        <a href=\"#frontend\" class=\"topic\">2. React Setup<\/a>\r\n        <a href=\"#git\" class=\"topic\">3. .gitignore Rules<\/a>\r\n        <a href=\"#mcq\" class=\"topic\">Practice MCQs<\/a>\r\n    <\/aside>\r\n\r\n    <main class=\"main-content\">\r\n        <article class=\"article-card\">\r\n            \r\n            <header id=\"definition\">\r\n                <h1>Environment Variables in MERN<\/h1>\r\n                <p><strong>Environment Variables<\/strong> are dynamic-named values that can affect the way running processes will behave on a computer. In a MERN stack, they are used to store <strong>sensitive information<\/strong> like MongoDB URIs, API Secret Keys, and Port numbers outside of the actual source code.<\/p>\r\n            <\/header>\r\n\r\n            <img decoding=\"async\" src=\"https:\/\/codematrix.co.in\/blog\/wp-content\/uploads\/2026\/04\/AqsRGon0Ywv2SAxmA-qERzFVwZKXuefu08WPDw0Tw7ffusxLSxL91RoPJWgHNsX-qgB1n6-3Xq.png\" alt=\"Environment Variables\" class=\"custom-img\">\r\n            \r\n\r\n            <section id=\"backend\">\r\n                <h2>1. Backend Setup (Node.js & Express)<\/h2>\r\n                <p>On the backend, we use the <code>dotenv<\/code> package to load variables from a <code>.env<\/code> file into <code>process.env<\/code>.<\/p>\r\n                <pre>\r\n\/\/ .env file\r\nPORT=5000\r\nMONGO_URI=mongodb+srv:\/\/user:pass@cluster.mongodb.net\/\r\n\r\n\/\/ server.js\r\nrequire('dotenv').config();\r\nconst port = process.env.PORT || 5000;\r\nmongoose.connect(process.env.MONGO_URI);\r\n                <\/pre>\r\n            <\/section>\r\n\r\n            <section id=\"frontend\">\r\n                <h2>2. Frontend Setup (React)<\/h2>\r\n                <p>If you are using <strong>Create React App<\/strong>, variables must start with <code>REACT_APP_<\/code>. If using <strong>Vite<\/strong>, they start with <code>VITE_<\/code>.<\/p>\r\n                <pre>\r\n\/\/ .env file\r\nREACT_APP_API_URL=http:\/\/localhost:5000\/api\r\n\r\n\/\/ App.js\r\nconst apiUrl = process.env.REACT_APP_API_URL;\r\n                <\/pre>\r\n                <div class=\"important-note\">\r\n                    <strong>Warning:<\/strong> Never store secret keys (like Stripe Secret Keys) in the frontend. Frontend variables are visible to anyone who inspects your website's code!\r\n                <\/div>\r\n            <\/section>\r\n            <section id=\"git\">\r\n                <h2>3. The .gitignore Rule<\/h2>\r\n                <p>The most important step is to add your <code>.env<\/code> file to your <code>.gitignore<\/code> file. This ensures your secrets are never uploaded to GitHub.<\/p>\r\n                <pre>\r\n# .gitignore\r\nnode_modules\r\n.env\r\n                <\/pre>\r\n            <\/section>\r\n\r\n            <section id=\"mcq\" class=\"practice-mcqs\">\r\n                <h2>Knowledge Check<\/h2>\r\n                <div class=\"mcq-box\" style=\"background: #f9f4ff; padding: 20px; border-radius: 10px; border: 1px solid #e9d5ff;\">\r\n                    <p><strong>1. Which object is used to access variables in Node.js?<\/strong><br>\r\n                    A) process.vars | B) <strong>process.env<\/strong> | C) system.env<\/p>\r\n                    \r\n                    <p><strong>2. In Create React App, what prefix is required for environment variables?<\/strong><br>\r\n                    A) API_ | B) SECRET_ | C) <strong>REACT_APP_<\/strong><\/p>\r\n\r\n                    <p><strong>3. Why do we add .env to .gitignore?<\/strong><br>\r\n                    A) To make the app run faster | B) <strong>To prevent sensitive keys from leaking to GitHub<\/strong> | C) Because GitHub doesn't support .env files<\/p>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <div style=\"text-align: center; margin-top: 40px;\">\r\n                <a href=\"https:\/\/codematrix.co.in\/courses\" target=\"_blank\" style=\"background: var(--brand-purple); color: white; padding: 12px 25px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold;\">\r\n                    \ud83d\ude80 Secure Your MERN Project!\r\n                <\/a>\r\n            <\/div>\r\n\r\n        <\/article>\r\n    <\/main>\r\n<\/div>\r\n\r\n<script>\r\nwindow.addEventListener('DOMContentLoaded', () => {\r\n    const sections = document.querySelectorAll('header[id], section[id]');\r\n    const navLinks = document.querySelectorAll('.sidebar .topic');\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                navLinks.forEach(link => {\r\n                    link.classList.remove('active');\r\n                    if (link.getAttribute('href') === `#${entry.target.id}`) {\r\n                        link.classList.add('active');\r\n                    }\r\n                });\r\n            }\r\n        });\r\n    }, { threshold: 0.5 });\r\n    sections.forEach(section => observer.observe(section));\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MERN Security What are Env Vars? 1. Node\/Express Setup 2. React Setup 3. .gitignore Rules Practice MCQs Environment Variables in MERN Environment Variables are dynamic-named values that can affect the way running processes will behave on a computer. In a MERN stack, they are used to store sensitive information like MongoDB URIs, API Secret Keys, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/6112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/comments?post=6112"}],"version-history":[{"count":7,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/6112\/revisions"}],"predecessor-version":[{"id":6779,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/6112\/revisions\/6779"}],"wp:attachment":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/media?parent=6112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}