‫So, now, let's use our GitHub repo that we just created
‫to set up a very simple continuous integration on Vercel,
‫which is another very popular free,
‫at least for small projects,
‫and also very easy-to-use
‫hosting provider for React applications.
‫But, first of all, we could actually
‫also set up a continuous integration here on Netlify.
‫So for that, we would again, add a new site,
‫and then here, this time, we would select
‫"import an existing project."
‫And so then, here it says exactly
‫what I mentioned in the beginning.
‫So basically importing an existing project from a Git repo.
‫And so then, here you would connect your GitHub account
‫and then just follow these steps.
‫So if you want, you can do this here on Netlify.
‫That's very easy as well.
‫But I just want to show you another alternative.
‫And so that is
‫Vercel.com.
‫So this is actually the company that created
‫the Next.js framework.
‫And so they're specialized on hosting Next.js applications,
‫but we can of course, also,
‫very easily host, basically,
‫vanilla React applications here.
‫So, you can just sign up for a new account,
‫and then,
‫well, here you just choose the hobby option,
‫then your name, and,
‫yeah, then this is the part
‫that I wanted to show you.
‫So here, you should now actually
‫use your newly created GitHub account
‫because that will then make it really easy
‫to set up the new project that is hosted on GitHub.
‫So just sign up here,
‫and I will meet you once you're done with that.
‫So, this is what Vercel's dashboard should look like,
‫or maybe in the future, again, it will change,
‫but somewhere you will find a button that says "Add New."
‫So here we want to add a new project, and then it is as easy
‫as selecting one Git repo from this list.
‫So here should be all of your repos.
‫And so, you can just select this one that you want
‫and then configure it a little bit.
‫So here, the framework has automatically been figured out
‫as Vite, right?
‫So that's exactly what we used to build this project.
‫And then let's take a look here at the Build
‫and Output settings.
‫So here is where we specify that build command.
‫And so here we can see again "npm run build,"
‫which is exactly the command that we used earlier
‫to create or bundle, so to create or production build right?
‫And so, now, instead of having to do that manually,
‫Vercel will do that for us each time that it detects
‫a change in the GitHub repo.
‫And so that's why we call this a continuous integration.
‫So, again, with this project set up,
‫each time that we commit something new to our repo
‫and then push it to get up, Vercel will automatically detect
‫that a change has happened, will run this command,
‫and then deploy our application from the disk folder.
‫And so here we can just leave all
‫of these defaults and click on "Deploy."
‫And so you'll see that it takes, like,
‫one minute maybe to deploy this application
‫to Vercel.
‫And... beautiful!
‫So we are done.
‫We can see our confetti raining here.
‫And so with this
‫we have our project now successfully deployed
‫to Vercel as well.
‫So let's then continue to this project dashboard
‫where we can actually see the domain.
‫And Vercel actually chose this domain based
‫on the name of the repo.
‫So here we already have this nicely named domain.
‫So, basically, exactly the same as earlier with Netlify,
‫but here it is, dot Vercel instead of dot Netlify,
‫but our project here just works in the exact same way.
‫Alright?
‫And so if you wanted to change this URL
‫then you could do so right here in the settings.
‫And then you can also change everything else that you want
‫about the project here.
‫So this is actually, in my opinion, the preferred way
‫of deploying a project
‫because it just makes it so simple
‫to push updates to our application.
‫Alright? And that does it
‫for this video and for this application as well.
‫So now we are really finished.
‫And so once again, huge congratulations
‫for making it this far
‫and for achieving this really important milestone
‫of having such a large
‫and real world application now deployed
‫to a real production server.
‫So make sure to share this with all your friends
‫and family and also tell them maybe
‫where you have learned how to build something like that.
‫And then I see you soon
‫in the next video, in some next section.