Environment Variables Exercise

[00:00:00]
>> Now, we're gonna move on to exercise 9. So let's close down this server, node dev 9, And close all these, open up 9 README. Now, the next two exercises are kinda go hand in hand. The reason we're doing exercise 9 is so that we can do exercise 10, but it's a valuable thing to understand and know with Remix.

[00:00:32]
And so it's good to have it as a separate thing. I'm gonna talk about environment variables. Now, your Remix app, because it has a server that's actually running, you can use process.env.NODE_ENV or process.env for whatever environment variables that works for Node. I think environment variables are different on different platforms and run times, but yeah, you can just use whatever the runtime supports for your server code.

[00:01:01]
But for client code, if you need environment variables that get into the client, that's what this exercise is all about. And I give you an example of use case with actually something I do in my own site and describe some of the problems that you'll run into so you can read through that.

[00:01:17]
I'll give you a convention that I have been using for getting environment variables into the client in a way that is both typesafe and also pretty straightforward. And then it is your job to implement that. For us, we're on the contrived side of things. What we wanna do is make it so only the admin email can update posts and even see that post page.

[00:01:43]
So we wanna protect some of our routes. And so we have an ADMIN_EMAIL environment variable, which you'll find in the .env here. That is kody@remix.run. And we need this access to both in the client and on the server, and this is where I say it's a little contrived.

[00:02:00]
You typically wouldn't want the admin email in the client, but yeah, it's actually not a big deal, cuz maybe we're gonna add a contact page, and it'll show your email anyway, so no big deal. But this is just how we're going to do this so that the client can know, is the current user the admin so that it can display the right things?

[00:02:20]
But more importantly, so the server also can determine, this is the action that's being performed, is the currently logged in user allowed to do that action? So you're gonna be spending a little bit of time in a new file called env.server. You'll also work in entry.server and root.tsx.

[00:02:39]
In the next exercise, we'll get into the session.server file to actually implement some of the protections and stuff. But right now, your objective is just to get these environments or this environment variable into the client and server. And then yeah, having TypeScript. Happy about how all of this works is the extra credit here.

[00:03:02]
Cool? All right, have fun with exercise 9.