Env variables for browser JavaScript
Tags: webdev, javascript, beginners
Published: 2022-11-16 06:51:36

As a developer fresh out of training, I realised how there were many other things I do not know how to do. One of it was how to create `env` variables for a static webpage. 

Not everyone needs a Node environment or some other fancy stuff while creating their webpage. So in this small post, I'll share a quick solution if you intend to hide variables as you build your webpage. Do take note that this is meant for <u>development phase only</u>. 

## What are `env` variables

`env` variables are short for environment variables. Lifting up from Wikipedia, an environment variable is "a dynamic-named value that can affect the way running processes will behave on a computer". Dynamic-named simply means that the name resolution will be done at runtime. 

Leaving those complicated definition aside, `env` variables are widely used to store secrets and other variables you would like to keep away from prying eyes. An example of an `env` would look something like this: 

```
secret_key=123456
```

It's nothing new really. You just assign the value into the variable like always. The only difference is that this variable would be stored into a `.env` file. This `.env` file would also be listed in the `.gitignore` file so as not to be pushed into your preferred Version Control System hosting service (such as GitHub).

## So what's the problem?

The problem lies in creating this `env` variable for a static webpage. Which is, HTML5 with CSS and browser JavaScript. If you're using Python or Node JS, this could be resolved by simply installing the necessary packages.

For browser JavaScript however, I have yet to see a simple solution for this. Hence why I am proposing this solution. 

## The solution

The solution is simple. **Create a separate JS file with functions storing the values**. Let's say that you want to store a secret phrase. This is how you would have to do it: 
<figcaption>index.html</figcaption>
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <h1>
      Here's what I fetched:
    </h1>
    <p id="insert-phrase"></p>
    <script src="env.js"></script>
    <script src="script.js"></script>
  </body>
</html>
```


<figcaption>script.js</figcaption>
```JavaScript
let getPhrase = secretPhrase();

function showPhrase() {
  document.querySelector("#insert-phrase").innerText = getPhrase;
}

showPhrase();
```

<figcaption>env.js</figcaption>
```JavaScript
function secretPhrase() {
  return "this is my phrase.";
}
```
<figcaption>.gitignore</figcaption>
```
env.js
```

[![Edit JavaScript Enc - 16 Nov 2022](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/javascript-enc-16-nov-2022-tyv7si?fontsize=14&hidenavigation=1&theme=dark)

`script.js` is the main JS file. `env.js` is where you store your `env` variable. Here are some important things to take note.

1. In your HTML file, your <u><b>`env` file should come first</b></u> before your other JS files. This is because the other files would be dependent on the `env` file. 
2. You would need to <u><b>declare a Global variable within the JS file</b></u>, fetching the `env` function. You cannot directly input the `env` function, into another function that's residing in another JS file. 
3. <u><b>Write your `env.js` into the `.gitignore`</b></u> or your secrets would be pushed out to your repository. 

## Last words

One of my worry in creating this solution is what happens when you deploy your code out. Usually, sites would have settings where you can place your `env` variables. Do take note that you may need to change parts of your code when you do so.

I hope that this would help you in some way. It's not an elegant solution but it does what it's supposed to do. If you do have a simple alternative solution or feedback on why this might not be a good solution, don't hesitate to share!

Thanks for reading ☺.