Vibe Coding Course (for Beginners) - Vibe Coding Course 8 – Deploying (Vercel)

My very first vibe coded app worked flawlessly right here on my computer, but when I went to deploy it to the internet to make it live and publicly accessible, it took over a week and a half. It was a massive headache. I got air after air. In this video, I'm going to walk you through how to deploy your app, your website, live on the internet, custom domain name, everything.

First, what does deploy actually mean? What does a host do? Deploy just means moving all of your code base, literally the files, folders, everything, to another computer, a server somewhere out there on internet land that will run at 24.7. Now, a host, this platform like for sale or render or whatever, it does, well, it doesn't be Julian things, but it does three main things.

Number one, it stores those files. Right now, this code right here, these files, these folders, everything that I built in a previous video here, these files or folders are on my computer and I need to transfer them and the host stores those. Now, it also builds my app. This is actually a bajillion things as well.

Underneath the hood, it might compile some of your code, it packages up all those files and it just prepares your app for people to use it. So, you don't even need to know all the nitty gritty that goes on behind the scenes. You're actually going to see this in action in just a moment. You're going to see for sale, build my app and then it just runs it.

It handles all of the requests when a user first types in the URL. Okay, what does it do? It serves up all those files that are needed. It handles what happens when they click a button, what happens when they enter in some data, when they submit a form, all the things.

It just runs, it executes all of your code, runs your app. So, moving right along, server, I just I just broke down that word. What does that mean? Just think of a server like a computer.

That's it. It's a computer out there in some massive data warehouse with a million computers and it's just running your app 24-7. That's what a server is. So, don't worry about anything more complicated than that.

Now, moving right along really quickly here, a quick warning. Different apps require different hosts. This is kind of like cooking. If you are in your kitchen and you have a recipe that calls for a microwave, but you don't have a microwave, you might not be able to make that recipe.

If you have an app, that calls for a Node.js runtime, but you signed up for a host that doesn't allow Node.js runtimes, you can't store your app on that host. Now, here's the bad news. I can't tell you what host to use. It depends on your app.

Most of the common frameworks, everything I've mentioned in this course, you have a lot of options. In fact, all the options I'm going to discuss in just a moment, you can probably use. But, just know, there could be some third-party plugins and libraries that you added to your app. I don't know what that would even be that might not be supported on some hosts.

And you kind of need to just Google it and figure it out for yourself. One other pro tip, I'm sorry, I'll go back to the lesson in a moment. One pro tip is to deploy early, meaning right when you first start your project, even before you add a million bajillion features, go ahead and deploy it to your host. You are less likely to encounter errors.

As soon as you start adding more features, adding more third-party plugins and libraries, you're upping the chances that one of them is not going to work. And I might kick back an error. And then you'll be able to see what it was. If you deploy early, chances are high it's going to work.

And as you add new features and you redeploy and redeploy and redeploy, you will be able to spot errors far easier. Last teaching moment and then I'll actually deploy a site. You'll see these terms thrown around a lot. Static, excuse me, and dynamic.

For example, Cloud Flare pages only does static websites. Static sites are just exactly the same for everybody who lands on the site. All the users, readers, whatever that is. They land on your site.

It's exactly the same information. It's actually pre-built, meaning the host, Cloud Flare pages, for example, it takes all your files, your folders, it builds your app, and then it just serves the exact same thing for every single person. But what if you have users who log in and log out and submit their data and they, I don't know, do something that stored in a database, your site is different for everybody or could be different? That's a dynamic site.

It's generated on the fly. A portfolio website with four pages on it that just showcases some of your projects. That's probably a static site. A full-fledged app would log in, log out, people can pay, people can go in their dashboard and change things.

That's a dynamic app. Okay, so let's deploy that demo project I created a video or two ago. Believe it's called Vibetest 2. All right, I renamed it something different.

I've already pushed it to get that important to note right here. Test 2 Delete. That's my GitHub repo. So the first thing, go sign up for your host.

I will give you some options in just a moment. I'm going to use Verself for this video just because they have a great free plan. Connect it to your GitHub account. I should say that first.

Connect it to your GitHub account and then start a new project and then we'll connect it to our GitHub repo. So this is a little weird right here. So you probably, it probably prompts you this when you first sign up. I'm already logged in of course, but you can go to your account settings and somewhere in here you will be able to connect to GitHub.

There it is right there. I already got some connection right there. So after that you will go and create a new project. This is not the wrong.

There we go. Okay, so I'm going to go add a new project right here and then select your GitHub repo. It's already connected. By the way, if you just click this, this would probably allow you connect a new GitHub account right here.

There it is. Test 2 Delete. I will hit Import. Okay, at this step, two very important things that I failed at miserably.

The first time I did this. Number 1, Environment variables. Your ENV file. If you have one, it'll be in the root of your project folder.

I don't even have one for this one, but it would be like right here. This would be a file. This contains secrets like your API keys to stripe or super base or pocket base or fire base or any of the bases or any other API keys that you have and you use. You'll want to copy those and put them here where you deploy.

They're not uploaded to GitHub. This is usually a Git ignore file. Your Git ignore file always ignores these. So it's not uploaded to GitHub.

So Brazil is not going to have those. By default, you have to give it to them manually. Copy everything in the file and just paste it right here. It'll automatically split them out.

Most of these platforms will. So you will want to do that. That's that's number one. Number two, you just need to make sure it probably happens automatically.

