Configure Pre-Production Environments

[00:00:00]
>> Brian Holt: Now, we're going to go to Vercel and we're going to start setting up everything so that we can do preview deployments as well as our production deployments. So, for your case, if you're following along with me, feel free to just reuse all the same services. I'm fine if you decide to like, not create another blob storage, not create another Upstash, a bunch of those things.

[00:00:23]
For example, Upstash, to get your second project, you do have to pay, right? I did that so I can show you, by all means use the same cache, because you're just learning here. I just want you to see like how you would do it, right? The nice thing about Neon is like, that's just included in the free tier, all the branching stuff is included in the free tier.

[00:00:42]
We'll kind of talk about it piece by piece. So we're going to be in Vercel.com. We go to FPM Wiki Masters. We have no production deployments because it's never successfully deployed. So let's go do a couple of things. We already have this FEM Wiki Masters blob prod. We actually probably want to choose this to be just, well, we'll figure out this in just a second.

[00:01:11]
Let's do first, we're going to settings, we're going to go to integrations. You might have already configured these already. If you haven't, I'm just going to show you how you would, you go to browse marketplace, you go to Neon, okay, you're going to have two options here. Do not do the native integration, do the external integrations, and actually I think the secret is, I think both these actually go to the same place.

[00:01:40]
You're going to click install, but you're going to link an existing account. This is an external integration and this is what they call a native integration. If you've been following along with me, you've made your own Neon account that you own, and you have your own relationship to Neon. You would do this top one if you wanted to like get billed for Neon through Vercel, which either one of those are fine, just, this is the way we've already done it.

[00:02:03]
Okay, you're going to select whatever your Vercel team is here, you're going to say connect account. And then you're going to go over to Neon, and you're going to choose which project that you want. We are going to do FEM Wiki Masters, and say continue. Oh yeah, I have two accounts here. Yeah, Wiki Masters here. NeonDB neonDB owner, unless you've modified these, which if you're following along with me, you haven't, you can just click continue, click connect.

[00:02:37]
And you are done. Okay, now if we go back to FEM Wiki Masters, two things should have happened. If you go to environment variables, you should have a bunch of Neon stuff in here now. I already did my Upstash, but we'll do that here again in just a second for you. But these variables will be automatically populated for you, and what's really nice about this, when we start doing like preview environments and stuff like that, it just all gets taken care of.

[00:03:06]
You don't have to do anything, Neon plus Vercel will take care of all that stuff for you. Eventually, like everything that we have in our .env file here, we need to have it end up in Vercel, right? That's, this is what this is. So what you could do is you could just go in here to whatever your .env file is or something like that, copy all of that and just paste it directly into here, and it would copy all of that as well.

[00:03:31]
If you didn't want to like have any of the integration set up or anything like that, that would work totally just fine. Okay, so we just did that's Neon. We did that. So let's talk about Neon Auth for just one second. Neon Auth doesn't work the same way as Neon because it's integrated with Stack Auth. So whenever you're doing like that user syncing, that actually comes from the main branch.

[00:04:04]
So even if you branch into like a secondary branch, your auth is still being populated off the main branch. Little bit confusing, it's just kind of the necessity of how Stack Auth works. I will say that we are about to fix that very soon it will work across branches, but for now, as of teaching, that doesn't work. But maybe by the time this is edited, we might have fixed that.

[00:04:29]
So, if you today wanted to make it work with Stack Auth, and you wanted all the syncing to work as well, the way you would do that, which we're not going to do is you'd create a second project that would be your auth dev. And then you would pull keys from that and you'd put that into your test environment essentially, right? Then you'd have to write a job that would basically sync from your primary to your secondary, right, and maybe anonymize in that process.

[00:05:00]
So if that sounds like a lot of work that you don't want to do, I didn't want to do it either, so I didn't. But in our particular case, I'm fine that we are just going to use our production auth for both our test environment and our preview environments. The one thing that we do need to do that's really important here is we need to go find our deployments.

[00:05:33]
So does this give us our, it does. No. We need what our production deployment is going to look like, and I don't think it actually will tell us until it actually successfully deploys. Oh no, it is. Okay. So you go to domains, we do need to grab this FEM Wiki Masters Vercel.app. So whatever your deployment URL is going to be, you can add your own domain here.

[00:05:56]
I'm not going to do that. I'm just going to use the Vercel one. It's important that we go over to Neon Auth here into the configuration, and we need to add that domain as being valid, because Neon Auth won't redirect to domains that it doesn't know about, so that people can't like steal your user's credentials, right? So you have to go whitelist, this is allowed.

[00:06:25]
In this particular case we're doing it with Wiki Masters.vercel.app. So we have Neon integrated, we have Neon Auth set up correctly. If we go back to Vercel now, I did this earlier in the course, but we'll just show you again, with Upstash, same thing, you go to Upstash. And actually I'm going to go to Upstash and show you on this side. We have Redis.

[00:06:58]
I'm going to create another database. Again, you have to pay for this, so by all means use your production one for now, but I'm going to say FEM Wiki Masters, like, test or something like that or dev. Yeah, we'll call it test. We've been doing in Ohio, and we'll say next, and we'll do pay as you go, that's totally fine, next. And create. Okay, and then here in our marketplace, what you would do is, external integrations here, you'd say install, we would do link existing Upstash account.

[00:07:46]
This is going to Brian Holt's Pro projects, connect account. Okay, we're going to say, this is going from the Vercel project FEM Wiki Masters and from the Redis, we're going to FEM Wiki Masters test, click save. And now, in theory, we should have both of these connected to our, the same environment variables here. So these ones we want to set for edit.

