Introduction to Course

Introduction

Why Environment Variables

Environment Variables in Practice

dotenv flow

Configuring Your Webpack Builds

Using environment variables with Node.js

Environment Variables from External Keystore

How dotenv Flow Interacts with CI / CD

How to Share Environment Variables with Your Team

CI / CD for dotenv

Environment Variables in React Bundles

Environment Variables in SSR

dotenv in React

Why We Can’t Use dotenv for Babel

React Native dotenv / Babel Setup

dotenv in React Native

Conclusion and extra resources

In 12 videos we cover environment variables in back end node, front end react, and mobile react native. You'll learn when environment variables are not even the best solution for configuration and how to test them.

Every time I used to build a new project it seemed there is a different strategy you have to come up with to manage configurations.

When I heard of dotenv and how common it was I figured that a standard would be simple to setup and consistent, but when I started using it felt like I had to re-invent the wheel every time.

After building hundreds of apps from scratch, consulting with people all over the industry, and answering countless questions to users of my open source libraries, I discovered that there's only a few patterns you need to know to be able to configure any app from scratch securely in a team.

In this course I'll show you the patterns for configuring any Javascript project to be secure and robust in team settings using environment variables.

In 12 videos we cover environment variables in back end node, front end react, and mobile react native. You'll learn when environment variables are not even the best solution for configuration and how to test them.

It's taught by Kemal Ahmed who is the maintainer of react-native-dotenv.

Manage Configurations Across Multiple Environments with dotenv

Learn the strategies senior engineers use to configure their projects to run securely, anywhere with environment variables.

Scaling Web App Configuration with Environment Variables

How to use dotenv to build a 12-factor app

How to integrate dotenv into React Native

Differences between dotenv on the front end and back end

When looking into a new framework, what strategy do you use?

---
title: Environment Variables in SSR
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/SeNlIA8rtij296nWDcyXUoYtcd75YaNkG31VBeDTHXU.m3u8
code: https://gitlab.com/fullstackio/books/newline-course-apps/environment-variables-for-web-developers-app/-/tree/main/code/module_04/lesson_04.02
---

## Environment Variables in SSR

When looking into a new framework, what strategy do you use?

1.  Does the documentation mention environment variables? If so, there's probably a mechanism built-in that handles EV loading. Also, look to see if it uses prefixed environment variables.
2.  How does compiling work? Does it use Webpack, Babel, or no compiling?
3.  Can you still set Environment Variable values after compilation?

Kemal Ahmed

The last demo was with a single page application or a spa using React.

But what do you do when your app framework uses a completely custom approach to

Today I'll show you how to tackle that using a library called Gatsby as an

For proper search engine optimization or SEO, you'll often see user technique

Gatsby is one of the most common libraries for SSR for React behind Next.

But I don't want you to focus on the technology setup since the technology that

we use is inevitably going to be outdated.

I want you to be left with the skills necessary to determine a process for

So when deciding between demoing Next or Gatsby, although Next is the more

Gatsby was unique because it does not use React script, so we cannot rely on

the typical methods of environment variable loading.

And for Next, we could just use the methods learned in the previous video

because it's built more or less the same way as React.

When you're figuring out how to implement .env with a new library,

first search for environment variables in the documentation.

You can look on GitHub, but let's look on Google.

And there is something in the documentation about that.

It seems that they have a config and the config looks a lot like a Webpack

Next, figure out if you want to have multiple flows or if you're okay with just

If you don't need flow at this point, you can safely just follow whatever the

documentation says or treat it as any other Webpack config setup.

But in this case, we're going to be experimenting locally, so it will be handy

You probably won't need multiple flows, but for the sake of demoing the process

Since there isn't a lot of information, we have to do some investigation to see

if the .env library is built into the tool chain.

So let's go take a look at the package.json.

So .env is already built into the tool chain.

So since it is present, that means that the documentation is probably a little

We'll need to actually find out if the value of .env is being overwritten.

Is that something that's very common to happen when they have that in the

So let's find out by searching for node_env.

And usually, we'll find places in the code where that is being overwritten.

I'm trying to basically show the Gatsby active.env, but it's actually not

So I'm going to show a different way to do this.

So the best thing to do is actually to search into issues and look for anybody

trying to set the value of node_env to development.

And what you find is that there actually is a variable Gatsby active.env that

And you can tell that by looking that up, Gatsby active.env.

And right there in the webpack config, the config_env that they're using is

actually Gatsby active.env before the node.

So there will often be cases where this value is overwritten.

And so for that reason, it's just safer to set the value of Gatsby active.env

We can now build the starter application.

So I'm just going to go with the starter default and I've built it in my other

So since .env is built into the tool chain, we don't really have to do much

configuration, contrary to the documentation.

All we have to do is make sure that our scripts are set so that way we are

reading from the correct .env file and that we have our .env files set up

So since we know that .env is already part of the tool chain, there's no point

trying to use .env flow library or any other custom .env

because we're just going to be clashing with the main .env library.

So the better option is to just try and make it work with what you have.

And so in this case, what I recommend is that just so you want to have a

staging, well, we'll first create the .env file.

And then just for show, we'll do a .env development.

So just a reminder, because we're not using flow, we can't use any merging

techniques like local or even merging a base .env default set with one of the

So we actually have to put all the config values in whichever environment that

So now that we have our three .env files, let's give a reason to use it.

So in our index.js, let's just add some things so that way when the page is

welcomed, we'll say welcome to instead of Gatsby, we'll say process .env

So we have to put Gatsby_ just because it will only render .env variables that

This should not work, but let's just build it.

Now that it has built, let's serve it and we'll see what that looks like.

As we can see, the welcome to shows a blank because Gatsby_name is not there,

And so now what we need to do is let's make sure that that's set in the

And then we'll play around with the various environment float names and we'll