Build A SaaS Startup With Claude Code (22-Min Crash Course)

[00:00] If you've never built software but want

[00:01] to start building your own tech startup

[00:03] fast, this video is for you. I've been

[00:05] developing software for more than 30

[00:06] years and made more than a million

[00:08] dollars with AI. And in the next 25

[00:10] minutes, I'm going to show you how to

[00:11] set up a full stack app from scratch

[00:13] using AI, complete with a marketing

[00:15] landing page, authentication, and live

[00:17] deployment to the internet. I'll explain

[00:19] all of the steps that I'm doing so that

[00:20] you understand the tools and how to pick

[00:22] them so that you can keep building on

[00:24] your own. So, if you're tired of seeing

[00:25] everyone else profit from AI, this video

[00:27] is for you. Let's get into it. So there

[00:29] are a few different tools that you will

[00:30] need to install. Install Visual Studio,

[00:32] install Node.js, Cloud Code. How do we

[00:35] add Cloud Code to Visual Studio? So

[00:37] before you go any further, make sure you

[00:40] install these different tools. The

[00:42] plugin is optional cuz we're not going

[00:43] to actually use it today, but I did at

[00:44] least want to show it to you and tell

[00:46] you about it. And then you're going to

[00:47] want to set up these accounts here. So

[00:48] we got Superbase. If I click on this,

[00:50] it's just going to go to Superbase. I'm

[00:52] already logged in. I already have an

[00:53] account. And then you've got your GitHub

[00:54] account as well. So you're going to want

[00:55] to create a GitHub account. After you

[00:57] set up your GitHub account, you're going

[00:58] to want to set up your SSH keys inside

[01:01] of your GitHub account. If you go to

[01:03] your account up here and you come down

[01:06] to settings and if you come down here to

[01:08] SSH keys, then you'll be able to create

[01:10] your SSH keys and it basically allows

[01:12] you to communicate with GitHub from your

[01:14] computer without having a password all

[01:16] the time. And there down here, there are

[01:18] instructions on how to set this up. And

[01:19] then you'll also want a Versell account.

[01:21] So when we actually build out this SAS,

[01:23] we build out the landing page, the

[01:24] authentication, we'll actually need to

[01:26] deploy it. And we're going to use

[01:27] Verscell to do that. And so you can just

[01:30] go to Verscell. I already have an

[01:31] account. It's ready to go. And once you

[01:32] have these, then you can continue

[01:34] forward. And I'm going to explain these

[01:36] different things as I go. So there's

[01:37] going to be some times where the LLM is

[01:40] going to be busy doing things, and

[01:41] that'll give me a chance to come back

[01:43] and actually explain some of these tools

[01:44] in a little bit more detail. So the

[01:46] first thing that we're going to do is

[01:47] we're going to set up our environment.

[01:48] There's a few different ways of doing

[01:49] this, but I think it's probably easiest

[01:51] just to set up the initial project in

[01:53] GitHub. And if you're not familiar with

[01:55] GitHub, this is a platform that allows

[01:57] you to create projects, store code, and

[01:59] work with other developers at the same

[02:01] time where that you can work on the same

[02:02] codebase and then you can resolve

[02:04] conflicts, right? Because if I'm working

[02:05] on code and we're working on the same

[02:06] file and the same line, it's possible

[02:08] that we're working on the same file at

[02:09] the same time and we will need a some

[02:12] sort of mechanism to help us resolve

[02:15] that conflict. So that's all GitHub

[02:17] does. And GitHub is just the hosted

[02:19] version of Git. So Git is actually a

[02:20] command line tool and you would have

[02:22] installed that right here. So when

[02:24] you're in the terminal and I'll explain

[02:25] the terminal a bit as well. When I type

[02:27] git here, there's an actual command that

[02:29] I'm running and I'm working with. Okay.

[02:31] So we're going to go back to GitHub and

[02:34] we'll go ahead and start our SAS. I'm

[02:36] going to go ahead and call this the Hey

[02:37] Genen SAS startup because we're going to

[02:40] be creating a SAS that allows

[02:42] subscribers to log in, create projects,

[02:45] create video projects, generate a

[02:46] script, and then generate a video from

[02:48] that script all automatically with AI.

[02:50] And we're going to use Hey Genen. And if

[02:52] you're not familiar with Hey GenE, it's

