PS: If you prefer watching a scrim over reading documentation, click here.

Environment variables are simple text values that can be set at the system level and accessed by various applications running on that system. Often they’re used as a way to use hide sensitive information like passwords or API keys from prying eyes. This way, instead of having this in my code:

const openai = new OpenAI({
    apiKey: "abcdef12345678",
})

I can write this instead:

const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
})

This code in the second block can be committed to GitHub or shared with others in a Scrim without concern about someone (worst case) using it to pretend they’re you or (best case) accidentally run up your API usage and potentially costing you money or altering your data.

⚠️ Important note: even though your code obscures the actual secret values, if you use environment variables for frontend code, the user could easily inspect the code with their browser developer tools and get access to your secrets. Don’t use environment variables on frontend code to hide values.

However, doing so in Scrimba is an exception to this rule because your environment variables are stored as a user setting, and HTTP requests made while recording a scrim aren’t saved in the recording. So no one can see your env var values in the dev tools on a Scrimba recording.

How to add environment variables in Scrimba

You can manage your Scrimba environment variables via your user settings, meaning they’re global for your whole Scrimba account. Here’s how to do it.

  1. Click on your name in the top left corner

    Screenshot 2024-05-22 at 15.31.13.png

  2. Click on the “Settings” tab

  3. Click on “EDIT YOUR ENVIRONMENT”

    Screenshot 2024-05-22 at 15.31.21.png

  4. Click “NEW KEY”, and then set the Name and Value of your env variable, and then click “SAVE”

    Screenshot 2024-05-22 at 15.31.53.png

  5. You’ve now successfully saved an environment variable. You can use them in all your scrims by following the instructions further down.

PS: if you’re still using the legacy version of Scrimba, the instructions are a bit different. Click on the link below to get to them:

How to set env variables in Scrimba v1

Using environment variable values in Scrimba

Once you have saved the environment variable that, you can access your env variables via any scrim by pointing to them like this:

process.env.OPENAI_API_KEY;