DEV Community

loading...
Cover image for To the Stars with Quasar & Firebase - Initial Service & Structure
Quasar

To the Stars with Quasar & Firebase - Initial Service & Structure

adamkpurdy profile image Adam Purdy Updated on ・7 min read

Table Of Contents

  1. Introduction
  2. Installation
  3. Structure
  4. Base Service
  5. Summary
  6. Repository

1. Introduction

Firebase is Google's mobile platform that helps you quickly develop high-quality apps and grow your business. It helps you by allowing you to build apps fast without managing infrastructure and gives you functionality like analytics, databases, messaging, and crash reporting so you can move quickly and focus on your users.

It was initially created as a startup in 2011 and was publicly available in 2012. In October 2014, Google acquired Firebase, which evolved into a platform that has 18+ products and is currently being used by 1.5 million apps as of October 2018. source - Wikipedia.

This article intends to be a base source for the articles that follows it, as the nature of this series is to inform the developer on how to set up Firebase within the Quasar Framework. While this information intends to be a foundational step for getting started with Firebase inside of Quasar, this is just the surface and is highly advisable to always consult the Firebase documentation initially for guidance.

  • 1.1 Assumptions

Before we get started, a few assumptions are in order. Unless otherwise specified in the posts to follow in this series, a presumption of the Quasar project consists of using: Stylus, auto importing of components, and using the features of ESLint and Vuex.

Alt Text

Also, please be sure to keep your quasar-cli as current as possible.

$ npm i -g @quasar/cli@latest
Enter fullscreen mode Exit fullscreen mode

Also, if you're here you've done two things:

  • Chosen the Quasar Framework to be your Vuejs front-end component framework
  • Chosen Firebase at the minimum to handle your Quasar application's authentication... maybe more

And finally, if something is not directly mentioned moving forward, it's more than likely to be covered in either the Quasar docs, or the Firebase docs. An effort will be made to keep a watchful eye on concepts that specifically pertain to the integration of Firebase within the Quasar Framework. Still, if something is missing, there is also the #firebase channel on the Quasar Discord server.

2. Installation

If you're new to Firebase, you must create a Firebase account with a Google identity and create a project in the console.
Alt Text

Once you've gotten your account and project setup in Firebase, it's time to install dependencies in your Quasar app and start the configuration process.

Assuming you are developing an app that will live in a production environment, Firebase recommends creating separate projects in the Firebase console. One for production, one for dev, and even a public testing endpoint if you’d like. The point here is to keep production data safe from development.

Install Firebase to your Quasar application, preferably via yarn package manager:

$ yarn add firebase
# or 
$ npm install firebase
Enter fullscreen mode Exit fullscreen mode

A configuration object is needed to configure the Firebase SDK for initialization from the Firebase console.

You can get access to your Firebase config object at any time by:

  • Sign in to Firebase, then open your project.
  • Click the Settings icon, then select Project settings.
  • In the Your apps card, select the nickname of the app for which you need a config object.
  • Select Config from the Firebase SDK snippet pane.
  • Copy the config object snippet, then add it to your app's HTML.

or

  • In your console run: $ firebase apps:sdkconfig web

To make use of the configuration object we will use Quasar's app extension Qenv to handle our different environment configurations. Be sure to read up on the docs to understand how this comes into play with the following section of code.

A quick gotcha for windows users. Be sure to: npm install --save-dev cross-env and modify package.json to "dev": "cross-env QENV=development quasar dev

Qenv pulls in the .quasar.env.json in the source directory but gives us the option for git to ignore the file and is bundled on the desired build type. Either for dev, test, or production. Remember the tip from before; create separate Firebase projects in your console. Please refer to qenv installation and setup here.

Once you install qenv, set up your .quasar.env.json file with a FIREBASE_CONFIG object, and update your scripts block in your package.json. Take note in the code that I have set a Common Root Object called "environments". We now are ready to start moving into our application structure.

3. Structure

Before we dive into setting up the code, let's take a second to illustrate and discuss a bit of the opinionated direction we'll be taking. The fact that we can simply import Firebase and all its needed services into a single boot file, or just import the service directly in our Vue file and build our functionality as needed is definitely an option moving forward. But, the attempt here in these next few articles is to guide the development into more of a separated and maintainable production approach. We want to separate our services by a single namespace, firebaseServices, and also have each contextual service in a file. We can lend our structure to small and manageable files, as well as writing tests.

Alt Text

We'll revisit this again as we add more contexts to the application.

The following code snippet is meant to highlight the initial approach of setting up your application by separating your server connection and the actual service itself. The next bits are not intended to set up any real functionality, but highlight the first necessary pieces of the application structure. A typical Quasar app structure is here.

4. Base Service

The first place to get Firebase into Quasar is starting in a boot file. Create a boot file, then add its name to the boot array in the quasar.conf.js. Be sure to read up on Quasar’s boot files here. It is a great review, and also the first place to start when debugging Firebase issues.

$ quasar new boot serverConnection
Enter fullscreen mode Exit fullscreen mode

/quasar.config.json

boot: [
  'serverConnection'
],
Enter fullscreen mode Exit fullscreen mode

Our boot file is not the Firebase service itself, but a point in which to bring in the Firebase service, in case you need or want to switch out your backend to another cloud provider or traditional backend API interface.

