DEV Community

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

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

Adam Purdy on February 06, 2020

Table Of Contents Introduction 1.1 Assumptions Installation Firebase Configuration and Application Environment Structure Base Ser...
Read full post
Collapse
 
ezanglo profile image
Ezra Anglo •

Hi! Thanks for the article! I'm always using this to start a new firebase quasar app. I see that you updated with dotenv instead of qenv. But I encountered problems with it or with the way the scripts are built. I reinstalled cross-env and used that in my script so now it "cross-env QENV=DEV quasar dev" again and it magically works. Hope you put back that part of the article again and hope this helps any newcomers that might be having the same problem

Collapse
 
adamkpurdy profile image
Adam Purdy •

Thank you for pointing that out. I'll update the article and repo.

Collapse
 
bgrand_ch profile image
Benjamin Grand • • Edited

Thanks a lot!

Suggestion for env:

package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=staging quasar dev",
    "staging:build": "cross-env NODE_ENV=staging quasar build",
    "production:build": "cross-env NODE_ENV=production quasar build"
  }
}
Enter fullscreen mode Exit fullscreen mode

env-loader.js

const dotenv = require('dotenv')

const envParsed = dotenv.config().parsed
const separator = '_'

module.exports = NODE_ENV => {
  const nodeEnv = NODE_ENV.toUpperCase()
  const envRenamed = {}

  for (const env in envParsed) {
    const name = getEnvName(env)
    const fullName = `${nodeEnv}${separator}${name}`
    const value = envParsed[fullName]

    envRenamed[name] = value
  }

  return envRenamed
}

function getEnvName (env) {
  const regex = new RegExp(`${separator}([A-Z${separator}]+)`)

  return env.match(regex)[1]
}
Enter fullscreen mode Exit fullscreen mode

quasar.conf.js

const envLoader = require('./env-loader')

module.exports = function () {
  return {
    build: {
      env: {
        ...envLoader(process.env.NODE_ENV)
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

.env

##
# STAGING
##

# STAGING FIREBASE
STAGING_FIREBASE_API_KEY=test api key staging
STAGING_FIREBASE_APP_ID=
STAGING_FIREBASE_AUTH_DOMAIN=
STAGING_FIREBASE_DATABASE_URL=
STAGING_FIREBASE_MEASUREMENT_ID=
STAGING_FIREBASE_MESSAGING_SENDER_ID=
STAGING_FIREBASE_PROJECT_ID=
STAGING_FIREBASE_STORAGE_BUCKET=

##
# PRODUCTION
##

# PRODUCTION FIREBASE
PRODUCTION_FIREBASE_API_KEY=test api key production
PRODUCTION_FIREBASE_APP_ID=
PRODUCTION_FIREBASE_AUTH_DOMAIN=
PRODUCTION_FIREBASE_DATABASE_URL=
PRODUCTION_FIREBASE_MEASUREMENT_ID=
PRODUCTION_FIREBASE_MESSAGING_SENDER_ID=
PRODUCTION_FIREBASE_PROJECT_ID=
PRODUCTION_FIREBASE_STORAGE_BUCKET=
Enter fullscreen mode Exit fullscreen mode

process.env when staging

FIREBASE_API_KEY=test api key staging
FIREBASE_APP_ID=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_MEASUREMENT_ID=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
Enter fullscreen mode Exit fullscreen mode

process.env when production

FIREBASE_API_KEY=test api key production
FIREBASE_APP_ID=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_MEASUREMENT_ID=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
Enter fullscreen mode Exit fullscreen mode
Collapse
 
adamkpurdy profile image
Adam Purdy •

Hey Benjamin thanks for your read and suggestion. Just curious, was your suggestion to mainly remove the QENV namespace in the build env, or was there something more that you were highlighting?

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
 
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 •

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 •

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
 
prototowb profile image
Tobias Rauer • • Edited

can this approach be used for firebase 9? Even with importing { initializeApp } and { getAuth } instead, I receive:
[Quasar] boot error: ReferenceError: process is not defined
at Array.WEBPACK_DEFAULT_EXPORT (firebaseConnection.js?4d99:4:1)

EDIT: well, I didn't know that we have to put the env object into the build config object in the quasar config. Just had it in 'return', but it has to be:

return {
...
build: {
...
env: {
QENV: enviromentConfiguration(process.env.QENV)
}
...
}
...

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
 
bgrand_ch profile image
Benjamin Grand •

🔥🔥🔥

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 •

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.