[02:54] just a AI company that allows you to

[02:56] just upload a script and generate a

[02:57] video using your own avatar. I'll go

[02:59] ahead and just leave this public here.

[03:01] Create the repository. And now I'm going

[03:03] to need to grab this URL here. This is

[03:06] what we're going to use to clone the

[03:08] repository. So I'm going to go ahead and

[03:09] copy this and then I'm going to jump to

[03:11] the terminal. So if you've never used

[03:12] the terminal before, this is really the

[03:13] way when I was a kid, I would interact

[03:15] with computers all the time, but it's

[03:16] nothing to get overwhelmed with. A Mac

[03:18] has it, PCs have it. It's just a way to

[03:21] access the same system that you're using

[03:23] with the user interface. So if I do an

[03:25] ls here, which is a command that just

[03:27] says give me all the files. I'm in my

[03:28] home directory here, and you can see

[03:30] applications desktop. It would be the

[03:31] same thing if I went to the finder here

[03:33] and I can execute commands, but it's

[03:34] very similar to just working with the

[03:36] UI. It's just you're typing commands and

[03:38] interacting with just commands instead

[03:39] of a guey interface. So once you have

[03:42] this, we're going to copy that. Come

[03:44] back to the terminal. We're going to do

[03:46] get clone. And inside the community,

[03:48] I've got a whole other video that goes

[03:50] into git and how this works. And I'm

[03:52] just going to paste that link that I

[03:53] took from GitHub. And here it's using my

[03:55] SSH keys to connect with GitHub. I have

[03:58] to put in a passphrase just to

[03:59] authenticate. But now we have an empty

[04:02] folder here which is going to be the hey

[04:05] genen SAS. I think I I called it

[04:07] started. I should have said startup.

[04:09] I'll I'll change that after. So it's

[04:10] just an empty directory to start which

[04:12] is fine. Down below here I have a prompt

[04:14] inside of it. I could say hey you should

[04:16] install Nex.js. You should install these

[04:18] different components and everything like

[04:19] that. And it would work but in the end

[04:21] it's going to end up just executing some

[04:23] of these commands. And we don't really

[04:24] need the AI to do that for us, right? We

[04:27] can really just take these commands and

[04:28] run them ourselves. So the first one

[04:30] here is going to initiate an X.js and

[04:32] I'll explain a little bit more about

[04:33] Nex.js in a second. It's going to create

[04:34] an Nex.js project. It's going to add

[04:36] Shad CN which is a library that has all

[04:39] these different cool components, visual

[04:41] components to make your SAS look cool.

[04:42] Then we're going to actually add some

[04:44] different components and then we're

[04:46] going to install some libraries that

[04:48] work with Superbase. So again, like if I

[04:50] told the prompt to do that, it would do

[04:51] that. But there's no reason to have AI

[04:53] do it when we know we need these

[04:55] commands. So these four commands I'm

[04:56] going to run in the terminal. I have a

[04:58] command here that's just all four of

[04:59] them in one line. So I'm going to use

[05:01] this. It'll just make it a bit faster.

[05:03] I'm going to go ahead and open up the

[05:05] terminal and just cut and paste those

[05:06] commands. So now while this is running,

[05:08] the one thing I want to just highlight

[05:09] here, I'm going to jump over to the

[05:11] screen here so I can draw a little bit.

[05:13] The reason why I picked Nex.js instead

[05:15] of the many other solutions is that

[05:17] building a web application is actually

[05:19] pretty complex and you have two major

[05:20] pieces. You have the server. So when I

[05:22] go to this site in our browser, so this

[05:24] is my browser here. When we want a web

[05:27] page, we go to that server and we say,

[05:28] "Hey, we'd like to use your website."

[05:30] And then what it does is it has this

[05:32] little clientside package. It's it's

[05:34] code that actually runs this particular

[05:37] SAS platform in your browser. There are

[05:39] some code that the server is going to

[05:41] send to us when we ask for it. So that

[05:43] then we can interact and run the

[05:45] platform. There's a communication back

[05:47] and forth between the server. So as I

[05:49] draw here, the server has to save all

[05:51] that information. Next.js JS makes it

[05:52] easy because they have one framework

[05:54] that gives you the the client code and

[05:56] the server code and the communication

[05:57] strategy back and forth which just