/src/boot/serverConnection.js

import firebaseService from '../services/firebase'

export default async () => {
  const config = process.env.environments.FIREBASE_CONFIG
  firebaseService.fBInit(config)

  // Validation that our service structure is working
  // with a firebase app instance. Does not validate a
  // valid API key.
  console.log(firebaseService.auth())
}
Enter fullscreen mode Exit fullscreen mode

Calling the fBInit(config) method is just a validation that the service structure is working, but does not guarantee that the initialization happened with a valid API key.

Create a new directory in our application structure called services, and put the base service inside.

/src/services/firebase/base.js

Throughout the next couple of articles, there will be a separation of each firebase service in relation to its context. These service file will be then be pulled into the /src/services/firebase/index.js file where we can have a top-level firebaseService namespace via Object.assign().

Have a look here: /src/services/firebase

import firebase from 'firebase/app'
import 'firebase/auth'

/**
 * Gets Firebase's auth service
 * https://firebase.google.com/docs/reference/js/firebase.auth.html#callable
 * @return {Interface} The Firebase Auth service interface
 */
export const auth = () => {
  return firebase.auth()
}

/** Convenience method to initialize firebase app
 *
 * @param  {Object} config
 * @return {Object} App
 */
export const fBInit = (config) => {
  return firebase.initializeApp(config)
}
Enter fullscreen mode Exit fullscreen mode

First, we import our Firebase SDK and separate the imports per Firebase product. Be sure to check out the complete list of products, click on the expansion item for "Available Firebase JS SDKs (using bundler with modules)". Likewise, we could import the entire SDK, but you can shave off KB's by importing the products separately. Also, keep in mind if you only import just the app portion of the firebase and NOT the other products you'll end up getting undefined errors when trying to work with those products.

The fBInit method allows Firebase to register a project that was created in the Firebase console.

Run the app:

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

Once the app is finished building, it will launch to http://localhost:8080/#/.

If you have successfully instantiated the Firebase service you will see this:
Alt Text

Otherwise, your application will fail to initialize and you will have a Quasar boot error and a Firebase error message stating you have an invalid key.
Alt Text

The Firebase API key doesn't get validated until an authentication method is executed. This will be highlighted in the Email Authentication article.

5. Summary

Here is the start of our integration between Firebase into the Quasar Framework and highlights getting a project created in the Firebase console, setting up the basic structure for our serverConnection and our base Firebase service files. This base service is ready for future application needs. It will serve as a starting point for any Firebase type of authentication or any of the other services that Firebase offers.

6. Repository

Quasar-Firebase Repo: Base Service

Up next: Email Authentication

Discussion (9)

pic
Editor guide
Collapse
patratel profile image
patratel

Hey , first of all thank you for posting this guide. It has been very informative. I've gone through it and implemented this login method on my app. Although i stumbled upon an issue that I am unable to resolve. As a matter of fact it is part of the guide, in the 4th section "Otherwise, your application will fail to initialize and you will have a Quasar boot error and a Firebase error message stating you have an invalid key." I've checked the API key a number of times and it does seem to be correct. I cannot figure what do you mean with this step of the guide "The Firebase API key doesn't get validated until an authentication method is executed. This will be highlighted in the Email Authentication article."

Thanks in advance

Collapse
patratel profile image
patratel

Ok i found my mistake , i'm gonna drop it here in case anyone else encounters it. I didn't read the QEnv documentation all the way through. Apparently in order to be able to run QENV on Windows you also have to run "npm install --save-dev cross-env" and modify package.json to "dev": "cross-env QENV=development quasar dev"

Collapse
stephencarico profile image
Stephen Carico

My quasar.env.json file and package.json scripts are exactly as yours are in your repo, but in my serverConnection.js file this is what worked...

const config = process.env.FIREBASE_CONFIG

Collapse
adamkpurdy profile image
Adam Purdy Author

From the QEnv docs you can set a "Common Root Object". This is what I did for my QEnve installation and is reflected in my code in the serverConnection.js file.

QEvn docs: github.com/quasarframework/app-ext...

Collapse
stephencarico profile image
Stephen Carico

Ah. I see what happened. During the QEnv setup I defaulted to "none" when asked, "What name would you like to use for your Common Root Object." After going into my quasar.extensions.json file I was able to switch the common_root_object value to environments. Worked like a charm! Thank you for responding and pointing me to the root of the issue.

Thread Thread
adamkpurdy profile image
Adam Purdy Author

Thank you for posting your question. I added a bit of guidance in that area of the article pointing out that piece of QEnv.

Collapse
bonatoc profile image
Christian Bonato

Thank you for this.
Just a quick typo: the link to the Boot Files doc doesn't work, as of 2020-12-04. The correct link is: quasar.dev/quasar-cli/boot-files

Collapse
jimoquinn profile image
Jim O'Quinn

You lost me at qenv. Made multiple attempts to get past the 2nd step in the 1st tutorial and quit in frustration.

Collapse
adamkpurdy profile image
Adam Purdy Author

Jim are you familiar with what QEnv is doing and how it is handling the Firebase config object? Be sure to read the QEnv docs as this is a great Quasar application extension that offers the developer to handle our environment configurations during the build process. Feel free to jump into the Quasar discord in the #firebase channel for some clarification and help.