Working across scrims and projects with shared variables like API keys just got much easier – we are excited to announce a new feature, "Environment Variables," now available for everyone on Scrimba. This allows you to set variables that will be available across scrims, and hide secrets when you share scrims with others. It is as easy as setting the environment variable X and accessing it from process.env.X in your code.

An Introduction: The Role of Environment Variables

Environment variables are used in computing and programming to provide a shortcut to valuable data. Think of them as name-value pairs stored in your system that can be used for quick and flexible data sharing. They act similar to variables in your JavaScript or Python code but on an operating system-level, offering a dynamic way of influencing your code's behavior.

In programming, we frequently use data like API keys, file paths, or other configuration details that might change across browsers and machines (aka. environments). Here’s where environment variables come into the picture, and they do so with ample benefits! In your code you put in a reference to an environment variable, and on runtime the reference is replaced by the actual value from the running environment.

Adding Variables: Your Steps to Smoother Coding

Using environment variables is a step forward towards smoother coding, and adding them in Scrimba is plain sailing. You got 3 ways to access them.

Accessing the Environment Variable modal

(1) If you go to the Settings page there is a new action of "Update environment variables".

(2) In a scrim you can click on the '...' menu on the timeline and select "Edit environment"

(3) Use the keyboard shortcut ⌘ Command + ⇧ Shift + E / Win + ⇧ Shift + E

Managing variables

Add a new variable by filling in the Key Name and Value input fields and then pressing the "Add variable" button.

And voila! Your environment variable is set, and you can start using it in your code.

Remove it easily by clicking the Delete button.

Using Environment variables in your code on Scrimba

After you have setup a Environment variable you can easily use it in your code. Let's say we have added the two variables "FILE_PATH" and "SECRET_KEY", you can now access those keys in your code as process.env.FILE_PATH and process.env.SECRET_KEY

Security: Preventing Leaks of your variables

While using environment variables gives an effective way to store sensitive information, it also makes that information just a console.log command away from being exposed. This is why it's essential to keep your variables private. If you are making a recording do not log out the content of your secrets, or they will be part of the recording for anyone to see.

If you think you can have leaked a secret key at some point - it happens to all of us - you should change the secret or "roll" it so that it can no longer be used.

Happy Coding!