Updating a Vercel App

[00:00:00]
>> Scott Moss: Now if we wanted to make changes to this and stuff like that, so let's say I go into my app, I wanna make a change. I don't know, I don't wanna change too much. But let's say I go into the home page and I want to put a period here for some reason.

[00:00:19]
Okay, so now I commit this change. Well, first of all, lemme get off main so I can actually show this. So I'll check out a new branch, a feature branch, and I'll call this feature copy. We're updating the copy. I'll add that change back, cool. Then I'll push this up.

[00:00:43]
Now we have this. I'll open a PR to Main and then we get this Vercel. Automatically does some things, so it starts adding some checks. So a couple checks that it tries to do is, typically when you deploy something, there's usually like, you have staging, you have production, Vercel doesn't support a lot of that.

[00:01:09]
They actually just added a feature where you can add custom environments now but what they do instead is they have previews. You can change how the behavior works. But by default, when I make a new PR a pull requests into my main branch or whatever branch you designate as your main branch, Vercel is going to deploy a ephemeral preview version of that branch.

[00:01:30]
So in this case, it took the code from this branch feature copy and deployed it as a preview branch. This is really great because if you are responsible for reviewing this code, let's say you're the team leader or whatever, you're the one reviewing this PR. You can go to the app and actually see it, right?

[00:01:48]
It's not just like, show me a screenshot or let's go through this. No, I can just go to the app and see your code running in a production like environment to see what's happening. So you can play around with it. So you get that for free. If I go click on it, it'll take me to that preview branch.

[00:02:04]
Here it is. Here's the URL for it. I click on it. It works. This authentication right here just makes sure that whoever's looking at this preview branch has to be on your Vercel team to see it. Otherwise, anybody who had this URL can go look at your preview, which you probably don't want.

[00:02:22]
Then they have this thing right here that you can click on and it does a bunch of stuff. You can leave comments. So I can go in here and like, no, don't do this. Now people can see that there's a comment here. If I integrate it with Vercel's feature flags, I can turn on and off feature flags to see them here, which is really cool.

[00:02:50]
They have a lot of stuff. [LAUGH] I can share this with someone on my team. You can look at the Meta tags for SEO. You can do performance type stuff. There's a QR code for something to go here. They just thought of everything.
>> Speaker 2: You could like check mobile.

[00:03:11]
>> Scott Moss: You could check mobile, yeah, there you go, I guess that's what it's good for, yeah. You could even switch branches. So if there's another branch which I don't have, you can switch to that branch and it'll load that version of that site right here immediately. So really, really, really cool.

[00:03:24]
And you get this, as you can see for free, I'm not paying for anything on my personal plan. They want me to install the Slack integration. If someone comments something and tags me in it, I'll get a Slack notification. So it kinda thought of everything. They also have like stuff for, where is it at?

[00:03:43]
What's preview mode? There should be a preview mode in here, which is different than a preview deploy. Where is it at? I don't see it anymore. They used to have like a preview mode and that would be something you would have for like headless CMSs. Headless CMSs that had preview content.

[00:04:04]
You might want to see that preview content on a preview branch. So it's pretty cool. So there we go. We got the preview branch and then you can test that out. When it's ready to go, you can merge it. So lemme go back to my GitHub here. I didn't even know that it added a blocker cuz those are unresolved comment.

[00:04:28]
I didn't know it did that.
>> Speaker 2: That's wild.
>> Scott Moss: That's really cool.
>> Speaker 2: What's that comment that you added look like in here?
>> Scott Moss: It doesn't show you. It just links you to where it is.
>> Speaker 2: What if you click on that, does it like deep link to?

[00:04:45]
>> Scott Moss: Yeah, it says go to feedback. Yeah, there you go, yeah.
>> [LAUGH].
>> Scott Moss: [LAUGH] Wow. Yeah, so I can resolve that and I'm guessing that'll clean it up. So let's go back. Yeah, it does [LAUGH]. It's pretty nice [LAUGH]. It's pretty nice, I didn't know they did that, that's really nice, yeah.

[00:05:08]
And then when I'm ready and everything looks good, I'll just merge this Pull request. Actually, hold on. Need to rebase and merge, I don't ever merge, that's just gross. And now it's gonna do another deploy. It's gonna deploy that to production. So if I go look at Vercel here I go to Deployments, it should be deploying right now.

[00:05:35]
It's deploying that code into production. So pretty simple. And then you get to branch off of all the environment settings, all the settings for deployment, you get to branch that off depending on what environment you're in. If I'm in settings, I can add different environment. Well, there's a custom environments, but I can add different environment variables for different environments.

[00:05:57]
They don't all have to be the same. So right now I'm using that one database URL for all my environments. You probably wouldn't do that. You would instead use a different database URL for preview. But here's the question, if you've thought about it. If the preview branches are ephemeral, they spin up whenever a new PR comes.

