Getting Started with Firebase Hosting on the Web – Firecasts
Articles,  Blog

Getting Started with Firebase Hosting on the Web – Firecasts


[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]

100 Comments

  • Julián Pinzón Eslava

    Hi! I'm using Angular 1 (but thinking of switching to 2) to develop a small app for sports class scheduling! Great tutorials! Keep it up!

  • tony kempson

    Thanks David. I'm currently learning Polymer, and would really like to see how a PWA can integrate with Firebase.

  • H. Y.

    Gitbash problem at this step: "Firebase use –add" to select the staging project on my Firebase server:
    ==============================================================
    Thank you for this great tutorial ! I followed this video to have deployed the FriendlyChat app on Firebase server successfully. Then I followed this video to type the above command, then several projects is displayed, I followed to use Arrow key to select one project. But the Arrow Key does not work sometimes as it seems to be a bug in Node.js based on the following page:
    https://github.com/firebase/firebase-tools/issues/78

    So now, is there any other ways to select one project on Gitbash? I know this is not par of your tutorial. Thanks !

  • Jesus Rivero

    Hi,
    I would have to do to upload content of heavier folders, I talk about 200MB of information, which would have to do ??

  • H. Y.

    The following demo web app using the third party API, can this type of web app be possible to run on firebase hosting? If it is possible, I will spend the time to try this.
    https://www.youtube.com/watch?v=QWEFDjw3B34

  • Ling talfi

    I had to use the following firebase.json because firebase deploy was complaining a trailing comma error in my firebase.json otherwise.

    {
    "hosting": {
    "public": "public",
    "ignore": [
    "firebase.json",
    "*/.",
    "*/node_modules/*"
    ]
    }
    }

  • Love Bdsobuj

    Can I change Firebase Hosted Web App URL?

    Example:
    My Project name 'Hello World'
    and
    After deploying Web App
    I got this url
    https://hello-world-6756a.firebaseapp.com

    Can I change https://hello-world-6756a.firebaseapp.com to https://hello-world.firebaseapp.com (If available the sub domain name).

    Thank you.

  • 9roozoo6

    I'm using jquery-mobile (actually an older version), and hosting is working nice 🙂 I selected the option to configure everything as a single page app and links are well resolved, although I used several htmls. The app looks fine on my pc browser.

  • Kirk Becker

    I really enjoy the video presentation here. The sounds and intro are solid, not to even mention I find the content very interesting! <3

  • Mike 5000

    Is there a walkthrough for deploying react.js using webpack to firebase? I'm assuming that some steps will be different.

  • Hemanth Vaddi

    I hosted a website on firebase and then I deleted the project but the site is still up and running. I can't use CLI on this project because its deleted. How do I disable this website?

  • jasan

    @AskFirebase How can I change the firebase config values based on where I'm deploying (staging or production). Thus the staging deployed app also uses the database of staging app. My current solution is to just comment one snippet of config code and uncomment another snippet of config code.

  • Cris Muscalu

    Welcome to Firebase Hosting
    You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!
    Open Hosting Documentation
    Why am i seeing this instead of the app?

  • Evenza Project

    Angular2 + Angularfire2, but angular-cli + angularfire gives alot of errors with types, i think they shoud make it alot more stable so we don't have to make workaround all the time 🙂

  • Rizwan Yahya

    how can i add X-Frame-Options using headers? i tried to add it in firebase.json but somehow its not working, can anyone share working example for it, e.g i need allow picassa album in a page and also a contact form iframe hosted on some other site

  • Joross Barredo

    Need help please. And so I made a change by adding the H1 tag, added a staging successfully, deployed successfully as well. However, the changes are not visible. How could this be? Has this something to do with the servers or with some caching issues on my end?

  • Mahdi Sarhan

    i try to cahnge font-famly in index.html but it not success 🙁 !!

    this is my code

    <style media="screen" type="text/css">
    @import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
    body {
    font-family: 'Droid Arabic Kufi';
    …….

  • Gary Bola

    David, I took the staging url: https://web-quickstart-staging.firebaseapp.com and viewed the source code. As expected I was able to copy Firebase Initialize config key values. what is the best way to keep this info such as APIkey away from client side and where to store it securely? Thanks

  • PRATIK BACHCHHE

    Welcome to Firebase Hosting

    You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

    I AM UNABLE TO OPEN DEPLOY index.html file after deploy command and all.

    Please reply asap AS i have urgent to deploy Live site so.

  • michael o connell

    Anybody know why chrome is telling me "This page is trying to load scripts from unauthenticated sources"?, Thanks!

  • Test Test

    I guess Firebase hosting is for beginners. But definitely a lot of potential if you combine Firebase other resources. In other words, Firebase will be a new hosting provider for everything lol

  • Hadi Alrahabna 〖ICU〗

    on file firebase deploy having some files how to select your upload file.
    exp: on my web site i have 7 files
    so how to add 1 more file without upload all agin.
    from 7 to 8

  • patricknasc

    I didn't understand why when I left the public folder called "public" I still got a default firebase page, but when I renamed it to "dist" it worked as expected. That's my first question, and the second one is why not rewriting the default index that was placed there before?

  • Golden Arc

    hello, quick question
    is possible to deploy you website with additional folders that contains css files and client base js?

  • Amiel Barino

    Can anyone create a video tutorial about adding a domain name in firebase where domain name is bought from namecheap?.

  • Mahdi Sarhan

    Hi firecast, i have big problem
    what i should do with SEO it can work with js app ?
    i use single page. and angularjs

  • Braulio Eleazar Miranda Gutiérrez

    Error: No targets found. Valid targets are: database,storage,functions,hosting

    any solution?

  • T. L. Burney

    In case you were getting the same deploy errors as me
    https://stackoverflow.com/questions/44323081/firebase-deploy-error-and-fiebase-json-empty-file

  • Andrea Lo Iacono

    Hello guys,

    I created a project with angular cli. I would like to know how to create the firebase.json file to use firebase hosting.

    Which public folder do I need to indicate?

    thank you

  • hUgO6191

    can I use this to create a site that shows an excel and that excel can be changed given certain criteria? like if it is an admin trying to make a change it will occur on the spot, if it is another user then that user, another and the admin have to accept the change

  • Marco Zúñiga U.

    this is not the same in real life…. omg stupid tutorial i choose Hosting and then no more question. what happened?

  • Kalya Elisha

    My friend, I am having trouble deploying a web app. The ap doesn't show after getting deployed. It shows

    You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

  • Himanshu Joshi

    My website after deploy showing this ->
    Welcome
    Firebase Hosting Setup Complete
    You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

    with a button named "Open Hosting Documentation".Can you tell me the problem?

  • Roberto Elero Junior

    It's good to know that we need to run firebase login first, otherwise, we won't get to link our local code to our firebase projects…

  • Kaz Tee

    what am i doing wrong i can not host my site i have followed the video .firebaserc already has a default project, skipping. when i open my url get this message Welcome Firebase Hosting Setup Complete.

  • Eric Kim

    *** this is how i FIXED it *
    === Hosting Setup

    Your public directory is the folder (relative to your project directory) that
    will contain Hosting assets to be uploaded with firebase deploy. If you
    have a build process for your assets, use your build's output directory.

    ? What do you want to use as your public directory? .
    ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
    ? File ./index.html already exists. Overwrite? No
    i Skipping write of ./index.html

    i Writing configuration info to firebase.json…
    i Writing project information to .firebaserc…

    ✔ Firebase initialization complete!
    [email protected]  ~/Desktop/CS252/ColorPallete  eric ● ? ⍟1  firebase deploy  ✓  11437  01:04:57

    === Deploying to 'colorpalettecs252'…

  • jehan muse

    i have a question..
    can i use firebase hosting for ecommerce site?

    my use case would be i create an AMPed website that will use payment request API to accept payment.. only that..
    the AMPed website,well you know..it is static and just to showcase the product..

    as far as i know, i don't need to register any app..and for my case, the website will be more than one..

    anyone knows about this?

  • AntHill CA

    what's the firebase best practice for hiding the staging environment from the public? something similar to php htaccess user/password.

  • Abhijeet Bharti

    hello
    I am trying to connect to connect custom domain with firebase web hosting but it always shows "needs setup".
    Please help me

  • Adeel Miraj

    I have a question regarding deploying to different environments. Do I need to create a separate project for development purposes? If so then how do I keep the databases of the two projects synchronised since I'm using data from the database in my webpages. Lastly, isn't it an over kill to create two different projects for different environments? Can't we use the same project to make sure we have access to all the resources in each environment?

  • Mohammed Hazim

    this is bad through commands it is difficult, where is the control panel ?
    i can't understand any thing !
    oh comaaan through commands !

  • Clash of Clans-raids

    Can you make a vedio on how to fix url problem in android studio.I am not able to add firebase to app using tools table."Application not found error"

  • Jake Birkes

    I found this extremely helpful. Thank you for setting up a channel to teach this tool for someone like me who is new to web development. Also, the fact you can start for free. Awesome!

  • Guillaume SOULIÉ

    I have a question : i have a PWA hosted on firebase everything works well. But when i modify my app and redeploy it, i always need to double cache clean my browser to see the new version of my app. I tried a lot of thing like adding { "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value" : "max-age=0, no-cache, no-store, must-revalidate"}] } in my firebase.json file

    But it changes nothing. Why ?

  • MR NUH Ahmed

    am Task Manager at software development company and we use another web hosting servers so can we use firebase for all our products and the enviroments we use whether it's ASP.net, C#, Java, Android, PHP and more other if all of these is compatible on firebase it's would be our best option.

  • Franklin Ant. Frias

    Thank you for this video.

    I have a problem, when I’m trying to host de web. It doesn’t show the project’s name that I created. So I can’t choose any projects.
    What can I do?
    Thank you.

Leave a Reply

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