Using Environment Variables

Environment variables are global variables that enable us to extract data from the learner and utilize it in the code. For instance, we might want the learner to connect to Firebase using their credentials, which can be extracted as environment variables and used in our application.

Creating Environment Variables

In the Docker Container section of the course editor, click the globe icon to add a new environment variable.

The Environment Variables fields will open up where you can specify the Key, Value, and Info.

Let's discuss each field in detail:

1. Key: Represents the name of the environment variable displayed and used throughout the project. This is the name used to access the environment variable inside the code or terminal. Accessing environment variables has a different syntax for every language.

2. Value: The actual value of the environment variable exposed in the container. We can leave it empty if we strictly want the user to specify it. For the region key we created above, its default value is us-east-1.

3. Info: Provides an explanation of the environment variable, instructs learners on what to add in the Value field, etc.

4. Required checkbox: We can check this checkbox if we want the environment variable to be required by default when the project is launched.

5. Save icon: Click to save the environment variable with the added information.

6. Delete icon: Click to delete the environment variable.

Enabling Environment Variables

To enable environment variables in a task, use the Env Variable Button widget available in the task description.

Once we add the widget to the task description, we will get a view of all the environment variables that were created earlier. We can select the environment variables to show when the learners click the "Set Environment Variables" button.

Note: The environment variables marked as Required will be disabled by default since these are the variables that a learner will need to set when the project is launched. Once they set these, then they will be able to access the project's workspace.

If a variable marked as Required has a default value, the learner will not be prompted to set it value. Only the required variables with no default value will be set by the learners.

We have selected the REACT_APP_KEY variable to show when a learner clicks the "Set Environment Variables" button. The learner can then set a value for this variable from within the task description.

Setting and using Environment Variables

We can set and use the environment variables in both preview/author and learner modes. In the preview mode, we can test the usage of the variables and the project in general. In the learner mode, we can test the environment variables as a learner.

Preview mode

Let’s look at the steps of configuring and utilizing environment variables in the workspace, from setting values in preview mode to seamlessly accessing and displaying them in a sample code example:

1. Once everything is set up, click the "Preview" button to go to the Workspace and set the variables in the preview mode for testing purposes.

2. Locate the "Set Environment Variables" button in the task description section.

3. Click the button to open a window displaying selected environment variables for the task.

4. In the opened window, assign a value to the desired environment variable.

5. Click the "Save" button to save the assigned value for use throughout the project. Once this is done, we can access the value of this environment variable in our code.

6. Use the assigned environment variable within the code. As shown in the screenshot below, we have a simple Python code to print the value of the REACT_APP_KEY environment variable in the terminal. When we run the code, the value of the variable is printed in the console.

Learner mode

Let's look at the steps for configuring and utilizing environment variables in the workspace, from setting values in learner mode to accessing and displaying them in a sample code example:

1. (Optional) Any variable marked as Required and lacking a default value will be shown before the workspace is launched.

2. The learner must set the value of this variable and save it to launch the workspace.

3. Once launched, learners can navigate between tasks. The task requiring the learners to set environment variable(s) should include the "Set Environment Variables" button in the task description section. Clicking the button will open a window displaying the environment variables that need to be set.

4. In the opened window, assign a value to the desired environment variable. Clicking the "Save" button will store the assigned value for use throughout the project.

5. Learners can use the environment variables within their code. As demonstrated in the screenshot below, we have a simple Python code to print the values of the REACT_APP_KEY, region, and AWS_API_KEY environment variables in the terminal. When the code is executed, the variable values are printed in the console.

6. Learners can also view all the environment variables by clicking the three dots in the top right corner of the workspace and then selecting the "Environment Variables" button.

7. Clicking this button will display all the environment variables for the project. The learner can update the value of any environment variable from here as well.

Common use-cases

Environment variables defined for a project can be utilized seamlessly in code, terminal sessions, and notebook files. When used in code, their accessibility depends on the programming language that we are using. In the terminal, values of environment variables can be retrieved using specific commands. For instance, to access the value of the REACT_APP_KEY variable, the following command can be used:

Lastly, environment variables can also be used in notebook files. The following code snippet provides an example, demonstrating how to retrieve the value of the REACT_APP_KEY variable within a notebook file cell:

Some of the most common use cases for using environment variables in standalone projects can include the following:

1. Storing configuration settings such as API keys, database URLs, or other sensitive information or securing sensitive information like passwords or authentication credentials for third-party services.

2. Configuring different environments—development, testing, production—with separate sets of variables.

3. Storing database connection strings to facilitate easy changes without modifying code.

4. Configuring CI/CD pipelines with environment-specific variables for automated testing and deployment.

Things to keep in mind

Please remember the following when working with environment variables:

1. When we modify a variable’s value using the button in the task description or from the settings panel, the change takes effect in the subsequent session, not the one currently running. For instance, if we have an open terminal displaying the current variable value and we make a change, rechecking the value in the same terminal will reflect the previously set value. To see the updated value, we’ll need to close the terminal, reopen it, and then print the environment variable to obtain the latest value.

2. If an environment variable is labeled as Required, we can’t set its value in author mode. We can still use it in our code or terminal, just like other variables, but we won’t be able to change its value. The value can only be set or changed in learner mode. Before the workspace starts, the learner is asked to provide a value for any variable marked as required.