[05:59] eliminates a lot of things that you

[06:00] would normally have to build on your

[06:01] own. Now people still do build it on

[06:03] their own and you will notice in the AI

[06:05] vibe coding space a lot of people are

[06:07] using Nex.js because of that. So let's

[06:09] check in on our install.

[06:11] The rest of this should be pretty easy.

[06:12] But then you might also ask okay well

[06:14] why are we using Superbase? So this is

[06:15] another platform we're going to use.

[06:17] Another thing that every SAS application

[06:19] needs is it needs user login right?

[06:21] Right? So it needs an authentication

[06:22] system. That authentication system needs

[06:24] to be in the code here. This is

[06:26] something that's very important, right?

[06:27] Cuz if it's not secure, you know, people

[06:29] can hack your site. What Superbase did

[06:30] is they created a platform which has

[06:33] several different things inside of it.

[06:34] So people just talk about Superbase as

[06:35] if it's a thing, but inside of Superbase

[06:38] is not only a database, which we use to

[06:40] save all the information on the server

[06:42] side. So we've got this, but it also has

[06:44] that authentication system and it has a

[06:46] few other things as well. It has an

[06:47] email system because if our SAS needs to

[06:49] send email, there's quite a few

[06:50] different utilities every SAS needs in

[06:53] order to function properly. So that's

[06:55] all Superbase is doing and that's why

[06:56] we're using these specific frameworks.

[06:58] Cool. So we're ready to go. So now we're

[07:00] going to get into actual coding. So I

[07:02] have the terminal open. You can open up

[07:03] multiple terminals like this. So we have

[07:06] two windows. Or you can actually just

[07:08] create additional tabs. I'm going to

[07:10] show you in a minute, but you might also

[07:11] be running Cloud Code and you might also

[07:13] be running your site and testing it with

[07:15] other commands. What I like to do is

[07:17] just create a new tab so that I can work

[07:19] on multiple things at the same time

[07:21] without having to manage a bunch of

[07:22] windows. Now, I'm going to run Cloud

[07:24] Code in the terminal here. Remember

[07:26] before earlier I talked about how you

[07:28] could run Cloud Code here inside of

[07:30] Visual Studio, but this plugin and

[07:32] running Cloud Code here are not exactly

[07:35] the same thing. I found that actually

[07:37] running it in the terminal has better

[07:38] performance and the plugin just doesn't

[07:40] perform as well. There might be some

[07:41] situations where I use the plugin just

[07:43] because it's nice that it's integrated.

[07:44] Recently, I've just been using the

[07:46] terminal and it works a whole lot

[07:47] better. Okay, first thing I'm going to

[07:49] do here is I'm going to go ahead and pop

[07:51] open cloud code and now I'm inside of

[07:54] the directory. Okay, and then it's going

[07:56] to ask for permission. We'll go ahead

[07:57] and give it permission. Now, I did

[07:59] mention here to run /init. So, I'll just

[08:01] talk about what this is. So, if I type

[08:03] /init, what that's going to do is it's

[08:05] going to evaluate the codebase. Let me

[08:07] just jump over to Visual Studio here and

[08:09] I'm going to open up the folder so we

[08:10] can see all of the files that we've

[08:13] already created. So if you notice here

[08:14] on the the left hand side, we have our

[08:16] directory structure. And if I were to

[08:18] come to the command line here, come over

[08:19] here. But if I were to do an ls here,

[08:22] we're going to see all the same things

[08:24] right here again. So again, the terminal

[08:26] is just a, you know, more rudimentary

[08:28] way of accessing your system, but the UI

[08:30] is seeing the same thing here. And so

[08:32] what the slashinit command does, if I

[08:35] were to type this right now, I think I'm

[08:36] I'm gonna wait. But if I type this, what

[08:38] it's going to do is it's going to create

[08:39] this cloud. MD file, which basically

[08:42] describes the codebase in detail. When

[08:44] cloud runs from time to time, it already

[08:46] has an understanding of what's going on.

[08:48] But I think I'll just I'll wait till the

[08:50] end. It's kind of just a judgment call.

[08:51] So the next thing I'm going to do is I'm

[08:53] going to install the Superbase MCP. So

[08:55] I'm going to jump over to M uh to

[08:56] Superbase. I've just created account.

[08:58] And again, it's totally free. I already

