[0:00] If you've never built software but want
[0:01] to start building your own tech startup
[0:03] fast, this video is for you. I've been
[0:05] developing software for more than 30
[0:06] years and made more than a million
[0:08] dollars with AI. And in the next 25
[0:10] minutes, I'm going to show you how to
[0:11] set up a full stack app from scratch
[0:13] using AI, complete with a marketing
[0:15] landing page, authentication, and live
[0:17] deployment to the internet. I'll explain
[0:19] all of the steps that I'm doing so that
[0:20] you understand the tools and how to pick
[0:22] them so that you can keep building on
[0:24] your own. So, if you're tired of seeing
[0:25] everyone else profit from AI, this video
[0:27] is for you. Let's get into it. So there
[0:29] are a few different tools that you will
[0:30] need to install. Install Visual Studio,
[0:32] install Node.js, Cloud Code. How do we
[0:35] add Cloud Code to Visual Studio? So
[0:37] before you go any further, make sure you
[0:40] install these different tools. The
[0:42] plugin is optional cuz we're not going
[0:43] to actually use it today, but I did at
[0:44] least want to show it to you and tell
[0:46] you about it. And then you're going to
[0:47] want to set up these accounts here. So
[0:48] we got Superbase. If I click on this,
[0:50] it's just going to go to Superbase. I'm
[0:52] already logged in. I already have an
[0:53] account. And then you've got your GitHub
[0:54] account as well. So you're going to want
[0:55] to create a GitHub account. After you
[0:57] set up your GitHub account, you're going
[0:58] to want to set up your SSH keys inside
[1:01] of your GitHub account. If you go to
[1:03] your account up here and you come down
[1:06] to settings and if you come down here to
[1:08] SSH keys, then you'll be able to create
[1:10] your SSH keys and it basically allows
[1:12] you to communicate with GitHub from your
[1:14] computer without having a password all
[1:16] the time. And there down here, there are
[1:18] instructions on how to set this up. And
[1:19] then you'll also want a Versell account.
[1:21] So when we actually build out this SAS,
[1:23] we build out the landing page, the
[1:24] authentication, we'll actually need to
[1:26] deploy it. And we're going to use
[1:27] Verscell to do that. And so you can just
[1:30] go to Verscell. I already have an
[1:31] account. It's ready to go. And once you
[1:32] have these, then you can continue
[1:34] forward. And I'm going to explain these
[1:36] different things as I go. So there's
[1:37] going to be some times where the LLM is
[1:40] going to be busy doing things, and
[1:41] that'll give me a chance to come back
[1:43] and actually explain some of these tools
[1:44] in a little bit more detail. So the
[1:46] first thing that we're going to do is
[1:47] we're going to set up our environment.
[1:48] There's a few different ways of doing
[1:49] this, but I think it's probably easiest
[1:51] just to set up the initial project in
[1:53] GitHub. And if you're not familiar with
[1:55] GitHub, this is a platform that allows
[1:57] you to create projects, store code, and
[1:59] work with other developers at the same
[2:01] time where that you can work on the same
[2:02] codebase and then you can resolve
[2:04] conflicts, right? Because if I'm working
[2:05] on code and we're working on the same
[2:06] file and the same line, it's possible
[2:08] that we're working on the same file at
[2:09] the same time and we will need a some
[2:12] sort of mechanism to help us resolve
[2:15] that conflict. So that's all GitHub
[2:17] does. And GitHub is just the hosted
[2:19] version of Git. So Git is actually a
[2:20] command line tool and you would have
[2:22] installed that right here. So when
[2:24] you're in the terminal and I'll explain
[2:25] the terminal a bit as well. When I type
[2:27] git here, there's an actual command that
[2:29] I'm running and I'm working with. Okay.
[2:31] So we're going to go back to GitHub and
[2:34] we'll go ahead and start our SAS. I'm
[2:36] going to go ahead and call this the Hey
[2:37] Genen SAS startup because we're going to
[2:40] be creating a SAS that allows
[2:42] subscribers to log in, create projects,
[2:45] create video projects, generate a
[2:46] script, and then generate a video from
[2:48] that script all automatically with AI.
[2:50] And we're going to use Hey Genen. And if
[2:52] you're not familiar with Hey GenE, it's
[2:54] just a AI company that allows you to
[2:56] just upload a script and generate a
[2:57] video using your own avatar. I'll go
[2:59] ahead and just leave this public here.
[3:01] Create the repository. And now I'm going
[3:03] to need to grab this URL here. This is
[3:06] what we're going to use to clone the
[3:08] repository. So I'm going to go ahead and
[3:09] copy this and then I'm going to jump to
[3:11] the terminal. So if you've never used
[3:12] the terminal before, this is really the
[3:13] way when I was a kid, I would interact
[3:15] with computers all the time, but it's
[3:16] nothing to get overwhelmed with. A Mac
[3:18] has it, PCs have it. It's just a way to
[3:21] access the same system that you're using
[3:23] with the user interface. So if I do an
[3:25] ls here, which is a command that just
[3:27] says give me all the files. I'm in my
[3:28] home directory here, and you can see
[3:30] applications desktop. It would be the
[3:31] same thing if I went to the finder here
[3:33] and I can execute commands, but it's
[3:34] very similar to just working with the
[3:36] UI. It's just you're typing commands and
[3:38] interacting with just commands instead
[3:39] of a guey interface. So once you have
[3:42] this, we're going to copy that. Come
[3:44] back to the terminal. We're going to do
[3:46] get clone. And inside the community,
[3:48] I've got a whole other video that goes
[3:50] into git and how this works. And I'm
[3:52] just going to paste that link that I
[3:53] took from GitHub. And here it's using my
[3:55] SSH keys to connect with GitHub. I have
[3:58] to put in a passphrase just to
[3:59] authenticate. But now we have an empty
[4:02] folder here which is going to be the hey
[4:05] genen SAS. I think I I called it
[4:07] started. I should have said startup.
[4:09] I'll I'll change that after. So it's
[4:10] just an empty directory to start which
[4:12] is fine. Down below here I have a prompt
[4:14] inside of it. I could say hey you should
[4:16] install Nex.js. You should install these
[4:18] different components and everything like
[4:19] that. And it would work but in the end
[4:21] it's going to end up just executing some
[4:23] of these commands. And we don't really
[4:24] need the AI to do that for us, right? We
[4:27] can really just take these commands and
[4:28] run them ourselves. So the first one
[4:30] here is going to initiate an X.js and
[4:32] I'll explain a little bit more about
[4:33] Nex.js in a second. It's going to create
[4:34] an Nex.js project. It's going to add
[4:36] Shad CN which is a library that has all
[4:39] these different cool components, visual
[4:41] components to make your SAS look cool.
[4:42] Then we're going to actually add some
[4:44] different components and then we're
[4:46] going to install some libraries that
[4:48] work with Superbase. So again, like if I
[4:50] told the prompt to do that, it would do
[4:51] that. But there's no reason to have AI
[4:53] do it when we know we need these
[4:55] commands. So these four commands I'm
[4:56] going to run in the terminal. I have a
[4:58] command here that's just all four of
[4:59] them in one line. So I'm going to use
[5:01] this. It'll just make it a bit faster.
[5:03] I'm going to go ahead and open up the
[5:05] terminal and just cut and paste those
[5:06] commands. So now while this is running,
[5:08] the one thing I want to just highlight
[5:09] here, I'm going to jump over to the
[5:11] screen here so I can draw a little bit.
[5:13] The reason why I picked Nex.js instead
[5:15] of the many other solutions is that
[5:17] building a web application is actually
[5:19] pretty complex and you have two major
[5:20] pieces. You have the server. So when I
[5:22] go to this site in our browser, so this
[5:24] is my browser here. When we want a web
[5:27] page, we go to that server and we say,
[5:28] "Hey, we'd like to use your website."
[5:30] And then what it does is it has this
[5:32] little clientside package. It's it's
[5:34] code that actually runs this particular
[5:37] SAS platform in your browser. There are
[5:39] some code that the server is going to
[5:41] send to us when we ask for it. So that
[5:43] then we can interact and run the
[5:45] platform. There's a communication back
[5:47] and forth between the server. So as I
[5:49] draw here, the server has to save all
[5:51] that information. Next.js JS makes it
[5:52] easy because they have one framework
[5:54] that gives you the the client code and
[5:56] the server code and the communication
[5:57] strategy back and forth which just
[5:59] eliminates a lot of things that you
[6:00] would normally have to build on your
[6:01] own. Now people still do build it on
[6:03] their own and you will notice in the AI
[6:05] vibe coding space a lot of people are
[6:07] using Nex.js because of that. So let's
[6:09] check in on our install.
[6:11] The rest of this should be pretty easy.
[6:12] But then you might also ask okay well
[6:14] why are we using Superbase? So this is
[6:15] another platform we're going to use.
[6:17] Another thing that every SAS application
[6:19] needs is it needs user login right?
[6:21] Right? So it needs an authentication
[6:22] system. That authentication system needs
[6:24] to be in the code here. This is
[6:26] something that's very important, right?
[6:27] Cuz if it's not secure, you know, people
[6:29] can hack your site. What Superbase did
[6:30] is they created a platform which has
[6:33] several different things inside of it.
[6:34] So people just talk about Superbase as
[6:35] if it's a thing, but inside of Superbase
[6:38] is not only a database, which we use to
[6:40] save all the information on the server
[6:42] side. So we've got this, but it also has
[6:44] that authentication system and it has a
[6:46] few other things as well. It has an
[6:47] email system because if our SAS needs to
[6:49] send email, there's quite a few
[6:50] different utilities every SAS needs in
[6:53] order to function properly. So that's
[6:55] all Superbase is doing and that's why
[6:56] we're using these specific frameworks.
[6:58] Cool. So we're ready to go. So now we're
[7:00] going to get into actual coding. So I
[7:02] have the terminal open. You can open up
[7:03] multiple terminals like this. So we have
[7:06] two windows. Or you can actually just
[7:08] create additional tabs. I'm going to
[7:10] show you in a minute, but you might also
[7:11] be running Cloud Code and you might also
[7:13] be running your site and testing it with
[7:15] other commands. What I like to do is
[7:17] just create a new tab so that I can work
[7:19] on multiple things at the same time
[7:21] without having to manage a bunch of
[7:22] windows. Now, I'm going to run Cloud
[7:24] Code in the terminal here. Remember
[7:26] before earlier I talked about how you
[7:28] could run Cloud Code here inside of
[7:30] Visual Studio, but this plugin and
[7:32] running Cloud Code here are not exactly
[7:35] the same thing. I found that actually
[7:37] running it in the terminal has better
[7:38] performance and the plugin just doesn't
[7:40] perform as well. There might be some
[7:41] situations where I use the plugin just
[7:43] because it's nice that it's integrated.
[7:44] Recently, I've just been using the
[7:46] terminal and it works a whole lot
[7:47] better. Okay, first thing I'm going to
[7:49] do here is I'm going to go ahead and pop
[7:51] open cloud code and now I'm inside of
[7:54] the directory. Okay, and then it's going
[7:56] to ask for permission. We'll go ahead
[7:57] and give it permission. Now, I did
[7:59] mention here to run /init. So, I'll just
[8:01] talk about what this is. So, if I type
[8:03] /init, what that's going to do is it's
[8:05] going to evaluate the codebase. Let me
[8:07] just jump over to Visual Studio here and
[8:09] I'm going to open up the folder so we
[8:10] can see all of the files that we've
[8:13] already created. So if you notice here
[8:14] on the the left hand side, we have our
[8:16] directory structure. And if I were to
[8:18] come to the command line here, come over
[8:19] here. But if I were to do an ls here,
[8:22] we're going to see all the same things
[8:24] right here again. So again, the terminal
[8:26] is just a, you know, more rudimentary
[8:28] way of accessing your system, but the UI
[8:30] is seeing the same thing here. And so
[8:32] what the slashinit command does, if I
[8:35] were to type this right now, I think I'm
[8:36] I'm gonna wait. But if I type this, what
[8:38] it's going to do is it's going to create
[8:39] this cloud. MD file, which basically
[8:42] describes the codebase in detail. When
[8:44] cloud runs from time to time, it already
[8:46] has an understanding of what's going on.
[8:48] But I think I'll just I'll wait till the
[8:50] end. It's kind of just a judgment call.
[8:51] So the next thing I'm going to do is I'm
[8:53] going to install the Superbase MCP. So
[8:55] I'm going to jump over to M uh to
[8:56] Superbase. I've just created account.
[8:58] And again, it's totally free. I already
[9:00] have one project here or this is my
[9:02] organization. So I'm going to click on
[9:03] my organization. I'm going to create a
[9:04] new project
[9:06] call the hey genen
[9:09] SAS startup. Create a project or a
[9:12] password. Create new project. And now
[9:14] what's cool is up in this connect button
[9:16] here. They make it really easy to
[9:18] install the MCP for cloud code
[9:20] specifically. So I'm going to come down
[9:21] here for client. I'm going to pick cloud
[9:23] code. And it just gives me this command
[9:25] I can come back to the terminal and run.
[9:26] So I'm going to jump back out of cloud
[9:28] code. I'm going to install this MCP.
[9:30] It's going to connect it to my
[9:32] Superbase. And now if I type cloud
[9:34] again,
[9:35] it's going to ask us if I want to use
[9:38] that MCP. And now if I type MCP, we can
[9:41] see that I have that MCP. Now it needs
[9:44] authentication.
[9:46] So I'm going to go ahead and
[9:47] authenticate. It's just going to open up
[9:48] a window and then I can authorize it.
[9:50] And if I come back to cloud code. So now
[9:53] if I type MCP,
[9:55] we've got our superbase and it's
[9:57] connected and we can view the tools. So
[9: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