Work has been busy. We've been building on a ton of awesome features for our users and many of them are touching each other. Needless to say the amount of integration testing I've been doing has been expansive and I've got some circles around my eyes.
Recently I had a brief reprieve of the juggling. Once a year my company gets together in person for a retreat. We're a dispersed / remote company so this is about the most exciting thing ever. I work every day all day with these wonderful and talented people who I've learned so much from. To finally sit back with them and toss down a few whiskeys is a real gift.
This year we decided to have a week long hackathon before the retreat. We occasionally have little hackathon's here and there but this was something a little more focused with a broader involvement. So broad that I even threw my hat in the ring. I decided to start the task of automating some of my more repetitive work.
Chrome recently came out with a headless version of their browser. Also, the Chrome DevTools folks wrote a great api called Puppeteer to control it. I've been using Puppeteer with a lot of success to automate and modularize a bunch of frontend testing. While doing so I ran into an issue. Most web apps have an authentication layer that requires some kind secret like a username and password. The last thing you want to do is hard code those secrets into your project and push them up to a repository on GitHub.
One way to keep those secrets in use locally while keeping them from being posted on the internet when you push up new commits is to place your secrets into environment variables and ignore those variables when pushing up to github by placing them in the .gitignore file. If you are using Node.js you can use the DotEnv package to read the variables into your code.
Here is how I implemented these tools in my project.
In the root of your project add a env.sample file and a .env file. The env.sample file is a template with fake values that inform other developers what variables they will need in their own builds of your project. This file will end up in your Github repository.
If your project is under version control with git the root should have a .gitignore file. Edit this file by adding .env to the last line. This will ensure that git will completely ignore this file when you make commits and push them up to your remote repository.
Next edit the .env file with the variables you listed in the env.sample file but use the real values.
With our .env and env.sample fields set up we need to install the DotEnv package which will be used to read the variables into your code.
npm install dotenv --save
Then require the package in the files where you intend to use the variables
Finally in order to read the variables we listed in our .env file we only need to use process.env
That's it. Now you are all set to use the variables in your .env file in your codebase. They will never be sent up to any remote repository and any developer that pulls down your code will have instructions on what variables they will need to create in their own .env file.
Here they are in an example script using Puppeteer.