[09:00] have one project here or this is my

[09:02] organization. So I'm going to click on

[09:03] my organization. I'm going to create a

[09:04] new project

[09:06] call the hey genen

[09:09] SAS startup. Create a project or a

[09:12] password. Create new project. And now

[09:14] what's cool is up in this connect button

[09:16] here. They make it really easy to

[09:18] install the MCP for cloud code

[09:20] specifically. So I'm going to come down

[09:21] here for client. I'm going to pick cloud

[09:23] code. And it just gives me this command

[09:25] I can come back to the terminal and run.

[09:26] So I'm going to jump back out of cloud

[09:28] code. I'm going to install this MCP.

[09:30] It's going to connect it to my

[09:32] Superbase. And now if I type cloud

[09:34] again,

[09:35] it's going to ask us if I want to use

[09:38] that MCP. And now if I type MCP, we can

[09:41] see that I have that MCP. Now it needs

[09:44] authentication.

[09:46] So I'm going to go ahead and

[09:47] authenticate. It's just going to open up

[09:48] a window and then I can authorize it.

[09:50] And if I come back to cloud code. So now

[09:53] if I type MCP,

[09:55] we've got our superbase and it's

[09:57] connected and we can view the tools. So

[09:59] if you're not familiar with MCP servers,

[10:01] I'm installing this just to kind of

[10:02] demonstrate. But it's really giving your

[10:04] agent tools to use like it's giving it a

[10:06] hammer and a a screwdriver so that as it

[10:09] comes across problems, it can pick up

[10:10] that the right tool for the job at the

[10:12] time. So now before we get started, we

[10:13] do need to set up one thing inside of

[10:15] our project here. I'm going to go to

[10:18] authentication and then we're going to

[10:20] come down here to URL configuration. We

[10:22] already have a URL for the site URL

[10:25] which is fine. So it's pointing to

[10:27] localhost. And just so you know whenever

[10:28] something says local host it's referring

[10:29] to your own computer. So when we first

[10:31] build this we're going to be building it

[10:32] locally on our computer and then we're

[10:34] going to deploy it to the web later. So

[10:36] whenever you see local host it's

[10:37] referring to your own computer. So then

[10:39] we need to take this. I'm going to copy

[10:41] it. We're going to add this URL here

[10:43] which is the same from the instructions.

[10:45] We're just going to add slash off

[10:47] callback.

[10:49] All right. So now all we need to do is

[10:51] run this prompt. So if you're watching

[10:53] this on YouTube, I will have the prompt

[10:56] linked in the description below so you

[10:57] can cut and paste it. But essentially

[10:58] what it's doing is it's telling the

[11:00] agent that you're a full stack developer

[11:02] that you're an expert in X.js like you

[11:04] to build out the landing page and the

[11:05] superbase authentication. And then we

[11:07] talk about the different pages that are

[11:08] needed to make a nice landing page. You

[11:11] need pricing, hero image, right? the

[11:13] title, CTA, and the pricing and the

[11:16] footer. And then we hashed out some of

[11:18] the basic files. We need some examples

[11:20] from the Superbase documentation just to

[11:22] make sure it does it right. And then we

[11:24] just have some basic flow, right? So

[11:26] like there's a very typical pattern with

[11:28] authentication. You know, you sign up,

[11:30] then they you confirm your email. So it

[11:32] just describes that typical flow, some

[11:34] things not to do. So I've gone through

[11:35] this process a couple times and I've

[11:36] just refined this prompt, some error and

[11:38] some troubleshooting tips, but that's

[11:40] really all we need. So, I'm going to go

[11:42] ahead and copy this whole thing. Jump

[11:43] back to cloud code. I'm going to go

[11:45] ahead and go into plan mode. So, I'm

[11:46] going to go shift tab twice to go into

[11:49] plan mode. Going to paste that entire

[11:52] prompt. And we will just let it go. All

[11:55] right. So, next up, Cloud is asking me,

[11:57] it wants to get the project URL from

[11:58] Superbase. This is something it needs

[12:00] for the local for the project. So, it's

[12:02] going to ask for permission. It's going

[12:03] to ask for permission for a bunch of

[12:05] different things. I would get

[12:06] comfortable understanding the questions

[12:07] it's asking you and just continuing to

[12:10] learn. and it's asking for the

[12:11] publishable keys. So take a moment, go