[00:06:14]
How do you get a dynamic database URL only for that preview? Because if you think about it, if I'm spinning up a preview version of my app on every PR, let's say I have 30 people on my team and they're all just doing pull requests, how do they all have access to their own storage, their own database, their own everything?

[00:06:30]
Well, that's why every modern database today has branching on it just for this purpose. So if Neon has branching, you can branch your database off. They have integration with Vercel that will create a branch for your database whenever a preview deployment is deployed. And they'll add it in your environment variables for you so you don't have to do anything.

[00:06:48]
So does like planetscale, so does pretty much every modern database that I've used today has branching. So you can associate a branch of your database with a branch of your app, AKA a preview. They allow branching, just empty database with a schema, but also branching the data as well.

[00:07:05]
So if you wanna take all your prod data, branch it, basically essentially copy it into another database instantly. It doesn't take forever, it's instant. And then apply that to a preview build automatically, it'll do that. So you're actually using real data on a preview version of your app instantly without having to do what we had to do 10 years ago.

[00:07:24]
Just export a file from a database, import it back, and it could take forever or even worse, just using Mock data and Seed data. So it's really good. And that's actually what I do in production. I use Neo, we branch on previews. It branches the production database over to the preview.

[00:07:43]
So when we're looking at the preview app, it's with real data and we use it very exclusively. It works very well.
>> Scott Moss: Cool, that should have deployed. Looks like it did, it's good to go, cool. Any questions on deployment?
>> Speaker 3: And this is all free?
>> Scott Moss: For this, yeah, I mean, they're eventually gonna charge you when you go past certain limits, right?

[00:08:11]
I don't know the exact thing that they charge, but let's say you had we have the API routes, right? Those API routes, I don't know, a lot of people just start, you blow up, you start getting 100,000 calls a day and they're gonna charge you for that, right?

[00:08:29]
Pretty much anything that hits their server, anything that server sites or react server components, they're eventually gonna start charging for that. Now if you just built like a full client app and only put it on Vercel, you could probably get away with without ever paying anything if you didn't want any of the collaborative features that they have.

[00:08:47]
Cuz a lot of the stuff you gotta pay for is around collaboration as well. Like feature flags, they have like observability. If you want like extra performance stuff in here, they might charge you for it. Or I think analytics, yeah, you gotta pay for analytics if you want web analytics.

[00:09:03]
But they also have, lemme see if I can find it. Is it in here? They have a platform which you can install. You can install like integrations. They have like an integration thing. So yeah, you can also integrate with a lot of stuff. And it's kinda like Heroku, if you ever use Heroku in the past.

[00:09:21]
But these are all standalone products that you can sign up externally and just add environment variables. But a lot of them optionally have integrations with Vercel, like Neon, like I said, will automatically manage those environment variables for you. Upstash will automatically do stuff for you. And if you integrate on this side, you don't ever have to log into this app to manage it.

[00:09:43]
It's all like one unified bill. It's all underneath one house, you don't have to do anything. So it's literally just like Heroku. So they have tons of integrations as well that you can do. And then they've also partnered with a lot of these companies, for instance, if you go to storage, you can literally just add Neon here.

[00:10:03]
Upstash a lot of the stuff like Edge config and stuff. I'm pretty sure this is just using Upstash. So they used to have their own, yeah, right here. No, that's not it. They used to have their own Postgres database which was literally just Neon. So they'll do stuff like that but they're tryna make it super easy for you to just get started.

[00:10:24]
They even have like AI now, so if you've ever looked at NPM, install AI that's for sale. That's their SDK that is just like a super simple AI SDK. And they let you like use different open-source models, different products like Perplexity, you can just tie in without having to go anywhere.

[00:10:44]
Replicate is a really good one. So they're tryna give you everything here without having to go everywhere. Casting aside all these amazing Vercel features, do you have any tips or insight into self-hosting Next JS apps? I have, I don't recommend it. Well, I'm not gonna say I don't recommend it, lemme take that back.

[00:11:06]
Because up until recently, in my opinion, Next JS or Vercel was really, really expensive, super expensive. We got hit by traffic on one of our iterations of our product cuz we were doing like all these background jobs with Upstash and our bill went from nothing to $10,000. And I was like, we don't even have that many users and it's already $10,000.

[00:11:30]
It's not Vercel's fault, it was just the way that those background jobs work is like one job might do 100 requests for one job. And Next JS isn't built, assuming that Next JS is like, that's 100 requests, that's probably like 100 people. So you're probably doing better and you can afford this.

[00:11:49]
But no, that was just like one person doing one job that did a hundred requests. So it didn't scale the way that they thought your business would be scaling if you had that amount of traffic. And they know this, we've talked with them. I actually know the first Vercel team pretty well from the CEO down.