[00:08:43]
We don't want these ones only to be for production. Save. And this one as well. We're going to say edit for this one, and we want this one to be preview or production only. So the idea here is that when it goes out to production, it uses one database, when it goes out to your preview environments, it uses a different environment. And this might have just overwritten it.

[00:09:21]
I'm trying to think. It's what it looks like to me. Yeah, cosmic mud, no, that's one that we've been using, right? This one is now. Where's the environment variables here, prompt kit. Dismiss that for the moment. And then storage, create database, select existing. Can I get this from Upstash here? No, you gotta get it from the integrations tab.

[00:10:02]
Integrations. Configure. New integration, select FEM Wiki Masters, and we want FEM Wiki Masters test. Okay. So I guess what it wants us to do is it doesn't want us to have like a native integration for this. They want us to just copy and paste the keys ourselves, which is totally fine. So we're going to come in and do it that way then, so we're just going to grab these two.

[00:10:31]
I'm going to copy these. This is from my new environment Wiki Masters test. We're going to go to environment variables here in our FEM Wiki Masters project, and then I'm going to just say this is for preview and development and not for production, essentially. And then you can just paste these in here and they usually parse okay, and I click save.

[00:11:02]
And so now I have Upstash Redis REST URL Upstash Redis REST token. I guess there's a, we don't need this one, so you can ignore that. And so now everything that goes out to production will use these two, everything that goes out to dev will use these two. For Neon, these will set the ones for the production environment, you can see that there aren't any for preview and dev, and the reason being for that is that whenever you create a preview environment, there's a Neon branch that gets created, and then at the end of the preview environment, it gets cleaned up automatically, so it won't show up here, but it will be created just in time for whatever your preview environment is.

[00:11:58]
Okay, we have blob read-write token. This one we want to edit as well, manage blob connection. And this one we want to update project connection, we want this one to be just for production. I'm going to click connect. Okay. Is this going to be annoying about like setting it up for which environment? Let's see. Let's go back to where we were. Yeah, I think what I'm going to have to do is we're going to have to like remove the connection for this.

[00:13:01]
So, oh no, okay, this one actually might branch, commit using her. Okay connections. Oh, this is, that's why storage here. You want to go to just like the overall here and I'm going to go to storage, FEM Wiki Masters blob, this is what I'm going to try and come into, not this one, this one. And I'm going to say, I think I'm going to connect project.

[00:13:46]
I want to disconnect it and then reconnect it. Projects, there we go, and then I'm going to say disconnect here. Okay, then I'm going to connect to the project again because I had done this earlier, and I want FEM Wiki Masters and I just want it for production. Okay. Now, I'm going to go to storage again, I'm going to create another database, I'm going to create another blob.

[00:14:25]
And I'm going to say connect. And this is going to be FEM Wiki Masters test. I'm going to put this in Cleveland and I'm going to create. And projects here. We're going to connect the project and we're going to connect it to FEM Wiki Masters, but we're not going to do it for production. All right, now, let's go to check on our project here. FEM Wiki Masters, settings, environment variables, we should see that we have blob read-write for production, and we should also have it for all pre-production environments, which is, you know, preview and dev.

[00:15:06]
Okay, good so far. For whatever reason, they don't populate it with a blob base URL so you're going to have to go do that by hand. So let's go do that. So where's their base URL? It's I think it's in settings. Yeah, you need this one. This is which one am I on right now? I'm in prod, so this is going to be for production. So let's just have this in two tabs instead of going back and forth like a maniac.

[00:16:03]
Environment variables, we want this to be just for production. This is going to be blob base URL, save. Okay. And then same sort of thing here. We are going to go to storage test here. And we're going to grab from settings, we're going to grab this. And we are going to put that in here as well. And this is going to be blob base URL and this is going to be just for all pre-production environments and say save.

[00:16:43]
Okay, so we now have a blob base URL for production, and we have one for all pre-production environments. Nice. Resend, I think there is a native integration here as well, so you just say, browse marketplace, you say Resend, this one's way less interesting, it just creates a new API key for you. I don't know what else I would expect them to do, but that's what it is.

[00:17:18]
This one connect account. So, select. Is it mad that I've already done this once? It might be mad that I've already done it once. Integrations go to integration. Okay, so I've already done this once and it's like, no, you can only do this once per project, I guess. So, what are we going to do here? We're going to say settings, integrations, I'm going to revoke my access.

[00:18:09]
This will break my other one, but that's fine. Go to Vercel integration. Connect account, Brian Holt's projects. Next account. You also definitely don't have to do it this way, you can also just copy and paste an API key in here, it does exactly the same thing. I don't even think there's any more benefit than that. FEM Wiki Masters mail holt.courses API key.

[00:18:52]
And save environment variable. That's it. That's the whole thing. Okay. So now if we go back here into our environment variables, have a Resend key in here. Can I edit this to just be prod? That would be nice. Yeah, I want this to just be in production because I don't want to send email in test. Okay, so this is just production, and then what I'll do in here is I'll just say, Resend API key for everything but prod to be test API key, which just won't work, right?

[00:19:31]
Which is great, which is exactly what we want. Okay. And then the API or the AI key. Really the easiest way to do this, yeah, I don't, this is not what the AI thing up here is not what you want. It's really to just grab your key and just put it in there. So I'm just going to grab this, which is my AI key. And I'm going to put that, again, normally it was like, go create another key, one for production, one for your local dev, that's how you would normally want to accomplish this, but for now, I'm just going to let it go on all three, yeah, because we have it set so test environments won't use the AI key anyway.

[00:00:00]
So I'm going to have this one just go out to all. This is AI gateway key, AI gateway API key, AI gateway API key. Okay. I think that's all the keys that we need.