[12:13] to cloud, say, "Hey, what is superbase

[12:15] the publishable keys?" Learn what these

[12:16] things are as you go when it's asking

[12:18] for permission. It's a good chance to

[12:20] learn. So here it's asking for

[12:22] permission to look up some of the

[12:23] documentation,

[12:25] wants to look up some files inside the

[12:27] directory. So we're just going to give

[12:29] it permission and then also tell it that

[12:30] it has permission to keep doing that. So

[12:32] here's it's using the MCP to look up

[12:34] information. You can see here it's

[12:36] actually giving us some warnings about,

[12:38] you know, how many tokens we're using

[12:39] and to be careful with what we look up.

[12:41] Now it's creating the plan. Yeah. So,

[12:42] what was interesting before is I was

[12:44] running the same process but using the

[12:46] plugin for cloud code that I showed you

[12:48] earlier inside VS Code, but it was just

[12:50] moving so much slower. And I did a

[12:51] little bit of research and it turns out

[12:53] they're not exactly the same. So, the

[12:54] plugin for cloud code is not doing the

[12:56] exact same thing that the command line

[12:58] tool is. In fact, the old plugin

[13:00] actually used cloud code directly and it

[13:02] was a couple months ago where they

[13:03] created this plugin and it just doesn't

[13:05] work quite as well. So, it's creating

[13:06] the plan and it's always good to just

[13:08] watch what it's doing and then we can

[13:09] come back here. You can review

[13:11] everything. I always recommend people

[13:13] review take note of what you don't

[13:15] understand. Create a list of things to

[13:16] do research on. So, I'm just going to go

[13:18] through make sure it looks good compared

[13:20] to what we wanted. It's looking good.

[13:23] So, at this point I'm just going to go

[13:24] ahead and say yes and auto accept the

[13:26] edits. So here it's creating the env

[13:29] local file. So this is a local file that

[13:31] your Next.js application is going to use

[13:34] to set up basic information that allows

[13:36] the site to run. So if we're going to

[13:37] integrate with Superbase inside of our

[13:38] Next.js application, we need a couple of

[13:40] different things. We need the project

[13:42] URL and we need the key. And so using

[13:44] that Superbase MCP, it was able to get

[13:47] that for us and just create this this

[13:49] file for us, which is cool. So we'll let

[13:51] it go ahead and build things out. Now

[13:52] it's going to create the landing page.

[13:53] It looks like it already created most of

[13:55] the components for the authentication,

[13:57] logging in, creating an account,

[13:58] resetting password. All right, so it's

[14:00] pretty much done now. It's running the

[14:02] npm run build. So wanted to just quickly

[14:05] talk about this. So with Nex.js, when

[14:06] you build out a project, the first thing

[14:09] you do is you run a build. It's going to

[14:10] take all of the source code and it's

[14:12] going to build this package, that client

[14:14] and that server code that we talked

[14:15] about earlier into a bundle. And so

[14:17] that's what npm run build is. Okay, that

[14:19] builds the the bundle basically. So, I'm

[14:22] going to go ahead and give it permission

[14:23] to do it now and to do it into the

[14:25] future as needed. This is where it's

[14:26] able to find some additional or initial

[14:29] bugs that it can go ahead and just fix

[14:31] for you. So, you can see it compiled

[14:33] successfully, but it did find one issue,

[14:35] which is the new Nex.js uses a different

[14:38] naming convention for something. So,

[14:39] it's going to fix that. Those are

[14:41] interesting things to figure out and

[14:42] notice as well because essentially what

[14:44] happened is a new version of Nex.js came

[14:46] out. They changed the name of something,

[14:47] but all the documentation online uses

[14:49] the old one. So every time it tries to

[14:51] to do it, it's using the documentation

[14:52] and it it notices it and it's able to

[14:54] fix it. This is going to be common when

[14:55] when versions change. It's common thing.

[14:58] So now now it's running npm rundev.

[15:00] Okay. So what this is going to do is

[15:02] it's actually going to run the server.

[15:03] Now you can run the server. You can have

[15:05] cloud code run the server. So you can

[15:06] see there's a background task running

[15:08] right here. So it's running the build in

[15:10] the background. You could come over here

[15:12] and I could type npm run build or dev.

[15:17] Now, you can only have one dev running