[00:12:05]
And they're aware of this. And I mean they've done some pretty interesting things to solve this. They have like Fluid Compute now which keeps your functions around. So it's like the best of a server and a serverless at the same time. They have some other flags you can turn on that really reduce your bill.

[00:12:21]
So I think because it actually is pretty good on price now and as far as like reliability, they've always been better than Cloudflare in my opinion. The cost you save on self-hosting probably isn't worth it unless your company's doing so well and you're just like a really big company and saving 5% is gonna be worth hundreds of thousands of dollars then maybe.

[00:12:47]
But for most people who are just building a thing and they don't have that much traffic and they're not constrained by a 10% difference or whatever, I don't think so.
>> Speaker 3: And what about features like middleware implementing that kind of manually for in a self-hosted environment?
>> Scott Moss: It's gonna depend on where you deploy.

[00:13:12]
Most deployment platforms are aware that Next JS is like the hot thing. So they usually have somewhere in the documentation whether or not they support these features or not. So you'd have to look at where you're deploying and whether or not they support that. Next JS doesn't know where it's gonna be deployed, right?

[00:13:31]
And Vercel isn't forcing everybody to do the things that they're doing. So it's gonna be up to those providers. Competitive providers are definitely trying to keep up with what Vercel is doing because they realize a lot of their business is gonna be folks using Next JS.
>> Speaker 4: So on this deployment, the API endpoints that we created are on that same domain.

[00:13:55]
Show there, right [CROSSTALK].
>> Scott Moss: Let's try it. Let's grab the link address. We'll go here. Do a Get request, get rid of the authorization. Well, I guess I actually have to do the thing [LAUGH] issue. There we go, we get a 401 from our middleware. If I add the authorization back, Get a 200 but I don't have any issues, so nothing came back.

[00:14:34]
Any other questions? Nope, yep?
>> Speaker 5: Is there a way to scale Next JS like make API routes run on several instances for uptime?
>> Scott Moss: It's a great question. That is the whole purpose of Serverless is that you don't have to vertically scale them because they spin up and run and shut down when you don't need them.

[00:15:04]
So you don't have to think about how to scale them. It's not like a server that's constantly on in which you need to think about the resources in which they're consuming collectively. And then how do you scale this vertically? As in, let's put more money into this machine or how do you scale these horizontally?

[00:15:20]
As in, let's replicate these machines. You don't have to do that. It's serverless scales infinitely forever at a cost, it's gonna cost you. But some of the new features they added, like I said, Fluid Compute really reduces the cost, probably like more than up to 50%. So scaling that is not something you have to worry about with Serverless.

[00:15:41]
But yeah, cost could be a thing depending on where you deploy. Speed can be a thing because serverless has code start cost and stuff like that. But I think if you do edge computing correctly and wisely, you can offset a lot of that speed cost and reap the benefits of infinite scale.

[00:16:05]
Cool, any other questions?
>> Speaker 6: What would be your opinion deploying Docker containers on Vercel and maybe have the container of the database also deploy there so that you don't have outbound traffic to another database provider? You see something for benefit there?
>> Scott Moss: That's a great question. So the Docker container to Vercel, different database.

[00:16:26]
So Vercel does not support Docker. Vercel is not a low-level hosting platform in which you can deploy an image, it's mostly just for application hosting. It's like you just wanna deploy an application. They're assuming everything that you need. If you need a database that's somewhere else, if you go spin up Amazon Aurora or something, you wanna use that in Vercel, you can, it's just an environment variable.

[00:16:50]
I mean, you'll have to obviously get the IP address and allow that to go to your VPC. But you can let that in and you can use an environment variable and connect it. They're not gonna prevent you from using any resource from anywhere that you don't wanna use.

[00:17:03]
But Vercel is for product engineers or full stack engineers that don't wanna manage images or they don't wanna manage Docker. They don't wanna manage a database. They just want to get their app hosted. So they're not gonna support Docker or you can't deploy a traditional server to Vercel because they don't have an environment to run a traditional server.

[00:17:27]
It's just serverless functions. So if you want to deploy to Vercel, you have to deploy it in a way that makes sense to it. So Next JS by default makes sense to Vercel so they can read the Next JS app and know that, here are your serverless functions.

[00:17:41]
If you don't use Next JS, that's fine, but you still have to configure your app in a way. There's a configure a Vercel JSON file that you'll have to make that says, here are my serverless routes, here's where they map to. You have to do that in order for it to deploy, otherwise it's not gonna deploy.

[00:17:56]
So yeah, you couldn't just take like a Fastify server and just like throw it on Vercel, it wouldn't work. But you can make serverless routes in Python, right? You could do that, they don't have to be in JavaScript. So yeah, you couldn't do that, but if you need to get an app deployed, it's probably the best platform, I think, out there.