Deployment

[00:00:00]
>> Well, so pretty much the last section here, the last technical one, at least, where we're going to attempt. No, we, we are going to deploy this app to Marcel. So I already have it deployed but I'll run through a run through exactly what you have to do to actually get it to plugs.

[00:00:20]
There's a couple. Gotchas around the you know, the Oauth with GitHub and the database with Atlas. If you haven't done it before, if you already set up Atlas, you actually should be good to go. And then just, it's just an environment variables, this just kind of all over the place.

[00:00:37]
But other than that, it's pretty straightforward. So let's do that. So the first thing you want to do is, make sure you have the code that you want obviously. And one thing got, as I'm talking I wonder if, if I ran deploy here from Versailles will deploy my dev branch or will deploy a master branch.

[00:00:59]
I don't know how that works. We're gonna find out. So what we want to do is download the versal CLR if you don't have it already, and you can either do yarn global adversarial or NPM dash g for so you can even use NPM if you don't want to install it, whatever your flavor is just do that and they need to login so easily versatile login.

[00:01:22]
So the CLR is authenticated with your account. That obviously means you need to make an account, oversell. If you haven't made one, it's very simple. You can go on there, sign in with GitHub. It's pretty simple. I can show you mine. I really like a team of versatile team and the whole team over there.

[00:01:41]
And Guillermo is a very talented fellow too. Yeah, so this is what you will see on your dashboard. If you signed up and made an account. What we're going to do is if you notice here on the dashboard, there's an import project button, and you can import from a git repository.

[00:01:59]
We're not gonna do that. Why are we not gonna do that? Because it's so easy and it's so nice. I'm gonna show you the other way to do it, is this, I don't need to show you this way this way is really easy. You just click import and you click your project and you're done, you don't do anything, so you don't need me to show you that.

[00:02:14]
I'm gonna show you that, also a very easy way as well, just not as easy as this, so that's what I'm gonna do. Once you have your account. We don't need to make an app or anything like that rounded off from the COI so you can just type in for sale like that.

[00:02:30]
And then you see mine is already deploying because I already have a This is already deployed. So it's already doing it. So actually what I'm doing to cancel this, cancel that. And then what I'm going to do is I'm going to delete my, my verse sales stuff here.

[00:02:47]
I'm just gonna copy it so I can go back to it actually, just copy it first. And then I'm gonna delete this like that. And then I'm gonna run vercel again after I logged in, which I already am and you can see right now it's saying, set up and deploy this project.

[00:03:04]
Yes or no, I'm gonna hit yes for the default, which is in there. What scope do you want to deploy to? I wanna deploy to my personal account. Link to an existing project? I'm just gonna say no. I'm just gonna deploy another one. Gonna make another one for scratch list.

[00:03:16]
Let's get this thing going. So I'm gonna say no. What's your project's name? I'm gonna call this known curriculum, or known app, whatever. I forgot what I called the other one, so I was trying to think of that. But I think that one's good. Which directories are co located in?

[00:03:35]
It's located in the root. We're good here so we can hit enter. [COUGH] Setting up the project auto detected that were Next.js, makes sense. They did make Next.js. I will hope they would be able to figure that out, do I wanna override any of these settings right here?

[00:03:48]
The build command, the output directory. Or the development command. No, that's already there and our package dot JSON, if we go look at it, and you can see what it is. So I think we're good here, so now it's gonna try to deploy, so let's go and do this.

[00:04:01]
You can see right here it says it linked my app. So we're good there. And then I can click this link so you can double click If you hold down command on a URL like that and click it and it will go to it in a terminal, if you didn't know that, depending on what terminal you're using, I'm just using a regular terminal and OSX or I'm sorry, Mac or IOS.

[00:04:25]
Let me get that right.I want Johnny Ive coming up to me. Wait, he doesn't work there anymore. He's got his own design firm. Now. That Airbnb just hired. I didn't think he designed software or how does that work? I don't know. curious to see how that works. Anyway, so we're watching this thing attempt to build I would imagine this isn't going to build because I don't have any environment variable setup, but that's okay.

[00:04:52]
We just did this first build to actually create the app on our cell. So it's there. Now that we actually have an app that's there, we can go configure their environment variables and, and things like that. Okay, so here we go. We get a nice little preview. Let's click on it, look at that, there's our beautiful design, so good.

[00:05:11]
But you see the URL is, what is that? I don't know what that is, ao what we're gonna do now is we're going to deploy this to production, which it looks like it already did the first time. So I'm gonna click on that and go to the production URL.

[00:05:24]
So it already copied it to my clipboard. So let's do look at that, that that developer experience is amazing. They had already copied it to my clipboard before I knew I even needed it, okay. [LAUGH] So here's the production version, the version we saw before it was like a preview version.

[00:05:42]
So not to be confused with the preview content that we talked about. But versaille also has preview apps or preview deployments. Which, if you just run Versa from your app, it'll deploy into preview unless it's the first time like we just did it did all of them. And or if you connect to GitHub every time you do a PR and you and you add a vertical integration, it will Build your site on a preview branch.

[00:06:08]
Then it'll take screenshots of every page that changed since master and it'll post them in your PR, like here's the visual changes of the pages, which is really cool. And then anyone who's reviewing that PR can click on the link to look at our preview of that page.

[00:06:24]
Which is also very cool. So that's a different preview than the previews that we walked through but also a preview. Okay, so all this is good, if I click sign up, I'll et this is just gonna just, yeah, exactly. And that's because we don't have any environment variables or any of that stuff set up, so we can do that now.