[15:19] on any given port. So, if you remember

[15:21] back in Superbase, we had this URL here

[15:23] with this colon 3000. What 3000 means is

[15:26] we're going to be accessing port 3000 on

[15:28] our local computer. Your computer

[15:30] happens to have a lot of ports. When

[15:32] you're online and you're just going to

[15:33] something.com, it's traditionally going

[15:35] to port 80 if it's unsecured. But, if

[15:37] you know the the little lock there,

[15:38] that's going to a different port. I

[15:40] think it's 443, I believe. All right.

[15:41] So, it says it's finished. So, let's

[15:43] take a look at our site. We can see how

[15:44] well it did.

[15:47] All right, cool. Here's our SAS app

[15:49] ready to go. Pricing footer. Let's go

[15:51] ahead and log in. We don't have an

[15:52] account yet. So, let's go ahead and sign

[15:54] up. It's just giving you a security

[15:55] warning. Create the account. All right.

[15:57] Now, it's saying it went to my email to

[16:00] confirm. All right. So, confirm your

[16:02] mail. All right. Cool. So, that worked.

[16:04] And we're logged in now. Perfect. And

[16:06] then if we go over to Superbase, we go

[16:08] over to the authentication

[16:11] users, we're going to see the new user

[16:13] here. So, let's go ahead and log out.

[16:15] Let's try to do the password reset.

[16:16] Forgot your password.

[16:23] All right, reset password.

[16:26] Perfect. And we're logged in with a new

[16:27] password. So, that's pretty cool. It did

[16:29] the whole thing without any issues.

[16:30] Sometimes you might run into issues. In

[16:32] those cases, don't worry if cloud code

[16:34] is the one that's running the the

[16:36] server. Then, it's actually able to see

[16:38] the errors that are happening. If I were

[16:40] to run it here, you would be able to see

[16:41] the errors here, and you could just cut

[16:42] and paste them. Sometimes errors will

[16:44] happen on the screen here and then you

[16:45] can just cut and paste them. You're just

[16:46] going to come back to Claude, right? And

[16:48] you're just going to say what the error

[16:49] was. Although I've set up this prompt

[16:50] pretty well to get through some of those

[16:52] initial pieces. So now that we have a

[16:54] working site, if I come back here and I

[16:57] do an ls, I look at all the files here.

[17:00] LS-la will show me in a long format. So

[17:03] L makes it long. A shows the hidden

[17:06] files. If I just did ls, look at this.

[17:08] It's this format and no hidden files. So

[17:10] the hidden files are the ones with the

[17:11] dot. Okay, so ls I just like this view

[17:14] here. These are all the files that we

[17:16] need to check into our GitHub project.

[17:18] So way back in the remember we have this

[17:20] place where we can collaborate with

[17:22] other developers, but it's also the

[17:23] place where we can check in the code to

[17:25] actually deploy it to the web. Okay, so

[17:27] I have another video inside of the no

[17:28] code architects that will go much deeper

[17:31] into git, but I'm going to show you a

[17:33] couple commands today. So right now I'm

[17:36] going to type get status and that tells

[17:37] you the current status of this

[17:39] directory. And you can see here we're on

[17:40] the main branch. There's no commits and

[17:42] we have all these unttracked files. So

[17:44] the first thing to do is to start

[17:46] tracking them. So we're going to do get

[17:47] add dot. And now if I type get status,

[17:50] we're tracking the files, but they're

[17:51] not committed yet. So now we'll do

[17:53] commit or get commit-m

[17:56] first commit.

[17:59] So now if we do a get status, we have

[18:01] our initial commit. All the files are

[18:03] checked in. And now what we can do is we

[18:05] can do a get push origin. And what

[18:07] that's going to do is it's going to push

[18:08] it from our local directory up back into

[18:10] GitHub. And I'm going to put in my SSH

[18:13] key password. So now if we come back to

[18:16] GitHub and I do a refresh here, all of

[18:18] that code that we created is here. Now

[18:20] there's one other command I do want to

[18:21] talk to you about. It's this one right

[18:23] here. It says rm-rf.next

[18:27] and then node modules/cache.

[18:30] In nextjs, they create this cache. You

[18:32] run this command. It's going to clear

[18:34] out the cache so that when you run the

[18:36] build again, you're not going to run

[18:37] into some of those issues that might be

