Build a YouTube bookmarking site - part two - Setting up Firebase

In this part of the build a YouTube bookmarking site course we are going to install Firebase to our project and set up everything we need for now in the Firebase console.


Prerequisites

This course assumes that you already got a good fundamental understanding of HTML, CSS and JavaScript. This part will be continuing from part one, so if you haven't taken that part yet you should do that first. Click here to go to part one.

Installing Firebase

First we can begin by installing Firebase. We do this in the Vue UI. So let's fire it up again by typing following command in the command line.

$ vue ui

When you have done this the user interface will automatically open in your browser and you can find your project there.

VueTube - Project

When you've located your project you can click on "Dependencies" in the menu to the right and then click "Install dependency" in the upper right corner. A modal window will open with a search input. Search for "Firebase".

VueTube - Install dependency

Click on the first result which should be Firebase and then Install firebase. When this is done Firebase will now be included in our project.

VueTube - Firebase

The Firebase console

Since everything is ready in our project we need to login to the console where we can create and manage our projects. Go to firebase.google.com and login. When you've done that you can click the "Go to console" button in the upper right corner. And you should end up on a page looking like this.

VueTube - New firebase project

Create a new project and fill in VueTube as the projects name. When the project is created you will end up on this page which is the project's dashboard.

VueTube - Add firebase to your we app

After this you can click on "Add Firebase to your web app" and copy these lines of code.

VueTube - credentials

Including the credentials in our project

Open up main.js in your editor and copy the lines of code you got from Firebase. main.js should look like this now.

VueTube - main.js

Summary

We've now installed Firebase to our project and everything we need to begin is set up in the Firebase console. I hope you enjoyed this part and if there is anything you want to ask you can find Vue Hero at Facebook


PreviousNext

Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.