.Env Files For Tech Noobs

When deploying your web app / project online, the last thing you’d want is to have sensitive information leaked such as some auth tokens or api keys etc etc
So this begs the question : how can i secure sensitive data my program needs ?
This blog will explore environment variables, what are they ? when do i need them ? how can i create them ? how do i use them ?

ENVIRONMENT VARIABLE 101

Now as well know we use variables all the time when we are writing any piece of software, variables are just boxes to store pieces of data inside but still wth is an environment variable ?

Environment variables are essentially variables required needed by your environment ( duh lmao ) aka your operating system

Think of them as "switches" or basically pieces of configuration your system needs to behave accordingly

An example of an environment variable is PATH on Windows which essentially informs the OS where the executables at

And yes you can easily create your own environment variables rn rn

TIME TO CREATE SOME ENVIRONMENT VARIABLES FELLAS

Ok so let's see how to set up our own environment variables (drinking game for how many times i typed that LMAO ) on Windows which is actually pretty simple so please lads pop up cmd with admin privileges and type along

setx MY_CAT "simsim"

So what's happening here ? Well the syntax is simple, we use setx to set environment variables followed by our variable name which is preferably in all uppercase then we specify the value ( yes i have a cat named simsim ;) )

Now to print out our newly created env var ( yes i'm sick of typing it out ) we simply say

echo %MY_CAT%

In the context of web development / programming

Now that we've established the basic idea behind env vars it's time to actually use them and see why would we need them in our projects

Often times your project will reach out to external APIs and web services, those service providers need those tokens / API tokens to verify who's consuming their API as well as implement some rate limiting or such, in addition to those you might have your database credentials / s3 credentials / etc, and trust me you don't want any of these to be leaked by accident

This is where environment variables come into play, we create a file named .env and we store those important credentials in it and then we can access them in our code regardless of your project tech stack, this stuff just works like that

SO JEFF LEAKED HIS DISCORD BOT TOKEN 😱

So in this imaginary ( yet very much possible ) scenario we'll have a look at our dear friend Jeff and how did he make a terrible mistake cause he didn't know about the magic of environment variables

So let’s say Jeff has just built the sickest discord bot built with cutting edge technology and powered by the finest AI models.....to tell the weather using node.js and he’s excited to show it off on his github

But few hours later……. the bot doesn’t return the current weather as it should, hmmm quite odd isn’t it? Jeff goes to the api provider website to check his dashboard and see how much of daily quota he used and……..IT’S GONE BUT HOW DID IT HAPPEN

SO HOW TO NOT BE LIKE JEFF

Trust me you don’t wanna be like Jeff, you’ve got to protect your api keys or auth tokens or any piece of authentication info that should only be used by YOU and ONLY YOU so how do we do that ?

In this example we’ll assume we’re building some node.js app because you can’t really hide your credentials on the front end, all it takes is checking the network tab and you can see the request headers and bam you’re screwed ( real )

Now let's create our .env file and see how do we store those tokens and stuff

I will use node.js as an example despite being a Laravel lover

API_KEY="SUPER SECRET API KEY"
CONSUMER_KEY="some other stuff here"
OTHER_VERY_SECRET_TOKEN="blah blah"

As you can see the syntax is pretty simple, BUT REMEMBER the variable name is very very preferred to be in all uppercase and don't leave any space before and after the = sign

ACCESSING THOSE VARIABLES IN OUR CODE

Now back to our sick discord bot project that'll be acquired by Elon Musk, so now that we've set up our environment variables it's time to actually use them in our project right ? Well in node.js that's pretty simple all you gotta do is install a package named dotenv because for some reason only God knows, process.env doesn't just work out of the box so let's do that now

npm i dotenv --dev

Now in our node.js program let's just slap this bad boy in

require('dotenv').config();
let api_key = process.env.API_KWY;
let api_key = process.env['API_KEY']; // same shit

and voila ✨ you're now a full stack web dev ( kidding )

EXTRA LAYER OF SECURITY FOR THE GIT NERDS

As we all know you're not a real FAANG material until you use a version control utility ( mostly Git ) and if you're worked with Git before you'd know that it's a piece of software to enable to push your project entirely to Github or Gitlab to allow collaborations with other interested devs

Now this begs the question if i'm sharing my project files with the world including but not limited to.....my env file am i not gonna end up like Jeff ? and to answer your question...yes pretty much

To prevent you from being Jeff'ed let's talk about something called ✨.gitignore✨ files and don't be intimidated by how vague that looks

So what is that, you might ask ? Well a .gitignore tells your version control to ignore the mentioned files inside it ( no shit )

Now create one and paste this in

.env

Yea fellas that's pretty much it, always store sensitive data in your .env file and don't forget to include it in your .gitignore file if you're using Git for version control

Thanks a lot for making it this far and i am excited to share more web dev / tech content with you on Dev.to since i migrated from Medium so expect more content coming so soon PLUS original content ofc focused entirely on Laravel and as always have a lovely $PART_OF_THE_DAY