Skip to content

Instantly share code, notes, and snippets.

@boseji
Last active February 1, 2020 02:58
Show Gist options
  • Save boseji/7ea718ce5c43e88d421abf810837166f to your computer and use it in GitHub Desktop.
Save boseji/7ea718ce5c43e88d421abf810837166f to your computer and use it in GitHub Desktop.
Firebase Quick use snippets - some commands and some code to get started quickly

Firebase Snippets

This documents provides a brief command sequences and code that can get you started with Google Firebase.

Install Command Line Tools

Firebase uses command line tools to perform upload, test and deploy actions.

The common command line tools come as npm packages.

sudo npm install -g firebase-tools

Login the CLI

In order to start working with Firebase one needs to make sure that the CLI is logged-in. Means, the CLI has permissions to work with your google account.

Here is a snapshot:

$ firebase login

i  Firebase optionally collects CLI usage and error reporting information 
to help improve our products. Data is collected in accordance with Google's
privacy policy (https://policies.google.com/privacy) and is not used to 
identify you.

? Allow Firebase to collect CLI usage and error reporting information? No

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=....

Waiting for authentication...

Copy the URL shown in your browser and provide the required Permissions.

It would show a Firebase CLI Login Successful message.

And in the command line it would show:

Waiting for authentication...

✔  Success! Logged in as youremail @gmail.com

$

This means you are ready to use the Firebase commands in CLI.

Logout the CLI

In case you have already logged-in the CLI - you can also logout.

firebase logout

Host a Static Website

We can easily host a static website here are the commands :

$ firebase init


     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/user/....

? Which Firebase CLI features do you want to set up for this folder? Press 
Space to select features, then Enter to confirm your choices. (Press <space> to
select, <a> to toggle all, <i> to invert selection)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

Use Up and Down Arrow Keys to go between the choices and press Space bar to select.

Here you need to select Hosting since we just what to host a few pages.

Press Enter Key to Proceed after the particular option has been checked.

? Which Firebase CLI features do you want to set up for this folder? Press 
Space to select features, then Enter to confirm your choices. Hosting: 
Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 

Now you have choice.

  • You can either go for an existing project already created in Firebase Console

  • You directly create a new project here

  • You can also use Google Cloud Platform project part of GCP.

In most cases the first 2 options are better.

In my case I selected a project that I had already created in the Firebase Console.

? Which Firebase CLI features do you want to set up for this folder? Press 
Space to select features, then Enter to confirm your choices. Hosting: 
Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ project-1 (Project-1) 
  project-2 (Project-2)

Next, Choice of project. You would be given a list of your existing projects. You can scroll using Up and Down Arrow keys and Enter Key to select.

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: project-1 (Project-1)
i  Using project project-1 (Project-1)

=== 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? (public) 
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N

Next, most of the options can be used as defaults now. Just make sure that you select N for the single-page app question. Since we can have multiple static pages that need to be served.

This would complete the setup.

=== 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? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

That's It

You project is now ready. You can modify the public/index.html. Add your HTML, CSSand Javascript files as needed to this public directory to host.

To Deploy just give the command:

$ firebse deploy

=== Deploying to 'project-1'...

i  deploying hosting
i  hosting[project-1]: beginning deploy...
i  hosting[project-1]: found 2 files in public
✔  hosting[project-1]: file upload complete
i  hosting[project-1]: finalizing version...
✔  hosting[project-1]: version finalized
i  hosting[project-1]: releasing new version...
✔  hosting[project-1]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/project-1/overview
Hosting URL: https://project-1.firebaseapp.com

You can now browse the published copy of the website on the Hosting URL listed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment