Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Vue.js 2 and Bootstrap 4 Web Development

You're reading from   Vue.js 2 and Bootstrap 4 Web Development Build responsive SPAs with Bootstrap 4, Vue.js 2, and Firebase

Arrow left icon
Product type Paperback
Published in Sep 2017
Publisher Packt
ISBN-13 9781788290920
Length 310 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Olga Filipova Olga Filipova
Author Profile Icon Olga Filipova
Olga Filipova
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. Please Introduce Yourself – Tutorial FREE CHAPTER 2. Under the Hood – Tutorial Explained 3. Let's Get Started 4. Let It Pomodoro! 5. Configuring Your Pomodoro 6. Please Authenticate! 7. Adding a Menu and Routing Functionality Using vue-router and Nuxt.js 8. Let's Collaborate – Adding New Workouts Using Firebase Data Storage and Vue.js 9. Test Test and Test 10. Deploying Using Firebase Index

Creating a project in the Firebase console

If you still don't have a Google account but you really want to continue with this tutorial, then well, I am really sorry, but you will have to create one this time. Firebase is a service powered by Google, so a Google account is more than required.

If you already have your account, log in to the Firebase console:

https://console.firebase.google.com/.

Let's start by creating your new Firebase project. Click on the Add project button. Give it a meaningful name and select your country from the list. Once you are done, click on CREATE PROJECT:

Creating a project in the Firebase console

Create a project using the Firebase console

You're done! Now, you can use the Firebase-powered backend for your application, including a real-time database, authentication mechanism, hosting, and analytics.

Adding a first entry to the Firebase application database

Let's add the first database entry. Click on the Database tab on the left-hand side. You should see a dashboard similar to this one:

Adding a first entry to the Firebase application database

Real-time database on the Firebase project dashboard

Let's add an entry called messages and the very first message as a key-value object containing title, text, and timestamp by clicking on the plus sign:

Adding a first entry to the Firebase application database

Adding the first value to the Firebase real-time database

Click on the ADD button, and your database will persist the added entry. Add as many message entries as you wish or leave it like that. Now, for the sake of simplicity, let's change the rules of our database and make it readable and writable for everyone. Beware! Never do this for something in production for public usage. In this example, we just want to test some Firebase features, but your future applications must be smart and secure. Click on the RULES tab and type the following rules in the opened text area:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

So, your RULES tab now looks like this:

Adding a first entry to the Firebase application database

Rules tab after changing the rules

Click on the PUBLISH button and you're done! Now, it would be interesting to start using this data within our application. However, first we have to create this application and connect it to our project.

You have been reading a chapter from
Vue.js 2 and Bootstrap 4 Web Development
Published in: Sep 2017
Publisher: Packt
ISBN-13: 9781788290920
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image