But you need to make sure that your build settings are correct. Now, I strongly suggest, even if you think you know what you're doing, go to Google and look up your framework and your hosts. For example, this is a spill kit app. Yeah, spill kit and versatile.

You can literally just Google those words and the first couple of things that pop up will probably be the documentation on both of the platforms. So get, I've done this before, you can see that's like a lot of completed in my history. So it'll be like right here or right here, you can go to either one of these and follow the instructions. You've already been doing that a lot.

But you can follow the instructions. Make sure that you have your things set up correctly. Configure your spill kit app. I don't actually have to do this.

I don't think we'll see. If I get an error back, I'll probably have to come back here. And make sure there's a lot of stuff that's probably not relevant. But you just might want to check.

Right. Just make sure your build settings are correct. Again, most of these platforms like Vercel or Netlify or Vender, they have presets. It detected this automatically.

I didn't even click this button and you can see there's a million more that you could choose from Angular Astro. I don't know why I can't scroll down correctly right here. There we go. There's a ton of them.

Right. Remix, React, all the stuff. spill kit and then it has Vete build. You could edit it like this.

I'll put directly public. I never change any of these things just because it doesn't buy default. But you just want to make sure. I know that was a very long-winded thing to say.

But alas, you just want to make sure. So I'm going to deploy this. And a little while ago, I mentioned that it's going to build my app. It's not just uploading my files.

It's doing the compiling. It's doing some packaging up. And it's going to give me, oh, there it is. The logs.

You could look if you want to. Hopefully we don't see any red errors. There's a ton of stuff by the way. This will take like 30 seconds, 40 so, okay, well, no, never mind.

It could take up a minute or two minutes. It looks like this worked. Congratulations. You just deployed a new project.

If you're doing this and you get a big old red error, don't freak out just yet. I recommend a copying the error and then googling it. Or even better, going to chat CPT or going to something and figuring out what you need to do. Sometimes it's, you miss an environment variable.

Sometimes you hit one of those things I talked about where this is not compatible with no JS or Versaille. You might have to figure that sort of stuff out. Again, this is why I suggest deploying early like this blank project I have just because you know it's going to work. And then as you add more things, you'll figure out, hey, oh, this is the one that's not working.

I need to change this, right? I hope that makes sense. I actually want to do these in reverse order here. Custom domain names just really quick.

When you first deploy, obviously, it will be to a randomversail.com domain name. Here it is right here. Test to delete something, something, whatever. You should be able to click this.

Oh, click it. There you go. You should be able to see there it is. It's working right now on this URL.

Custom domain names, here's what you do. Number one, you buy your domain name. You don't have to do it on Versaille. You could use your name, cheap or pork bun or a million bajillion.

All the ones right there. You will want to go into your project settings in from your copy paste of DNS settings from your host. Yeah, okay. I said that right.

Your host as in Versaille. Go into the project settings, which is, where is that? Right here, settings. Then domains, okay.

And then you'll want to click add domain and then type it out. Type it out.com. I don't actually own this by the way. So, you know, we wouldn't actually do this.

Production, yeah, that's fine. We're not redirecting to another domain, whatever. Type it out.com. Save.

Okay. Now, it's going to give you a few things to copy and paste into your registrar. As I mentioned here, copy and paste the DNS settings from your host and put them into your registrar. If I was in name, cheap, I would go find the DNS settings.

Again, I can't help you with that. Just Google it if you're having trouble finding those. But you will see, A records, text records, TXT, text records, C name records, a bunch of different records. And they look like this.

I'm going to, oh, there we go. They look like this. There's like a type, a name, a value. Sometimes there is something else in here as well.

Proxy. Disable. It doesn't matter. So, basically, you'll create an A record.

The name will just be at the copy button. And then for the value, you'll put in this IP address right here. You just copy that and then put it in there. And then this one is a C name record, which is kind of like a redirect.

WWW is what you put in the name field and then value. You put in this crazy versatile thing right there. You put those in there in your registrar, name, cheap, go down, whatever, you hit save. And then it takes like 20 minutes, sometimes upwards of an hour or two.

And then it should just work. And then you should have a custom domain name. Last thing, some platforms that I have used and recommend. First, if you have a static site and you know it's a static site, it's very simple.

A portfolio site. Maybe you have a couple blog posts or something like that. I really like cloud flare pages. It's completely free.

Works really well. You can also register your domain name there at cloud flare. And that it's an easy like a connection, if you will. It works really well.

Versel, I think has the best free tier. And you can see I have a bunch of small test projects on Versel. You can see in my account, I have like a bajillion of them. When I start getting users and traffic increases, I usually switch over to render.

And render.com has, I think it's $7 a month for a web service. That's what they call it. And it'll, it's just fast. It's speedy.

There's no downtime. The limits great for like $7 a month. Netlify, Railway, there's several others where you could host. I mean, there's a million options.

But these are like the, the modern things. One word of warning, only because I feel compelled to say this. A lot of these have free tiers or cheap tiers that if you were to magically get a million users overnight, the price might skyrocket. Like without warning you, right?

You sign up for these platforms and it's based on usage sometime. So if you just have 100 users, you might never pay anything period. If you have 500, you might be paying something. If you get 10,000 users in your app blows up, it might cost you a bunch of money and it's something you should be aware of.

That's all. In fact, some of these platforms have gotten in trouble in recent years when an app blows up and it's like, wow, they're charging me like $1,500 a month to like host this app now or something. I don't remember what the dollar amount is, but just so you're aware. And that is it.

So drop me a fat emoji in the comments that sums up this video and I'll see you in the next one. Adios.