I have a vanilla js project. In app.js file I am calling a api that retrieves the desired values. I have initially called the api through postman, included all the headers in postman only and retrieved the code using javascript fetch. It works good too but it shows my token and session id in it.

var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Authorization", "Token <mytoken>");
    myHeaders.append("Cookie", "sessionid= <mysessionid>");
    myHeaders.append("User-Agent", "Mozilla/5.0");
   

How can i hide these values in .env file.

Thank you

I have a vanilla js project. In app.js file I am calling a api that retrieves the desired values. I have initially called the api through postman, included all the headers in postman only and retrieved the code using javascript fetch. It works good too but it shows my token and session id in it.

var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Authorization", "Token <mytoken>");
    myHeaders.append("Cookie", "sessionid= <mysessionid>");
    myHeaders.append("User-Agent", "Mozilla/5.0");
   

How can i hide these values in .env file.

Thank you

• javascript

3 Answers 3

There is a good way to solve this without installing packages.

I wrote an answer here but I might as well share here too.

I was able to create a working solution using this article. You should modify the steps below with your own variables, and you can also check out the article to see the base example and also learn more.

Note: This solution is ideal for small personal projects where the information is not exactly sensitive but you just don't want them displayed so visibly in your code. Do not use for larger projects that require a reasonable level of security measures.

If your project is already deployed to Netlify, or a similar platform where you can add build/deploy mands:

1. Go to the build settings
2. If the script file you want to use the variables for is in a folder, set the build mand to this: cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js
3. If the script is in your root folder, set the mand to this echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js
4. In your index.html file where you import the script, set your script tag to include this attribute type="module" i.e <script src="./index.js" type="module"></script>
5. In your script file, import the variables by adding this line to the file: import {USERNAME, PASSWORD} from "./config.js"
6. Trigger a redeploy manually on Netlify, or it will be deployed automatically if you already set automatic deploys for the repo.
7. That's all!

This solved mine and I hope it helps anyone else✨.

First of all you should install the dotenv npm package

Do it by writing this in terminal:

npm install dotenv

But, since vanilla JavaScript doesn't support require, you can install the requirejs npm package

Do it by writing this in terminal:

npm install requirejs

Then you can write the following code to use require in vanilla JavaScript:

var requirejs = require('requirejs');

requirejs.config({
    //Pass the top-level main.js/index.js require
    //function to requirejs so that node modules
    //are loaded relative to the top-level JS file.
    nodeRequire: require
});

requirejs(['foo', 'bar'],
function   (foo,   bar) {
    //foo and bar are loaded according to requirejs
    //config, but if not found, then node's require
    //is used to load the module.
});

You can read the documentation of requirejs at https://requirejs/

Then you can use environment variables in vanilla JavaScript.

Read more about this at https://www.freecodecamp/news/how-to-use-environment-variables-in-vanillajs/

You use environment variables in the back-end of an application. Now, you're probably like "but I can create a .env file in a React app".

The truth is, you're quite right – but React has been bootstrapped in such a way that Node.js is included in it. This means that you need to use the Node package manager to perform certain operations.

You can also create a .env file when you're using VanillaJS, but you wouldn't be able to access the process.env global variable that Node provides at runtime. Node treats the .env file as an object, so it has the ability to do this: process.env.env_variable.

const env = {
    env_variable: "bgrtyaqQtyfadV0F08BHGvfsgskl",
    topic_id: "F08BHGvfsgsklgrtyaqQtyfadV0F08"
}

console.log(process.env.env_variable)

// prints bgrtyaqQtyfadV0F08BHGvfsgskl to the console