This is the complete guide to building
and launching real web applications
using Google AI Studio and Firebase.
Whether you've never used AI Studio
before or you already have a project and
you're not sure what to do next, this
video is for you. Maybe you're building
a website, a web application, or a SaaS
idea you've been thinking about.
Whatever it is, I've got you covered.
And if any of this sounds complicated,
don't worry. I've taken my time building
this tutorial to make sure it's as easy
to follow as possible, even if you've
never done anything like this before.
So, here's the road map for this video.
We'll start by building the app in
Google AI Studio. AI Studio is a free
tool where you describe the app you want
to build and it generates a working
project for you. No coding needed.
During the build, we'll enable Firebase,
which is what gives your app a real
working back end. It manages things like
user accounts, a database, and file
storage. And it's also free to get
started with. From there, we'll make
sure everything is configured properly,
test the app, fix anything that isn't
working, and even set up an admin
dashboard so you can see all of your
users and data in one organized place.
Then, we'll deploy it live on a real
domain using hosting. [music] That's the
one part of the setup that isn't free,
but I'll walk you through a really easy
and affordable setup for this later on.
Now, one of the hardest parts of putting
this video together was figuring out
what app to actually build as the demo.
Because this video isn't about building
a one specific thing. It's a video
that's meant to teach you how to build
your own web application with a working
back end. So, the app I chose to build
in front of you had to be the right one.
It had to be simple enough to follow
along with, but complex enough to teach
you everything you need to know. And
after a lot of thought, here's what I
came up with. This is a web app called
Client Vault. It's a simple file portal
that a freelancer or designer would use
to let their clients log in and upload
files like videos, documents, or images.
And I chose this specific project for a
reason. Let me show you what it can do.
In this app, a user can create an
account with their email and password,
sign in and sign out. So, every user
gets their own private space inside the
app. If they sign out and come back
later, all of their data is still right
there. Nothing ever disappears. They can
upload files, and those files are stored
securely in the cloud. They can view
them, download them, delete them, and
only they have access to their own
stuff. And all of this works together.
>> [music]
>> Every button, every page, every feature
is talking to the back end behind the
scenes to make it all function. Now,
this isn't just a design or a static
website. This is a real web application.
And everything I just showed you comes
down to four things: user
authentication, a database, file
storage, and connecting it all to the
UI. Those are the four pillars of
building any real web application, and
they're exactly what I'm going to teach
you in this video. We'll set each of
these pillars up one by one, so that by
the end, you have a fully working web
application. And these pillars are
really important to understand because
they apply to everything you build, not
just this one project. That's why I
chose to build Client Vault as the demo
for this tutorial. It's a simple app,
but it relies on all four of these
pillars to function, and it's really the
perfect project to learn the core
concepts behind building any real web
app. So, whether you follow along with
my build or use it as a guide for your
own project, you'll be able to take what
you learn here in this video and apply
it to anything you create next in AI
Studio.
All right, let's go ahead and get
started with building the web app.
First, head over to Google AI Studio. If
you've never used it before, just go to
the link I'll leave in the description
and sign up with your Google account.
It's completely free. So, I'll go to the
top right here and click on get started.
I'll select my Google account right here
and enter my password.
And then once you're signed in, you'll
see the main dashboard right here. All
right, so before I type in my prompt,
let me show you how I like to format it.
Because the way you structure your
prompt makes a huge difference in the
quality of what AI Studio gives you back
on the first try. And this format works
for any project, not just the one I'm
building. I break every prompt down into
four parts. The first part is what it
is.
>> [music]
>> This is where you give your app a name
and describe what it does in a sentence
or two. You're giving AI Studio the big
picture so it understands the overall
purpose of what you're building. The
second part is what it needs. This is
where you list out the specific pages
and features your app should have.
Things like a login page, a dashboard,
specific buttons, whatever your app
requires. The more detail you put here,
the better your result is going to be.
The third part is how it looks. This is
where you describe the design, the
colors, the layout, the overall feel.
You don't need to be a designer for
this. Just describe it in plain terms.
AI Studio will take that and turn it
into something that actually looks
really good. And the fourth part is
back-end features. This is where you
tell AI Studio what your app needs to
function behind the scenes. If you
remember the four pillars we talked
about in the intro, this is where they
come in. But if you're just starting out
and you're not totally sure what your
app needs on the back end, that's okay,
[music] too. If you've done a good job
describing your app and its features in
the earlier parts of the prompt, you can
just ask AI Studio to set up a back-end
for you and figure out what your app
needs to function. But whenever you can,
being specific about what you need will
always give you a better result. And by
including this section in your prompt
from the start, AI Studio will set up
Firebase for you automatically. This is
the step that turns your project from
something that just looks good into a
real working web application. All right,
so to recap what we just covered here
before we jump back into AI Studio,
here's the formula for writing any
prompt. First, describe what your
project is, what it needs, how it looks,
and the back-end features that it should
have.
>> [music]
>> Structure your prompt just like this for
any project you make in AI Studio, and
it's going to handle the rest for you.
And I want to quickly mention here that
if any of this feels overwhelming, I've
actually gone ahead and created a full
Google AI Studio Firebase guide that's
linked in the video description. So
right now, I'd recommend going down to
the description and opening up that
guide in a new tab. All right, so now
let's switch back over to AI Studio, and
I'll put in my prompt right here.
Then I'll scroll up to the top, and
let's start here at the beginning. I
have the what it is part here. I'm
telling AI Studio that I want to build a
web app called Client Vault. It's a
client file portal where freelancers and
designers can let their clients securely
upload and manage files. So here I'm
giving AI Studio the big picture in just
two sentences. And below this, I have
what my project needs. I'm listing out
all of the essential features. And at
the bottom here, I also include this
line. This says to include any other
features or functionality needed to make
this app work properly that aren't
listed here. I like to include this line
because there's always going to be small
things that you might not think to list,
but AI Studio will know that they're
needed. So you give it the essentials
and let it fill in the gaps. And then
below this, I describe how my app should
look. Here I'm just giving some general
guidance regarding the design of the
project. It doesn't have to be anything
super complicated. And then at the
bottom here, we have a big one. This is
where we list out the back-end features
that we want. Here I'm telling AI Studio
that I need user authentication, a
database, file storage, and security
rules. These are the four pillars we
talked about in the intro. And by
putting them right here in the prompt,
AI Studio knows to set all of this up
for me automatically. So with our prompt
ready to go, I'm going to go to the
bottom right here and click on build.
Now here on the right-hand side is going
to be your preview panel. And then on
the left side here, you'll get a live
look at what's happening regarding the
build of your project. You also may be
asked questions regarding your project
here on the left or on the right. So I'm
going to wait for a moment here and see
what happens next.
So right here we're being asked a
question about how we want the design of
our project to look. We have a few
different options here. I can click on
the arrows to look through each of them.
And I think I'll go for this one right
here. So I'll click on select this
design.
And I'll wait for a few moments and see
if AI Studio needs me for anything else.
Okay, so now at some point during this
process, you'll see this pop up here
that says enable Firebase. This is AI
Studio recognizing that your app needs a
real back end, and it's asking for your
permission to set it up. Go ahead and
click on enable Firebase.
This is going to create your Firebase
project, set up your database, configure
authentication, and connect everything
to your app. All of that happens
automatically just by clicking this one
button. Now, let's wait for a few more
moments here and see what happens next.
And once everything is done, AI Studio
will now give you the initial build of
both your front end and your back end.
And now, you might be tempted here to
jump in and start testing your app and
looking around at the design and all of
the pages, but I'd recommend holding off
on that for now. The first thing we want
to do here is jump into the back end and
verify [music] that everything is set up
and connected properly. AI Studio set up
a front end and a back end for us, but
we want to make sure everything on the
back end side is configured the right
way before we start making any changes
to the front end. That way, once the
back end is established, all of the
changes you make going forward will be
on the final version of your app, and
nothing is going to get overwritten or
broken. So, we'll take care of that
first. Now, to access your back end, you
need to go to the Firebase console,
which is on a separate website. So, let
me show you how to get there and how to
navigate it so you can start making the
changes that we need.
To access our Firebase console, go to
the top and open up a new tab.
And then, you'll go to
console.firebase.google.com.
I'll leave this link in the description
as well. So, I'll go to this link here.
And then, on the right side, you'll see
your project right here. Go ahead and
click into it.
Close out of this.
And here is your Firebase console. This
is where you can see and manage
everything that's happening behind the
scenes of your app. Stuff like your user
accounts, database, file storage,
security rules, all of that lives right
here. Anytime you need to check on
something or make a change to your back
end, this is where you'll go. Now, the
first thing that we need to do here is
check authentication. Let's go over to
the left side right here and hover over
security. Click into authentication.
From here, go to the top and click on
sign-in method.
What you'll see here is a list of
sign-in providers. AI Studio
automatically enabled Google sign-in for
us, which is great. But, if you want
your users to be able to sign up with an
email and password, which most apps
need, we have to turn that on ourselves.
So, over here on the right side, click
on add new provider.
And here, click on email and password.
And we'll enable this right here.
And click save.
And now, with that change made, our
users will be able to sign up on our web
app using their email and password. The
second thing that we'll set up here is
file storage. On the left side menu,
look for databases and storage, then
click into storage here.
When you open this for the first time,
Firebase is going to ask you to upgrade
to the Blaze plan. Don't worry, because
this is completely normal. Firebase
storage requires a billing account to be
on file before you can use it. But,
here's the important thing to
understand. You're not signing up for a
paid subscription. Firebase's Blaze plan
is pay-as-you-go, which means you only
get charged for what you actually use
beyond the free tier. And the free tier
is actually really generous. You get 5
gigs of storage, 1 gig per day of
downloads, and 50,000 read operations
per day. For context, you would have to
be running [music] a pretty active app
to even come close to those numbers. For
learning, building, and testing, you're
most likely not going to pay a cent. So,
let's click on upgrade project.
Then, scroll down and click on create a
cloud billing account.
Click on agree and continue.
And then here you'll need to fill out
your contact information and payment
method.
And once you're done with that, click on
start free.
Now, depending on your payment method,
you might see a pop-up here asking for a
one-time $10 prepayment. This is just
Google verifying your payment method and
it's not a charge for Firebase. Once
it's credited to your account, you'll
also get free trial credits. And if you
ever close your billing account, the $10
is refundable. So, I'll click on okay
right here.
Now, here Firebase will give you an
option to set a billing budget. I'd
recommend setting this to something low.
Something like $5 will work.
That way if your usage ever gets close
to that amount, Firebase is going to
send you an email so there's no
surprises. You can think of this as a
safety net. Let's go down and click on
continue.
And we'll scroll down right here and
click on link cloud billing account.
And here I'll scroll down and click on
done.
Then once everything is set up, it's
going to ask you to set up a default
bucket. A bucket is just where Firebase
stores all of your uploaded files. Think
of it as a folder in the cloud that
holds everything your users upload to
your app. We're going to choose the no
cost location option and go down and
click on continue.
And then here we want to make sure that
we start in production mode and then
click on create.
Okay, so now we just set up our storage
bucket. This is where all of the files
that your users upload are going to be
stored. And if you click on the rules
tab here at the top,
this is where the security rules for
your file storage live. We'll come back
here a little bit later on in the video
and update these once we have a few more
things set up. So, to recap everything
that we just did before we move on, we
successfully set up our storage bucket,
and earlier we enabled email and
password authentication. There are some
other things in the Firebase console
that we need to come back to a little
bit later on in the video, but for now,
these are the two things that we had to
get done here before we can test our
app. Now, let's go ahead and head back
over to AI Studio and let it know what
we just configured here in the Firebase
console. That way you can make sure
everything in our app is properly
connected to the changes that we just
made. So, I'll go ahead and head back
over to AI Studio here.
And I'll go ahead and enter this prompt.
It says, "Here's what I've configured in
the Firebase console. The first thing is
that I enabled email and password
authentication as a sign-in provider,
and second, I set up a Firebase storage
with a default bucket in production
mode." At the bottom here, I say,
"Please make sure the app's file upload
feature is fully connected to Firebase
storage, and that the email password
authentication flow is working correctly
for both sign-up and sign-in." So, here
what we're doing is giving AI Studio the
context of exactly what's changed within
Firebase on the back end. And I would
highly recommend doing this anytime you
change anything within the back end of
your app using Firebase. You just want
to give AI Studio the context of what's
changed. That way it's able to work
through the code for you and make sure
everything is working properly. So,
let's go ahead and send this prompt
here.
And let's wait for a few moments and
make sure everything is updated
properly.
Awesome. Now, as you can see right here,
it appears that everything is good to
go.
All right. So, the next step is for us
to jump in and start testing out our web
app. But first, here's where we are so
far. We now have a front end built. AI
Studio built it all for us. That's our
app's interface, the pages, the buttons,
the layout, everything the user sees and
interacts with. That's done.
>> [music]
>> We also have a database set up for our
back end. That was created for us
automatically when we clicked enable
Firebase during the build. The database
is what stores all of your app's data,
user information, file details, and
anything else your app needs to
remember. We have email and password
authentication enabled, so users can
create accounts, log in, and log out,
and we have storage configured, which is
where all of the actual files that users
upload are going to live. And because we
have that database in place, all of
this, every account that gets created,
every file that gets uploaded, every
piece of data your app collects, all of
that is going to be stored and exist
permanently. Now, in the intro, I
mentioned the four pillars of setting up
a real back end for any web app. Here's
where we currently are. The first
[music] three pillars, which are user
authentication, a database, and file
storage, are now set up. We've now
arrived at the last pillar, which is
connecting everything to the UI. And
this one is a little different from the
first three, because it's not something
that you just toggle on and it works. It
changes depending on what you're
building. Every app is different, and
the things that need to be connected and
the problems you might run into will
vary depending on your project. But,
here's the general idea for how this
works with any project. We need to go
into the app, test every feature, and
take note of anything that isn't working
the way it should. In your case, maybe
sign in doesn't work. You can note that
[music] down. Maybe a button isn't doing
what it's supposed to do. You can add
that to your list. Maybe files aren't
uploading or data isn't saving.
>> [music]
>> Whatever it is, just make a note of it
as you go. Then, once you've gone
through and tested everything, you go
back to AI Studio and work through your
list one issue at a time. You just
describe the problem, let AI Studio fix
it, test it again, and then move on to
the next one. And you want to keep it to
one issue per prompt, so that way each
fix is clean and doesn't accidentally
break something else. Now, if you run
into something that is completely
blocking you, like you can't even sign
in to your app, you'll want to go ahead
and fix that as a prompt right away, so
you can get past it and keep testing the
rest of your app. You're going to watch
me go through this process for my app.
And the specific problems I run into are
are going to be different from what you
run into, depending on what you're
building. But, the overall approach is
exactly the same. You test things, you
note down what's not working, and you
work through it using prompts with AI
Studio. That's the process, and it's
honestly super easy. All right. So, now
let's go ahead and begin testing our
app. To begin testing our web app, let's
go ahead and maximize the preview panel.
Click on this button right here.
And this is what my app's login screen
looks like. Obviously, yours is going to
look slightly different. In my case, I
don't have an account yet, so I'll click
on create free account.
Now, before you enter anything here, the
first account you create on your app is
going to become your admin account later
on in this video. So, make sure you use
the email and password that you actually
want to use long-term as the owner of
this app. We'll be using this first
account as a regular test account for
now, but later on we'll give this
account admin privileges so you can see
all of your users and all of their data
in one place. So, just keep that in mind
when you're choosing your email and
password here.
I've gone ahead and filled out my
personal information here, so I'll go
down and click on get started.
All right. Now, we're inside of our app.
So, your dashboard is probably going to
look different from mine, depending on
what you built. You'll probably have
different tabs, different features, and
overall a different layout, and that's
totally fine. The important thing is
that you're logged in and you can see
your app's main screen. This right here
is what your users are going to see
every time they use your app. Now, we
want to test every core feature to make
sure it's actually working. For my app,
that means testing file uploads,
downloads, and deletes. For yours, it
might be something different depending
on what your app does, but the process
is the same. Go through each feature one
by one and make sure it does what it's
supposed to do. So, I'll test mine. I'll
start by uploading a file here. I'll
click on browse locally.
And I'll try uploading this file right
here.
I'll scroll down. And right here, you
can see it appears that nothing actually
uploaded. So, here's how we're going to
troubleshoot something like this. I'll
go to the top right and close out of
this.
And we'll go back over to the left side
here. If you find that there's anything
not working within your app, you'll want
to work with AI studio to give it
feedback and have it make those fixes
for you. So, right here I'm going to
say,
"It appears file uploads aren't working.
Troubleshoot
this problem and fix it." Then I'll go
ahead and send this.
And now we'll let AI studio troubleshoot
this problem and fix it for us. So, I'm
going to wait here for a few moments and
wait for those fixes to be done.
All right, so here's what AI studio came
back with. It says that the application
is now fully connected to both Firebase
storage and Firestore, which is going to
allow users to actually upload their
files. In some cases, you may see this
pop up right here, where it says that
there were errors running the code. If
this pops up, just click on fix.
And now we'll wait here for a few more
moments to let those fixes take place.
All right, now as you can see right
here, it says that the fixes have been
completed. So, let's go ahead and try
uploading our files once again. I'll
maximize the window here.
And as you can see right here, we have
one file. So, if I scroll down, it looks
like it actually did get uploaded, but
it just wasn't appearing. So, that's
kind of the whole idea here after you
create your first version of your web
app. You create it, test everything out,
note down anything that's wrong, and
then go through and make those changes
one by one. So, just to make sure
everything is working properly, I'll
click on browse locally again.
I'll try uploading the file again here.
And I'll scroll down.
And there it is. I'll also click on the
download button to make sure that's
working.
And that's working great right here.
I'll close out of this.
And let's also try deleting the file.
I'll click on the trash can icon.
Click on permanently delete.
Awesome. So, that means that everything
is working properly with our database
for file uploads. Now, let's test one
more important thing. In the bottom left
here, I'm going to click on sign out.
And then I'm going to log back into my
account.
Sign back in.
So, we just signed out and signed back
in, and all of our data is still right
here. That means our database is working
and storing data so that it persists for
your users. Authentication is working
because we were able to create an
account, sign out, and sign back in
without any issues. And file uploads are
now working, too. They weren't before,
and that's exactly what the connecting
everything to the UI step is all about.
We had to go in, test things, and find
what wasn't working, and then use AI
Studio to fix it. So, now that
everything on my app is functioning
properly, and the front end and back end
are communicating the way they should,
that means all four pillars are
established. My app now has a real
working back end.
>> [music]
>> Now, let's jump into the next step,
which is setting up your admin account.
Okay, so right now every user who logs
into your app sees their own data and
their own files. That's exactly how it
should work for your users. But as the
person who built and runs the app,
you're going to want a way to see
everything. You want to see all of your
users, all of their data, and all of
their activity in one place. And that's
what an admin dashboard is for. This
applies to any app you build. If you're
running a SaaS tool, you'd want to see
all of your customers. If you're running
a course platform, you'd want to see all
of your students. For my app, I want to
be able to log in and see all of my
clients and everything they've uploaded
from one screen. To set this up, we need
to do two things. First, we need to tell
AI Studio which account is the admin.
And second, we'll need it to build a
separate view that only the admin sees.
To find your admin account's user ID, we
have to go back to the Firebase console.
So, I'll open that here at the top.
Then click into authentication.
And then make sure you're in the users
tab. Here you'll see the account that
you created earlier. And then you'll see
the user ID right here. Click on the
copy button.
And then switch back over to AI Studio.
I'll minimize the preview panel here.
And then here we'll send another prompt
to AI Studio. I have a prompt that you
can copy and paste for this that's in
the guide linked in the description. So,
I'm going to copy that over from the
guide.
And then I'll paste that in right here.
I'll scroll to the top here. And right
here I already have my admin user ID
pasted in. But you'll want to replace
this with a user ID that you copied from
Firebase a moment ago. And I also want
to mention here that this prompt for
adding an admin dashboard to your app is
just a starting point. Absolutely feel
free to adjust this prompt. You can
easily just remove or add different
things to it depending on what you want
in your admin dashboard. So, with this
prompt ready to go, I'm going to go
ahead and send it.
And then we'll wait here for a few more
moments and let AI Studio do its thing.
All right, awesome. And now the next
thing that we need to do is head back
over to the Firebase console and make
sure that the security rules were
updated. Let's go back over to the
Firebase console.
And then go down to databases and
storage and find Firestore. We'll click
in right here.
And then click into security.
And then if I scroll down right here,
you'll see this block right here
that says function is admin. And then on
the next line it has my user ID right
here. This is the line that tells
Firebase which account has admin access.
If your user ID is in there, then you're
good to go. Now, in most cases AI Studio
updates these rules automatically when
you send the admin prompt. But if for
some reason you don't see your user ID
in the rules or your admin dashboard
isn't showing all the users, just go
back to AI Studio and tell it to make
sure that the Firestore security rules
were updated. So, for example here, I'll
switch back over to AI Studio.
And then I'll send this prompt.
Make sure the Firebase security rules
are fully updated.
Ensure my user ID
is present, and that I have access to
all data. So, in my case, my security
rules are already updated, but I'll send
this prompt anyways.
Awesome. So, now after setting that
prompt, your security rules should be
good to go. If you want to double-check,
you can always go back into Firestore
and look at the security tab, but AI
Studio should be able to handle
everything for you here. Now, the next
thing we need to do is take care of the
storage rules. These are separate from
the database security rules, and in my
experience, they don't always sync up
automatically the same way. This is
important because the storage rules are
what control who can actually view and
access the files that users upload. So,
if your admin account doesn't have
access in the storage rules, you won't
be able to see other users' files from
the admin dashboard once the app is
deployed. So, we'll update the storage
rules manually just to make sure
everything works properly.
So, let's go back over to our Firebase
console,
click into storage,
then click into rules,
then we'll highlight everything right
here,
and delete this.
And then once again, if you check the
guide linked in the description, I have
copy and paste storage rules that you
can replace right here. So, I'm going to
copy that over from the guide,
then I'll paste it in right here,
and then make sure here at the very end,
you update your user ID right here. So,
just highlight this,
and replace it with your actual user ID.
Once you have that in, click on publish,
then we'll switch back to AI Studio,
and before continuing, wait 1 to 2
minutes for everything to sync up.
Awesome. And now with that done, we know
that the storage rules are set up
correctly, and everything will work
properly when we deploy. Next, let's
take a look at what our admin panel
actually looks like. I'll start by going
to the top here and refreshing this
page.
And then I'll maximize the preview
panel.
And now this is what our admin control
panel looks like. I can see my total
users, the amount of files I have, and
then the server status. And right here
I'm able to see my user account. Now for
my admin control panel, I want to make
sure that it's actually tracking new
users as well. And then I'm able to read
and download their files. So I'm going
to click on sign out in the bottom left.
And I'm going to create another account.
Fill out this info right here.
Then I'll sign up right here.
And now I'm going to upload that test
file again.
Double click on it here.
Then here at the bottom I can see it was
uploaded. So now I'm going to sign out
of this account and log back into my
admin account.
Sign back in here.
And here as you can see, I now have two
users. And I can also see that they
uploaded one file. So if I click on
manage data,
and I'm able to see that test file that
we uploaded to this account. And this is
the power of having an admin console. I
can see all of my users, their emails,
when they signed up, and how many files
each one has uploaded. No matter how
many users sign up for your app, you'll
always have a clear overview of
everything that's happening within your
admin control panel. And also, every one
of your users' experiences stays
completely private. They're only able to
see their own data. And now this means
that our app is fully built and working.
We've got user accounts, a database,
file storage, security rules, and an
admin dashboard. Now we need to get this
thing live on the internet. So now let's
save it to GitHub and deploy it. So I'm
going to minimize this here.
Then click on settings here in the top
right.
Click on this arrow.
And click GitHub.
Click on sign in to GitHub to continue.
And if you have an existing GitHub
account, you can log in right here. But
if you don't have an account yet, you
can sign up down here. In my case, I'll
click on continue with Google.
I'll log in with my account right here.
Here you're able to choose your
username.
You can choose your country or region.
And then scroll down and click on create
account.
Then here just scroll down.
And click install and authorize.
And now here we'll need to create a
repository. A repository is just a place
on GitHub where your website or web app
is going to be stored. We'll use this
later to actually deploy it onto the
internet. So here I'll just say
client vault web app. And then for the
description, I'll just put tutorial web
app. And for the visibility, I'd
recommend just keeping this as private.
Go down and click on create GitHub
repository.
Then you'll scroll down to the bottom
and click stage and commit all changes.
All right, and now we've saved our web
app to GitHub. That means that we're
ready to deploy.
All right, so our project is saved to
GitHub. That's great, [music] but how do
we actually get it on the internet where
people can visit it? Well, we need
hosting. And if you're not familiar with
hosting, it's basically renting space on
a server that stays online 24/7, so your
app is always accessible whenever
someone visits it. This is the one part
of the setup that isn't free, but it's
necessary because without it, your app
doesn't have a home on the internet.
There are many different hosting options
out there, but the easiest way I found
for AI studio projects specifically is
Hostinger. Hostinger connects directly
to GitHub, so every time you push a
change to your project, it automatically
redeploys your app. [music] You don't
have to worry about manually updating
anything. Hostinger also supports the
technology that AI Studio projects run
on right out of the box, [music] so
there's no extra configuration needed on
your end. You'll also get a free domain
name for the first year, so your app
gets a real professional URL instead of
just some random string of characters.
And the pricing is really affordable for
what you're getting. So the next step
here is to sign up for Hostinger. To get
an exclusive discount, go to this link
on screen right here, or click the first
link in the video description. That link
will take you to the correct setup page,
and make sure you're getting the lowest
pricing possible.
All right, so now I'm going to go ahead
and go to that link at the top of the
video description.
And once you go to that link, you'll be
brought to this page right here. Click
on start now.
And then down here, we'll be looking for
the business plan. The reason why we
need this plan specifically is because
if I scroll down here, you'll see it
includes five managed Node.js web apps,
and this is the feature that we'll need.
So let's scroll up here, and click on
choose plan.
Then here, start by choosing your
billing period. By default, this will be
set to 48 months. However, you can
switch this to 24 months, 12 month, and
1 month plans as well. For this video,
I'll go with the 12 month option.
As you can see here, we still get plenty
of savings, and also a free domain for
the first year. Down here, you can
choose to type in your domain name, but
I'll do this a little bit later. And
then on the right side right here, you
can review your order. And don't forget
that you can get this additional
discount by using the first link in the
video description. Once you're ready, go
down and click on continue.
And then on this page right here, you
need to sign up for a Hostinger account.
So enter your email address,
and create a password.
And then click register.
And now on this page right here, go
ahead and enter your billing address and
your payment information, go through the
checkout process, and I'll meet you at
the next step.
All right, and once you get to this page
right here, you'll be brought into
Hostinger's onboarding. And depending on
whenever you're watching this video,
this onboarding process may look
slightly different. But even if it is
slightly different, the overall steps
should be the same. So, just follow
along the best you can. For this first
question here, I'm going to say that I'm
creating this website for myself.
I'm looking to create a new site.
In the bottom right here, I'm going to
click on skip personalization.
And then when you get to this page right
here, you'll see three options. You'll
want to scroll down right here, and you
want to look for the option that says a
Node.js web app. This is going to allow
us to deploy via GitHub. So, click on
this.
And then click next.
And then right here, you can claim at
your free domain name for the first
year. So, right here I'm going to type
clientvaulttutorial.com.
And as you can see, this domain is free
for the first year. So, I'll go ahead
and claim this.
And click on next.
And then right here, you'll have to
verify your domain name owner details.
This is who your domain is going to be
registered to. So, confirm all of the
information is correct right here.
And then after you've filled everything
out, click on register.
And here you may get a text message sent
to your phone number.
Go ahead and enter your code right here.
And click verify.
Awesome. Now your domain is ready to go.
Once you get to this screen here, click
on connect with GitHub.
And then on this screen here, you can
choose whether you want to give
Hostinger access to all of your
repositories or only select
repositories. In my case, I'll just go
with all. I'm going to scroll down and
click install and authorize.
And then right here, you should see that
repository that we created in Google AI
Studio a few moments ago. I'll click on
my repository right here
and click on continue.
And then here, the first thing you want
to do is change the framework preset. Go
ahead and click on this
and then scroll all the way to the
bottom. You're looking for this option
right here called Vite. Click on this
and then scroll down this page.
Look for environment variables. Next to
this, click add.
We're going to add in some environment
variables here using an API key. If your
Google AI Studio project uses any AI
features, things like a chatbot, image
generation, or any kind of AI-powered
tool, those features won't work after
deployment unless we add an API key. So,
let's take care of that now. Let's
switch back over to Google AI Studio.
And I'll close out of this.
Click on back to start.
Click into dashboard.
And here you'll land in API keys. On the
right side, click on create API key.
Click on create key.
And then click copy key.
And switch back over to Hostinger.
And then for the first name here, let's
type
Gemini {underscore}
API {underscore} key.
And then paste in the key right here.
Click on add more.
Then for the next name, we'll name this
Google {underscore} API
{underscore}
key. Then paste in the same key again.
And then one more time, click on add
more.
And we'll name this Vite
{underscore} Gemini
{underscore}
API
underscore
key.
And then paste in that same key again.
With that done, click on finish.
And then click deploy.
Perfect. Now your web app is going to be
deployed. I'll wait here for a few
moments and wait for everything to
finish up.
Okay, and as you can see here, the
deployment has completed and our app is
available right here on our custom
domain. So everything is already
connected and good to go. So I'm going
to go to my web app right here by
clicking on this link.
And there we go. Now all the stuff that
we did earlier when we signed up for our
admin account and uploaded files, all
that information should still be here.
So I'm going to go ahead and log in to
my admin account
and click sign in.
Awesome. As you can see here, everything
is the exact same as it was back in AI
Studio. That's because the preview was
connected to the same Firebase backend
the entire time. And this is great
because it means that your database and
your backend were working properly the
whole time. Now if something isn't
working the way you expect or if you
want to make any changes to your app in
the future, here's how you do it. First,
go back over to Google AI Studio
and close out of this.
Click on dashboard.
Click on apps.
Then click into the app that you just
deployed right here.
And then here you'll just make your
changes or tell AI Studio what needs to
be fixed and then just save it to
GitHub. Hostinger is connected to your
GitHub so it'll automatically pick up
the update and redeploy your app. You
don't have to touch anything on the
Hostinger side. You make the change at
AI Studio, push it to GitHub, and it
shows up on your live site. So for
example here, I could make a small
change. I'll say, "Make the red color in
the admin panel green instead." So we'll
just do a small design change like that
right here. I'll go ahead and send this
change.
And then we're going to let AI Studio
work for a minute to change out the
colors.
And now here in the preview mode, you
can see that it's now green. To push
this update to our actual live
deployment, go to the top right and
click on the settings.
Click on the arrow.
Then click on GitHub.
Then we'll scroll down to the bottom.
Click on stage and commit all changes.
And then your changes will be uploaded
to GitHub. And then after that, switch
back over to your web app.
And then refresh the page.
And then as you can see right here,
Hostinger automatically redeployed your
app with those updated changes. And one
small detail you'll notice here at the
top is the actual site name. This right
here is the default name. Every Google
AI Studio web app gets this name. To fix
that and update your site title, you
would do the exact same thing. You'd
switch back over to AI Studio and
request the change. And then you would
commit that change to GitHub. You'll use
the workflow I just showed you to make
any changes or troubleshoot. Now, before
we finish up here, let's switch back
over to Hostinger.
Then let's close out of this.
And then here you'll find your HPanel.
This is where you can manage your
deployment and your hosting. Right here
you may have some items on your to-do
list. And if you click on this here in
the top left,
and then click on websites,
click on Node.js,
you should see your web app listed right
here. Underneath it, click on dashboard.
And then right here, you'll be able to
see all of the information regarding
your deployment. You can access your
settings right here. You'll see your
current deployment and then some other
miscellaneous information down here. You
may see some information regarding your
domain right here. Make sure after this
video, you check the email that your
domain was registered to and you'll find
an email from Hostinger that has a link.
You just click on that and it verifies
your domain. And if you ever need help
with finding something in your Hostinger
dashboard, go to the top right and click
on ask AI.
This is going to open up the Cody AI.
You can ask it any question and it's
super helpful. And if it can't figure
something out for you, it's going to
connect you to a live agent. And from my
experience, it's been super helpful. And
also, let me give you a quick tour of
the Firebase console. So, I'm going to
switch back over to Firebase.
So, at the top here, you have your
project overview. I'll click into it.
This gives you a snapshot of your
project, including what plan you're on
and how many apps you have. Down here,
you can see a quick look at your current
reads and writes. So, if you ever need
to check how your app is performing,
this is the first place to look.
Underneath that, on the left, you have
your settings. This is where you'll find
things like your billing information,
integrations, service accounts, and user
permissions. You probably won't need to
touch this often, but if you ever need
to manage anything on the account level,
it's all right here. Underneath this,
you have what's new. Firebase shows you
new features and updates. Below that,
you'll have your project shortcuts.
These are the tools that we've used
throughout this video. In our case, we
visited Firestore, authentication, and
storage. So, those are showing up here.
You'll visit these three tabs the most
often. And then all the way at the
bottom, you have your product
categories. This includes databases and
storage, security, AI services, hosting
and serverless, devops and engagement,
and analytics. The ones here at the
bottom are more advanced and you'll only
really visit the databases and storage
and security tabs. You just built and
launched a real web application from
scratch, all using Google AI Studio,
Firebase, and Hostinger. And if you
haven't signed up for your hosting plan
yet, go to this link on screen right
here or click the first link in the
video description. Using that link will
make sure you get the lowest pricing
available. If this video helped you out,
make sure to hit like and subscribe for
more tutorials just like this. I'll see
you in the next video.