Start codelab

Codelab Flow

What you will learn

L F Firebase Hosting

In this codelab, we're going to learn how to add firebase to your web app and deploy it i.e Firebase Hosting.

Adding Firebase

To host your site, you need to install Firebase command line tools using npm ; (Node.js) ; Install Firebase tools: $ npm install -g firebase-tools

If you've previously installed Firebase command line tools, run the install command again to make sure you have the latest version

Create your firebase project project in the firebase console here. Click project overview and select firebase web platform by clicking the CODE icon.
Description View Code On Github
The Firebase Command Line Interface (CLI) will allow you to serve the web app locally and deploy.
Copy and paste the code snippet provided at the bottom of your HTML, before other script tags. The code snippet looks like the one below populated with your firebase project's details/data. 

    <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
    <script>
    // Initialize Firebase 
    // Set the configuration for your app
    // TODO: Replace with your project's config object
    var config = {
    apiKey: "apiKey",
    authDomain: "authDomain",
    databaseURL: "databaseURL",
    storageBucket: "storageBucket"
    };
    firebase.initializeApp(config);
    </script>
Latest Commit

Firebase Hosting

Make sure you are in the root folder of your project to Initialize your app to use Firebase. Select your Project ID and follow the instructions. If you haven't recently signed in to the Firebase tools, update your credentials:

firebase login

When prompted, you can choose any Alias, such as add-firebase for instance. Select Firebase Hosting as the Firebase CLI feature. Provide the default directory as / or e.g build for your node project.

firebase init

Let's serve and test the firebase project locally. Run the following command from the root of your local project directory.

firebase serve

Finally, deploy your web app to Firebase:

firebase deploy

Celebrate. You're done! Your app will be deployed to the domain:

https://YOUR-FIREBASE-APP.firebaseapp.com

What's next?

You got any bug? report it here for support. You want to contribute? Create your feature here. Learn more on firebase web setup here

FORK ON GITHUB