Deploying to Firebase Hosting from GitHub – Firecasts
Articles,  Blog

Deploying to Firebase Hosting from GitHub – Firecasts


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.

25 Comments

  • Lucas S.

    Please do a comprehensive tutorial on Google App Engine + Node.js + Firebase! There are no examples or documentation of this specific combo, despite being advertised as possible on the Pricing page ("There are many security-enhancing, latency-improving, and time-saving benefits to using Google Cloud with Firebase"). We want to be able to write our own backend logic with Firebase, and would love some best practices for deploying a full stack app, with frontend being deployed to the CDN and backend on GAE.

  • Badar Shahzad Khan

    In my system where i have repository I try this command 'firebase init' this is not working i tried these few comands
    $ sudo apt-get install travis
    $ npm install -g firebase-tools
    $ npm update -g firebase-tools
    $ npm install firebase-init –save
    but nothing get any solution would you like to tell me how I should initialize (firebase init) like you are showing in video.

  • Lindsay Ward

    Thanks David. With a bit of extra searching and adding in commands like ng build –prod, I was able to get my Angular 2 (CLI) app auto-deploying to Firebase Hosting from GitHub 🙂

  • Mike Doran

    In case it helps anyone else, it isn't shown in the video but you might need to specify your firebase project in the .travis.yml along with the token:

    firebase deploy –project your_project_id –token $FIREBASE_TOKEN

  • Jofferson Tiquez

    If you're not using a "public" ro "client" folder for the public directory, you can just say '/' and it will look for the index.html on the root of the project.

  • MOHAMMAD ALSHARAA

    Dear David, I need your help, I do everything to deploy firebase, with no correct result, please i want to contact you directly or by email, i need your help to solve this problem, I will appreciate if you respond to me

  • Taban Cosmos

    I have been having issues deploying my angular2 app. Once deployed and I visited the link, it shows just loading.. without my actually contents being displayed. What is the issues with that? Thanks

  • Mig A

    I really enjoy each and every one of your tutorials! 4:48 – I'd recommend to not use after_success for repos where you'll be doing pull requests. By using the .travis.yml below Travis CI will not deploy on after each successful PR and wait until that PR is merged into master before deploying.
    before_deploy: "npm run build"
    deploy:
    provider: firebase
    token:
    secure: secret
    project: secret
    skip_cleanup: true

Leave a Reply

Your email address will not be published. Required fields are marked *