[MUSIC PLAYING]
DAVID EAST: What's up, everybody?
David here.
And today I'm gonna get you up and running
with Firebase Hosting.
Firebase Hosting is production-grade static hosting
for developers.
And with Firebase Hosting, you can deploy web apps
to a global content delivery network in a single command.
And also, every deployed app is automatically
provisioned an SSL certificate.
Today I'm going to show you just how easy it
is to deploy your web app with Firebase Hosting.
So let's get going.
So I want to deploy out this app to Firebase Hosting.
And if this app looks familiar to you,
it's because it's the app that we created in the Firebase
Storage Quick Start.
And if you want to see that, then you
can just click this little annotation right here.
So to get this app deployed, I'm going to open up the terminal.
And the first thing I need to do is
to install the Firebase tools.
And I can do that through NPM With npm installed dash
g Firebase dash tools.
So this will take me through a little bit of an install.
And then once it's done, I'm ready to initialize my app
for Firebase Hosting.
So to tell Firebase Hosting everything it needs to know
to deploy my app, I'm going to write a command called Firebase
init .
And what you'll notice is outside
of this spectacular emoji art is that it asks you two questions.
And the two questions are, what features
do you want to set up for the folder
that you're currently in?
And the features we can configure are database,
and that would be for the database rules.
And then hosting for our site.
In our case, we know that we want to set it up for hosting.
So I'm going to select that option.
And the first thing that it asks you to do
is it wants to associate your Firebase project with your app.
So you have your project in the console right here.
And this has the site nav of all the cool Firebase features.
And then you also have your web app that uses these features.
And so we're going to associate this project right here
with this web app.
And the name of my project is called Web Quick Start.
So I'm going to scroll down and select it.
Now this next question is specific for users that are
using the real time database.
And it's going to ask what files should be used for the database
security rules.
And if you're not familiar with the database security rules,
you essentially have this database
that has all this data.
And you want to secure it so you know who can access
what parts of your database.
But in this case, I'm not really using the real time database.
So I'm just going to create the default file.
Now this next question is pretty important.
And it's going to ask us what we want
to use as our public directory.
And the public directory is usually
the directory that contains your index.html file, which
is the entry point of our application.
And in my case, I usually stick all of that
into a folder called Public.
So the next question is for single-page app users.
So if you're building an app with Angular, Ember, Polymer,
or any JavaScript framework where you're setting everything
up as a single-page app, then you usually
have to deal with the hash bang in your URL routes.
Well, Firebase Hosting gives you a feature
to be able to rewrite all of these URLs
so you can actually use just regular server routing.
So if you are doing that, then you want to use this option.
But in my case, I'm just using a single index.html app.
Now it's going to ask me if some files exist, like,
404 in index.html.
So I'm just going to not overwrite those.
And it's going to do all of its initialization work.
And we can see down here that initialization is complete.
So with initialization complete, I can finally
go out and deploy my app.
And to do that, it's just one simple command-- Firebase
Deploy.
And just like that, our website is out there on the web.
So you can see we can access our website through this URL right
here, or we can use the CLI to open it.
So to open the website through the CLI,
I'm going to type Firebase Open.
And it's going to give us a couple of options.
And I'm going to scroll down to Hosting Deployed Site.
And just like that, you see that we have our website
hosted right out onto the web.
So now that I have this deployed, what I want to do
is I want to make a change.
And I'm not going to want to deploy
this change to production.
I'm going to want to display it to a staging or a QA site,
or something like that.
So I'm going to go back into my app,
and I'm going to make this change.
And it's pretty significant.
And now that the change has been made,
I want to set up a staging environment.
And to do that, I can use this command
called Firebase Use, dash, dash, Add.
And what this command is going to do,
it's going to say, well, you have all these other Firebase
projects.
Would you like to use one of them
to set up a different deployment to another domain?
And in this case, I do.
And I want to select Web Quick Start Staging.
And it's going to ask what alias I want to use for this project.
And it's my staging site.
So I'm going to call it Staging.
And now it's created this alias.
And just to show you what's happening behind the scenes,
I'm going to cat out this Firebase RC file.
Or as I like to call it, Firebaser C.
And this file is just a JSON object
with our different environments.
And using the CLI, I can switch back and forth
by using Firebase Use and its alias name.
So use default will get us back to our production.
And then use staging will throw us back
to our staging environment.
And since we are using our staging environment,
I can now deploy my changes to staging.
So let's type Firebase Deploy.
And then now I'll do another Firebase Open,
and then go to my deployed website.
And just like that, I have my huge change
onto my staging website.
And that's all it takes to deploy a web
app to Firebase Hosting.
And if you want to learn more, check out the link
to the official documentation.
So now my question for you is, what kind of web apps
are you deploying?
Like, do you use a framework like Angular or Polymer?
What are your tools of choice?
So that's all for today.
I will see you all in the comments.
[MUSIC PLAYING]