Deploy Your Google AI Studio Website in Under 5 Minutes — No Code!

Building a web app using Google AI Studio is very easy. But to deploy it live on the internet can be a bit tricky because you have to find the right hosting platform, the process should be simple, and it should be affordable. I have a one-stop solution for all these problems, and today I'm going to show you how to host your web app using Hostinger. So, we are going to do this in just three simple steps. So, without any further ado, let's begin. The first step is to get a plan on Hostinger. I've given a link in the description below, and if you click on it, it'll take you to the homepage of Hostinger. Now, here if you click on view plans, you'll get two different plans. So, you can choose the plan that suits you the best. I'll just choose this one, and you'll get this page. Here, you can choose how long you want the hosting for. I'll just choose 24 months, and at WL, we provide a coupon code for you, which is WL20. You can use that to get a discount on your hosting plan. So, if you click on have a coupon code and type WL20 and click on apply, you'll get a discount on the entire payment. Okay. Now, if I click on continue, we'll get the payment section. Now, just fill in your billing details and click on submit payment. And now, you have to enter the card details. So, let's do that. And finally, click on submit payment. Okay, we have successfully made the payment, and once the payment is complete, you'll reach this Hostinger dashboard or the HPanel. And with that, step one is completed. We can move on to step two, which is to add the web app to Hostinger. So, to do that, let's go back to Google AI Studio. And this is the web app that I built. It's a health tracker web app, and I'm going to upload it initially to GitHub. Now, GitHub acts as a middleman between Hostinger and Google AI Studio. It connects both of these platforms so that any changes you make here will be updated automatically in the repository, and those changes will also be visible when the website is live on the internet. So, to upload the web app to GitHub, just click on publish here. Now, scroll here and click on GitHub. So, first we have to give this repository a name. So, I'll just type in habit tracker app. And then, you have to give a description. And finally, you have to choose the visibility. I'll just keep it as private for now and click on create GitHub repository. And finally, when you're done, just click on stage and commit all changes. Now, our web app has been successfully uploaded to the GitHub repository, and we have to upload that repository into Hostinger. So, let's go back to the hosting dashboard. And here, click on websites. Now, click on add website. Here, click on Node. js web app. Hostinger will ask you to give a domain for your website. If you have a domain, you can type it here, but for now, I'll just click on use temporary domain, and I'll change it later. Now, it is asking us if you want to upload the files manually or we have to continue using GitHub. Since we already uploaded the web app to GitHub, we'll click on continue with GitHub. All right, here we have the repository where we uploaded our web app. Just make sure you select that and click on continue. And with that, we have successfully uploaded the web app to Hostinger, and step two is completed. Now, let's move on to step three or the final step, which is to publish the web app. Now, before we publish the web app, we have to review a bunch of settings and see if everything is fine. Now, here we have the test URL where we deployed our web app. This is a temporary URL. You can change it to your own domain whenever you want. Now, here we have the GitHub repository Hostinger pulled in. I have the habit tracker app, and make sure you selected the right repository before you move on. Now, here we have three important fields. First is the framework preset. It tells you what framework you used to build the app. Mine is Express, and I'll leave it as it is. If you're a beginner, don't touch this or don't change this because Hostinger is almost always right about this. Next one is the branch. Now, we've updated all the app's files in the main branch. You don't have to change this. This is selected by default. Now, any changes you make on the web app, it will automatically get updated in this main branch. And the final one is the Node version. Hostinger auto detects the Node version, which is more compatible for your application. This is also almost always right, but if you have any preferences, you can change that as well. This is the root directory. By default, it is selected as dot slash. I would suggest keep it as it is unless you have a subfolder inside your app. Most of the time, it works, so you don't have to change it. And below that, we have the build and output settings. Hostinger knows how to build an Express app by default, so you don't have to make any changes there, too. And finally, we have the environment variables. Now, this is very important. If you're building a web app that uses secret keys like database URL, or if you're building a web app that uses API keys, then you have to add them here by clicking on add. But you can leave it as it is if not, or else you can add them later, too. And finally, when you're done with everything, you can just click on deploy. As you can see, Hostinger is deploying the app live on the test URL, and you can see the percentage right here. So, guys, we have successfully deployed our web application, and this is the dashboard again. So, here you can see

the test URL. If I click on it, you can see it's taking us to the web application. So, let's test and see if it's working really well. Let's click on access your plan. And yes, my health tracker app is live, and it is working really well. So, there you have it, guys. We have successfully deployed our Google AI Studio web application using Hostinger in less than 7 minutes. Let me know in the comments below what you think about this, and for more videos like this, make sure you subscribe to Website Learners. And until then, see you guys in another video. Take care. Bye-bye.