Deploy your Vibe Coding Projects for Free | Using Vercel & Netlify

Hello everyone and welcome back. As you know, white coding is all about using AI tools to turn your English prompts into working apps and that too within minutes. But here's the catch. Building with AI is just step one. To actually share your project with the world, you need to deploy it online. In this tutorial, I'll walk you through deploying a project on platforms like Versel and Netleifi step by step. So what are we even waiting for? Let's get started. So here's the plan. We'll take a sample AI generated app which is already pushed on GitHub. We'll use GitHub as our source control and deploy this app on platforms like Versel and Netlifi. And to do this, we'll just need a few tools. GitHub where our project lives. Versel, which is one of the most popular platforms for front-end hosting. Netifi, another big player in the same space. and our example project. So in our case, we have an AI generated to-do list tab which was created on lovable. If you have a project too, just make sure it is pushed on GitHub before you start this video. Here's my todo app repository on GitHub. As you can see, it's an application with all the standard files like package JSON with the dependencies, a source folder with the components, a public folder with assets, and a readme file as well. This is a basic to-do list where you can add tasks, mark them complete and delete them. I generated this using which is a wipe coding tool again. And now that we have the project here, it's time to deploy it. First let's deploy this on Versal. Now I'm already logged into my Versal account. And this is how the dashboard looks like. Since I'm already authenticated with GitHub, I can directly import repositories from there. So let's go to add new and project. And this is where the magic begins. So as you can see all my GitHub repositories are visible over here. And we can also search them. This is the one that we require for now to do app. So let's click on import. As you can see, Versel has automatically detected some of the things. For example, framework preset. It automatically detected that it belongs to white. Now, let me explain you some terms like root directory. Here it means that it is using the root of my repository. Then there are build and output settings. Build command over here will compile the app into static files. Output directory is where the app puts the compiled files. Install command. This is what will install all my dependencies from package JSON. All of these settings are exactly what I need. And this is why wipe coding works so well with platforms like these. They understand modern web frameworks out of the box. Now I do not need to configure anything manually as you can see. So I'll click on deploy to start the deployment. And there we are deploying. Wasil is now working through several steps like for example it is cloning my repository from GitHub. Then it'll analyze the project structure to confirm the framework and it'll also install dependencies. As you can see it's running over here. And these build logs are really helpful. You can see exactly what's happening. Excellent. So the deployment was successful and that too within a minute and let's go to dashboard and as you can see vers has given me this URL. This is the one where our app is hosted. So let's click over here this URL. Perfect. We can also test our app. Let's say I have to buy groceries. It did add a task. I can select it. I can delete it. It works really well. So everything works perfectly and now it is also accessible to anyone worldwide. So we have just deployed our total list app on Versel. Next let us deploy the exact same project on Netlifi. So here's my Netleifi dashboard. Again, since my GitHub account is already connected to Netlifi as well, I can import repositories directly. So I'll click on import from Git and select GitHub. Perfect. Here are all of my GitHub repositories. Let's search for the to-do list tab that we need and let's select it. So let's start the deployment by giving

it some details. For example, the name I'm giving is bright to-do list app. And as you can see, some of the settings have already been automatically detected by Netlifi. For example, the branch to deploy is main. That's the main branch where the latest code lives. There's a build command which could be same as versel or there could be just a slight change. There's a publish directory. This is where the compile files will be located. Functions directory currently is empty because we are not really using serverless functions for this app. As you can see the settings are slightly identical to what versel detected. So which shows how standardized this modern web development has become. Both the platforms understand the projects automatically. Once that is done, let's click on deploy. So, Netlifi is now running through the same deployment pipeline if you remember, cloning the repository, installing the packages and running the build command. We can also watch the build process in real life through these logs. And there we go. Our site is now live on Netlifi 2. They have generated this unique URL for my deployment. Did you notice how fast this was? So, both platforms completed the entire deployment in under a minute. Let me open this URL. Let us test it once again. It adds the task. We can select it. We can mark it completed. We can delete it again. So perfect. Here's the exact same to-do list app, but now running on Netlify working the exact same way. So now I have the application deployed on both the platforms, Versel and Netlifi. This demonstrates the power of modern deployment platforms. Both Versel and Netlifi automatically detected the framework. They configured the correct build settings. They installed dependencies and built the project. They deployed to a global CDN for fast worldwide access. And the beautiful thing is whenever I push new code to my GitHub repository, both these platforms will automatically rebuild and redeploy my app. So if I add any new features or fix the bugs, they'll go live automatically. Both platforms make it incredibly easy to go from AI generated code to a live production website in just a few clicks. No server management, no complex deployment scripts. Just push your code and deploy. Thanks for watching this video and happy white coding.