{"id":30553,"date":"2023-09-17T16:45:41","date_gmt":"2023-09-17T16:45:41","guid":{"rendered":"https:\/\/alexrusin.com\/?p=30553"},"modified":"2023-10-07T09:58:02","modified_gmt":"2023-10-07T17:58:02","slug":"runtime-environment-variables-in-javascript","status":"publish","type":"post","link":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/","title":{"rendered":"Environment Variables in JavaScript"},"content":{"rendered":"\n<p>Environment variables in JavaScript are a set of key-value pairs that can be used to store data outside of the JavaScript code. This data can be anything from API keys to database credentials. Environment variables are often used to keep sensitive data secret, as they are not stored in the code itself.<\/p>\n\n\n\n<p>We can import environment variables in the code with<em> process.env<\/em> object.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export API_KEY=YOUR_API_KEY<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Runtime Environment Variables in JavaScript\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/2T57ETUjQPg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Runtime Environment Variables in JavaScript<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Dotenv File for Environment Variables<\/h2>\n\n\n\n<p>It is tedious to put all your environment variables using export while developing. Therefore you can use dotenv file. It is just a text file that contains environment variables. Dotenv file needs to be loaded into your code. There\u2019s<a href=\"https:\/\/www.npmjs.com\/package\/dotenv\"> NPM package<\/a> with the same name that will help you do it. This package puts variables that you have in your dotenv file into <em>process.env<\/em> object. You just import the package in your main javascript index file. However recently I have been using <a href=\"https:\/\/www.npmjs.com\/package\/dotenv-cli\">dotenv-cli<\/a>. You just use it when you run your dev command and it will load your dotenv file.<\/p>\n\n\n\n<p>DotEnv file should not be committed to github repo or otherwise shared. It should be added to your <em>.gitignore<\/em> file. In order to let your co-workers know what variable they are supposed to use as environment variables you can create <em>.env.example<\/em> file and commit it to the repo. <em>.env.example<\/em> file should list all the necessary environment variables. When your co-worker sets up the project they just simply copy<em> .env.example<\/em> file to <em>.env<\/em> file and update it with their environment variables.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Environment Manager Class<\/h2>\n\n\n\n<p>As we already saw, environment variables can be used in the code by doing process.env. object. However when you have a lot of environment variables, this doesn\u2019t scale well. Besides some variables may have default values. It is a good practice to use EnvManager class.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">export default class EnvManager {\n  public static getConfig = (name: string, defaultValue: any) => {\n    return process.env[name] ?? defaultValue;\n  };\n\n  public static getNodeEnv = (defaultValue?: any) => {\n    return this.getConfig(\"NODE_ENV\", defaultValue || \"development\");\n  };\n\n  public static getPort = (defaultValue?: any) => {\n    return Number(this.getConfig(\"PORT\", defaultValue));\n  };\n\n  public static getDbHost = (defaultValue?: any) => {\n    return this.getConfig(\"DB_HOST\", defaultValue);\n  };\n\n  public static getDbPort = (defaultValue?: any) => {\n    return Number(this.getConfig(\"DB_PORT\", defaultValue));\n  };\n\n  public static getDbName = (defaultValue?: any) => {\n    return this.getConfig(\"DB_NAME\", defaultValue);\n  };\n\n  public static getDbUsername = (defaultValue?: any) => {\n    return this.getConfig(\"DB_USERNAME\", defaultValue);\n  };\n\n  public static getDbPassword = (defaultValue?: any) => {\n    return this.getConfig(\"DB_PASSWORD\", defaultValue);\n  };\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">EnvManager with JavaScript Proxy<\/h2>\n\n\n\n<p>EnvManager class is a good way to manage environment variables in JavaScript, however, it may get a bit tedious to add a static method to the class whenever we are going to add a new variable. To automate this process we can use JavaScript Proxy. Let\u2019s take a look at how to do that.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">export default new Proxy(envManager, {\n  get(envManager: EnvManager, field: string) {\n    return function (defaultValue?: string | number | boolean) {\n      if (field in envManager) {\n        \/\/ if method exists on envManager (getDbConnectionUrl)\n        return envManager[field](defaultValue);\n      }\n      let envVariable: string | number | undefined =\n        process.env[studlyCaseToSnakeCase(field.replace(\"get\", \"\"))];\n\n      if (envVariable &amp;&amp; \/^true$\/i.test(envVariable)) {\n        return true;\n      }\n\n      if (envVariable &amp;&amp; \/^false$\/i.test(envVariable)) {\n        return false;\n      }\n\n      if (envVariable &amp;&amp; !isNaN(parseInt(envVariable, 10))) {\n        (envVariable = parseInt(envVariable, 10));\n      }\n      return envVariable || defaultValue;\n    };\n  },\n});<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In conclusion, mastering the art of environment variables in JavaScript is not just about safeguarding sensitive data but also about streamlining your development process. By using dotenv files, you can keep your secrets safe and your code clean. The EnvManager class is a fantastic tool to efficiently access these variables, and if you want to take it a step further, the JavaScript Proxy method can automate and simplify the process.<\/p>\n\n\n\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Environment variables in JavaScript are a set of key-value pairs that can be used to store data outside of the JavaScript code. This data can be anything from API keys to database credentials. Environment variables are often used to keep sensitive data secret, as they are not stored in the code itself. We can import&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[15],"tags":[24,17],"class_list":["post-30553","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-environment-variables","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Environment Variables in JavaScript | Alex Rusin Blog<\/title>\n<meta name=\"description\" content=\"Explore the power of environment variables in JavaScript to securely store data like API keys and database credentials outside of your code. Discover how to efficiently import and manage environment variables using dotenv files and a handy EnvManager class. Plus, learn a smart trick to automate the process using JavaScript Proxy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Environment Variables in JavaScript | Alex Rusin Blog\" \/>\n<meta property=\"og:description\" content=\"Explore the power of environment variables in JavaScript to securely store data like API keys and database credentials outside of your code. Discover how to efficiently import and manage environment variables using dotenv files and a handy EnvManager class. Plus, learn a smart trick to automate the process using JavaScript Proxy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Alex Rusin Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-17T16:45:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-07T17:58:02+00:00\" \/>\n<meta name=\"author\" content=\"alexrusin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alexrusin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/\"},\"author\":{\"name\":\"alexrusin\",\"@id\":\"https:\/\/blog.alexrusin.com\/#\/schema\/person\/a9005ca622862109b2c514050fbaaf9a\"},\"headline\":\"Environment Variables in JavaScript\",\"datePublished\":\"2023-09-17T16:45:41+00:00\",\"dateModified\":\"2023-10-07T17:58:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/\"},\"wordCount\":450,\"publisher\":{\"@id\":\"https:\/\/blog.alexrusin.com\/#\/schema\/person\/a9005ca622862109b2c514050fbaaf9a\"},\"keywords\":[\"environment variables\",\"javascript\"],\"articleSection\":[\"Javascript Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/\",\"url\":\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/\",\"name\":\"Environment Variables in JavaScript | Alex Rusin Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.alexrusin.com\/#website\"},\"datePublished\":\"2023-09-17T16:45:41+00:00\",\"dateModified\":\"2023-10-07T17:58:02+00:00\",\"description\":\"Explore the power of environment variables in JavaScript to securely store data like API keys and database credentials outside of your code. Discover how to efficiently import and manage environment variables using dotenv files and a handy EnvManager class. Plus, learn a smart trick to automate the process using JavaScript Proxy.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.alexrusin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Environment Variables in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.alexrusin.com\/#website\",\"url\":\"https:\/\/blog.alexrusin.com\/\",\"name\":\"Alex Rusin\",\"description\":\"Web Development Blog\",\"publisher\":{\"@id\":\"https:\/\/blog.alexrusin.com\/#\/schema\/person\/a9005ca622862109b2c514050fbaaf9a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.alexrusin.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/blog.alexrusin.com\/#\/schema\/person\/a9005ca622862109b2c514050fbaaf9a\",\"name\":\"alexrusin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.alexrusin.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c36ef231f9e0b11371891eb84360f4bc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c36ef231f9e0b11371891eb84360f4bc?s=96&d=mm&r=g\",\"caption\":\"alexrusin\"},\"logo\":{\"@id\":\"https:\/\/blog.alexrusin.com\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Environment Variables in JavaScript | Alex Rusin Blog","description":"Explore the power of environment variables in JavaScript to securely store data like API keys and database credentials outside of your code. Discover how to efficiently import and manage environment variables using dotenv files and a handy EnvManager class. Plus, learn a smart trick to automate the process using JavaScript Proxy.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Environment Variables in JavaScript | Alex Rusin Blog","og_description":"Explore the power of environment variables in JavaScript to securely store data like API keys and database credentials outside of your code. Discover how to efficiently import and manage environment variables using dotenv files and a handy EnvManager class. Plus, learn a smart trick to automate the process using JavaScript Proxy.","og_url":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/","og_site_name":"Alex Rusin Blog","article_published_time":"2023-09-17T16:45:41+00:00","article_modified_time":"2023-10-07T17:58:02+00:00","author":"alexrusin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"alexrusin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/#article","isPartOf":{"@id":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/"},"author":{"name":"alexrusin","@id":"https:\/\/blog.alexrusin.com\/#\/schema\/person\/a9005ca622862109b2c514050fbaaf9a"},"headline":"Environment Variables in JavaScript","datePublished":"2023-09-17T16:45:41+00:00","dateModified":"2023-10-07T17:58:02+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/"},"wordCount":450,"publisher":{"@id":"https:\/\/blog.alexrusin.com\/#\/schema\/person\/a9005ca622862109b2c514050fbaaf9a"},"keywords":["environment variables","javascript"],"articleSection":["Javascript Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/","url":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/","name":"Environment Variables in JavaScript | Alex Rusin Blog","isPartOf":{"@id":"https:\/\/blog.alexrusin.com\/#website"},"datePublished":"2023-09-17T16:45:41+00:00","dateModified":"2023-10-07T17:58:02+00:00","description":"Explore the power of environment variables in JavaScript to securely store data like API keys and database credentials outside of your code. Discover how to efficiently import and manage environment variables using dotenv files and a handy EnvManager class. Plus, learn a smart trick to automate the process using JavaScript Proxy.","breadcrumb":{"@id":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.alexrusin.com\/runtime-environment-variables-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.alexrusin.com\/"},{"@type":"ListItem","position":2,"name":"Environment Variables in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/blog.alexrusin.com\/#website","url":"https:\/\/blog.alexrusin.com\/","name":"Alex Rusin","description":"Web Development Blog","publisher":{"@id":"https:\/\/blog.alexrusin.com\/#\/schema\/person\/a9005ca622862109b2c514050fbaaf9a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.alexrusin.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/blog.alexrusin.com\/#\/schema\/person\/a9005ca622862109b2c514050fbaaf9a","name":"alexrusin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.alexrusin.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c36ef231f9e0b11371891eb84360f4bc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c36ef231f9e0b11371891eb84360f4bc?s=96&d=mm&r=g","caption":"alexrusin"},"logo":{"@id":"https:\/\/blog.alexrusin.com\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/posts\/30553"}],"collection":[{"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/comments?post=30553"}],"version-history":[{"count":18,"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/posts\/30553\/revisions"}],"predecessor-version":[{"id":30577,"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/posts\/30553\/revisions\/30577"}],"wp:attachment":[{"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/media?parent=30553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/categories?post=30553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.alexrusin.com\/wp-json\/wp\/v2\/tags?post=30553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}