[00:06:42]
So let's do that. So I'll go to, wait, how am I going to do this without you all seeing it though? Alright, how to delete that GitHub app anyway, it's not a big deal. So here's what we'll do, so what we'll do is we go to our app, actually, now we're at the point where we're going to add an environment rebels.

[00:07:03]
We can go to the one that already have since it's already here and you can kind of see it. So Basically, you click on the app, I'm gonna to some that I already have. And you click on Settings, okay? You click on Environment Variables, I would say this Environment Variable form is actually pretty legit.

[00:07:22]
But basically, what you can do here is you gotta add a couple things. And I listed them Here for better context, but basically what we need to do is take the stuff that we have locally added here, but only specific environments. Let me go back to where I was here, so we need a next off URL and this is going to be only for a production environment and versatile because you get to choose what environment you want to add an environment variable to production is When you deploy to prod previews, when you just deploy regularly.

[00:07:55]
And development is you can actually pull down vessels environment that they have on vessels for your project and run it locally on your computer. Which is pretty legit, so now everyone in your team doesn't need to add a .env file. You can just configure them here and you can pull down Vercel's environment on your local machine, run there.

[00:08:15]
A lot of hosting providers do that, I think that looks like something like this too, which is pretty legit, so I'm glad to see that people are doing that. So then you need to add, like I said, the next URL, this is for the next author. And it's really just going to be the URL of your production app that Purcell gave you.

[00:08:32]
So most likely be the name of your app dot versal dot app. Basically, they need the next public next URL, which is the exact same thing as this, but we got to put that public prefix on it. Because we're going to be using it inside of the client, that's it.

[00:08:49]
So he got put the next public on it and that again is only for production. And then we need to do the same thing, literally create the same two variables we did before except for these go to preview and development. Instead of hard coding it to the production one, we're gonna set it equal to whatever the versal URL system environment variable is.

[00:09:11]
So whatever that is, we're gonna point it to that. And the reason we do that is because your preview URL can be different every single time. It's a dynamic URL. We don't know what it is, so we have to say, well, the author URLs, whatever the current URL is that versal assigned to us when it's in preview mode or development mode.

[00:09:29]
I don't know, Right? So that's what that is database URL, I'm just using the same database URL across all environments. But if you're going to do this right, you will probably have a different database for production a different database for a preview. It really depends on your stack.

[00:09:44]
I kept this simple. I just added a database URL for all GitHub secret GitHub ID. This is where I said, you have to go to GitHub, make a entirely new GitHub OAuth client. And you have to add, you have to update your callback URL and actually show you what that looks like.

[00:10:04]
Because it's no longer going to be It's no longer going to be local host one, two, three, four. You can't do that anymore, so you have to do this. Developer settings, OAuth Apps There we go. So you can see the callback URL is now gonna be whatever your production URL that URL gave you, /app/auth/callback/github.

[00:10:34]
You have to put that now you have to put that full thing because now GitHub isn't gonna be lenient on you because you're not localhost anymore. Always lean on us cuz we were localhosts. And it was like, yeah, localhost, we don't care, as long as the localhosts are good.

[00:10:49]
This ain't localhost anymore, so you've gotta put the full path here. And this is the path that next auth URL tells us to put. If you go look at their docs, they specifically say it's gonna be /auth/callback/ whatever provider. Prefixed by whatever app you're on. So it's very specific, so you gotta make it and like I said, you gonna make one of these for every single post that you are running your app on the GitHub.

[00:11:15]
Other providers like Google know how to do that. They had a list of these things. And as long as any one of them works, we're good. Not GitHub, maybe they'll get it together, I don't know, so you've got those. JWT_SECRET, literally put whatever you want, I've got cookie_monster here.

[00:11:30]
And then NEXTAUTH_URL, which is basically the same thing as, do I have this in there twice? No, so this one's for production, that has a production, and this one just points at the VERCEL_URL. So looks like we're good there. And then now you should be good to go.

[00:11:49]
So if I go and actually look at this thing I don't know what this is gonna look like I've messed the database up so much since then. Wow. Thank you Okay, there it is, so yeah, so it looks like we're still good. I'm using the same data that I had on the local database.

[00:12:11]
So looks like it's all good they're, staying, or I don't know, maybe it's not good. Looks like it's freaking out, let's refresh that thing, there it is, yeah, that was the I think that was the cold start from the lambdas. So, the first time a lambda starts it, there's a lot of overhead for an initial start of a lambda.

[00:12:34]
So believe it or not one strategy is to have like a service, pinging your lambdas on an interval to keep them warm. Yeah, that's a thing. There's actually services you can pay for that will do that for you. Anyway, so yeah, looks like here's that same state that I had locally, cuz I was using the same database.

[00:12:53]
So yeah, looks like everything works here pretty good. And I think that's gonna be able deployment. I mean, that's pretty much it, the only thing I talked about before is if you do, you wanna deploy the prod after the initial Push, you have to do dash dash prod to go to prod with for sale.

[00:13:10]
But honestly, you should just be doing the GitHub integration anyway, the only reason I recommend doing the wsl one is for instance, you want a complete nice ci flow with like GitHub actions or Travis CI or circle ci or whatever flavor of ci that you use. And you have, all your deploy Stuff there or you have some, you know, team at your company that handles deploys and it's all through slack or whatever, then yeah, you'll probably need to see a live but this is you and you got that control.

[00:13:36]
I would just do the GitHub integration it's way cleaner, way nicer.