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

module.exports = function(api){
  api.cache(false)
  return {
    plugins: [
      ['module:react-native-dotenv']
    ]
  }
};

---
title: React Native dotenv / Babel Setup
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/HrKWFxydOBOakj2ovlvhcIiqk19oU00o6EW01tBv02bKLI.m3u8
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/environment-variables-for-web-developers-app/-/tree/main/code/module_05/lesson_05.02
---

Kemal Ahmed

This is our last lesson together and it really packs a punch.

This time I'm filming during the day, so sorry about the light mode.

This demo will be setting up React Native dot end without using Expo.

We'll start by creating a brand new project from scratch.

Make sure that these two are capitalized and let's build it.

Now that that's built, you'll notice this has created a TypeScript project.

We're going to make an Android build for this project.

In order to do that, we have to first install the right versions of Android,

I've included a link to the React Native documentation that goes through how to

If you're following along using Expo, most of the steps are the same.

If you haven't already set up your computer with React Native, pause this video

Now that we've set that up, let's build the Android app.

To do that, all you have to do is first move into the directory of your project

and then run npm run Android and it will run the script that has been defined

I see a lot will come up and just wait for both of them to continue loading

If an error comes up like this, make sure that you've set up your Android

Pressing the A button, ran the Android emulator, opened this QEMU and it ran

Now that it's working, let's install React Native dot end.

npm install, it has to be installed as a dev dependency, so dash D, React

Now if you try to install it as a regular dependency, it's going to start

add things like path and FS and things that are not really supposed to be added

But since it's a Babel library, we do need to add it as a plugin here.

So plugins, module, add, actually don't forget there's two sets of brackets for

So before we add that, we'll do that, react native dot env

And then in our app dot TSX, I'm going to create another text object.

So it's not regular HTML, and we'll do process dot env dot test message.

And then we'll compile that and see what happens.

So the first thing we'll see is that there is an error, it's not showing up.

The reason why is that Babel does not look for changes in your dot end file.

What I mean is Babel actually caches everything that you write, JavaScript,

And when you make changes in it, then when you recompile, it makes sure to

So in order to actually tell Babel to check for changes, you have to invalidate

First thing we have to do is let's close our current server instances that are

And let's find our package JSON and where we have our start and Android, well,

And then I'll actually just add a short word to say reset.

And at the end, I'll add a flag reset cache.

And it should bring up the server and we can rerun the app.

You'll notice it says cannot connect to Metro.

That's because we ran start, not Android.

So all we have to do is press A and it runs on Android and that should reload

I did add a style attribute right there just to make it more visible.

And I did make a few mistakes, but I'll show you how to do with that.

So over here, if you see any mistake, just make sure to auto fix all your

And sometimes you'll get some strange ones.

All you have to do control shift P like open the command panel and restart your

Oftentimes that'll fix a lot of pesky issues that are stuck in cache.

If for whatever reason that reset does not work for you or you're not able to

then you can also go into your Babel config and change it so that way you