DAVID EAST: What's up, everybody?
David here, and on today's episode of Firecasts,
I'm going to show you how to set up your GitHub
repos to deploy to Firebase hosting
after a successful push.
And just as a reminder, this is just one episode
in an entire series on Firebase on the web.
So if you want to stay up to date, make sure to subscribe.
But now, we're going to go set up our GitHub code
to deploy to Firebase hosting.
So let's get started.
So the amazing thing about Firebase hosting
is that you can deploy your website with one command--
firebase deploy.
And this works because you're usually logged in locally,
so you have access to deploy to your website.
But what if you're in an environment where you don't
have access, like if you're doing continuous integration,
like with Travis in a GitHub repo?
Well, in those cases, the Firebase command line
actually has a flag called dash dash token.
And what dash dash token takes is a Firebase token.
And how do you get this Firebase token?
Well, you can get it by using the command firebase
login colon ci.
And this will make you go out to the browser and log in.
And then after that, it will print your token
to the console.
And from there, we can set it up in Travis.
And after that, you just push to your GitHub repo,
and then Travis will kick off.
And if you're successful, it will
deploy to Firebase hosting.
So for those of you not familiar with Travis,
it's just a continuous integration service.
So essentially, when you send a pull request
or you push to a repo, it will do a build and make sure
that your test pass, or whatever you want to do, succeeds.
And then if that succeeds, you can do something like push
to Firebase hosting.
So I'm going to set up a project on my local computer.
And then that's going to be able to push to GitHub, which
will trigger off Travis, which will then be able to deploy
to Firebase hosting.
Since I don't have any files, I'm
just going to do a firebase init,
and that's going to give me this amazing emoji art.
Seriously, it never gets old.
And then after that, I'm going to say
I want to do a hosting project.
I am going to select my project name,
and then it's going to ask me what should I
use for my database rules.
And I'm not using any, so I'm just
going to use the default file.
And then now, this is a really important part.
It says, what do I want to use as my public directory?
So your public directory is where all of your app files
are contained, and specifically, your index.html.
So in my case, I like to make this pretty easy,
so I just name my public folder Public.
So the rest is going to ask me questions about single page app
configuration and other things.
And I'm just going to go and skip through these.
And now I have an initialized Firebase project.
So I'm going to open up my editor,
and I need to be able to tell Travis what to do
when I push to the GitHub repo.
So to do that, I'm going to create a file.
I'm going to call it dot Travis dot YAML.
And this is essentially a configuration file
that tells Travis everything it needs to do when you push.
So the first thing I'm going to specify
is the language I'm going to use in the environment, which
in this case is going to be node_js.
And then I'll also specify the node_js version I need to use,
which for this case, I'll just use 4.0.
And now I need to specify the actual script to run.
And in this case, I'm just going to say
echo deploying, but in your case,
this is where you'd want to do something
like NPM Install and then NPM Test,
or whatever commands you do to run
your unit tests, end-to-end tests, or what
you find important.
And the next thing I'm going to do
is specify this Install command, which
allows me to install things like the Firebase tools.
So once the Firebase tools are installed,
I can use them to deploy to Firebase hosting.
And now, this is the very important part--
the after_success hook.
So after_success will run if our scripts were great,
and then also this Install worked as well.
So I can say after_success, do a firebase deploy,
dash dash token, and then we'll provide a Firebase token.
Now if you remember from the beginning of the video,
to get a Firebase token, we need to run the firebase login ci
command.
So here in the command line, we'll
write firebase login colon ci.
And this takes us out to the Firebase console,
where we're going to allow the CLI to have some permissions
to create this token.
So now you can see, in this blurred-out token,
and it's blurred out because this is private information.
And we can actually go ahead and copy this token,
and then head out to Travis, where we will
create an environment variable.
So here in Travis, you can see I'm in the Settings section.
You can see that there is a space for environment
variables.
So I can come down here and create one
for a Firebase token, and then paste in my value.
And then I click Add, and it is saved to Travis.
So now that Travis has this value, all I have to do
is a get push.
So you can see right here, it ran
our script of echo deploying, and then below,
ran the after_success command of firebase deploy dash dash
token Firebase token.
So now our app should be deployed to Firebase hosting.
So let's go and check out the URL.
So I've gone out to the URL of my Firebase hosting project,
which is githubdeployed A4A1B.firebaseapp.com,
and then you can see right here, we
have the blank Firebase hosting project
that firebase init created for me.
So just like that, we created an entire continuous integration
process, from GitHub to Travis to Firebase hosting.
So that's all you have to do to set up your GitHub repos
to deploy to Firebase hosting.
If you want to check out more awesome stuff
that you can do with the Firebase hosting command line,
check out the links in the docs.
But before I go, I have a question for you.
What kind of apps are you deploying out
to Firebase hosting, and what are you
using the Firebase CLI for?
So that's all.
I'll see you guys next time.