[18:38] lingering behind based off of some old

[18:40] code or something got corrupted. So, we

[18:42] committed it to GitHub. Now, we want to

[18:44] deploy it to Verscell. So, I'm going to

[18:45] jump over to Verscell here. And here's a

[18:47] couple of other sites I'm already

[18:49] running, but we're going to deploy this

[18:50] to web. Right. Right now, it's running

[18:52] on my local computer at localhost, but

[18:55] if anybody else wanted to access this

[18:57] SAS startup, nobody could because it's

[18:58] on my computer. So, we're going to

[19:00] create a new project and we're going to

[19:01] connect it to our git repository so that

[19:03] every time we make a change in git, it

[19:04] will just automatically take that

[19:06] change, recompile it. It'll do its own

[19:08] build and then it'll deploy it very

[19:10] similar to the npm rundev, but it's

[19:12] going to run a production version of

[19:14] that. All right. So, we're going to

[19:16] search for our hey genen project which

[19:19] is not going to be there because I'm

[19:21] only sharing the project like individual

[19:23] projects with forcell. So, I'm going to

[19:25] go to GitHub and we're going to give it

[19:27] a new project.

[19:31] We'll save it. We'll import it. You want

[19:33] to make sure that you're using the right

[19:35] framework here. If you mess this up, it

[19:36] might run into issues and think it's

[19:38] your code, but it's just because you

[19:39] picked the wrong project. Firstell

[19:40] happens to run a lot of different

[19:42] frameworks. Remember I mentioned there's

[19:43] a lot of frameworks. Check out all these

[19:44] frameworks here. But we're using Dex.js.

[19:46] You don't need to worry about the build

[19:47] and output settings. But we do need to

[19:49] set these environment variables here. So

[19:51] remember in our local file, we had these

[19:53] two variables. So these are two

[19:54] variables that we want to set up.

[19:59] add more. Yeah, you can import an

[20:01] environment variable file. That it's

[20:03] probably easier, but I already started

[20:05] doing this way.

[20:11] All right. So, we can deploy it. So,

[20:12] what it's going to do is it's going to

[20:13] go to GitHub. It's going to pull down

[20:15] this code. It needs to set up its own

[20:16] environment variable just like we did to

[20:18] run it locally. Forcell has to have this

[20:20] same setup. So, that's what we just did.

[20:22] It's going to run its own npm run build

[20:24] and then rundev to actually launch it.

[20:27] Right. So we got that. So now we can

[20:29] continue to the dashboard and we have

[20:30] our deployment here. So we can actually

[20:32] go to this website and there it is.

[20:35] Cool. So then the final thing to show

[20:37] you is just how easy it is to change

[20:38] things the next time. So here's our main

[20:41] title on the homepage. If we were to

[20:43] come back to cloud here, update the main

[20:48] page title from

[20:51] to

[20:53] easily deploy

[20:55] or easily

[20:57] create AI videos for social media.

[21:02] Something like that. All right. So, it's

[21:05] going to update the page locally first.

[21:07] Remember, we're seeing the version on

[21:08] the web. So, it's going to fix the

[21:11] version here first. Just like that. And

[21:13] then if I were to come back to get and

[21:15] then we were to get status, we're going

[21:17] to see a new file here. Get add. And

[21:20] we'll just do dot get status. We're

[21:22] going to see that's stage now. And we'll

[21:24] do a get commit updated homepage title.

[21:29] Get push origin. There we go. Come back

[21:32] to GitHub. We have the most recent

[21:34] change. And you can see that it's

[21:36] pending here. That means if we come back

[21:37] to Verscell and we do a refresh. All

[21:40] right. So then if we go to our site, we

[21:42] have this now automatically. So just by

[21:44] committing to GitHub, we were able to

[21:46] figure that out. Cool. If you want

[21:48] access to all of these resources and the

[21:49] new VI coding course I'm building out,

[21:51] make sure to jump into the no code

[21:52] architects community. We've got a full

[21:54] classroom including how to make money

[21:55] with AI course on NAN and the Vibe

[21:57] coding course I'm building out. Plus, we

[21:58] have calls and live builds that you can

[22:00] access almost every day. It's an engaged

[22:02] group. I'd love to see you there. Either

[22:03] way, I hope you enjoyed this video and

[22:05] I'll see you on the next