Quasar Vue.JS

Quasar Vue.JS app using Quasar Framework which includes:

• Read/Write to Google Firebase Cloud FireStore
• Fibonacci calculator
• Auto-generation of UI Elements in a page from JSON data file.

Install the Quasar CLI

npm install -g @quasar/cli

Install the Firebase CLI

npm install -g firebase-tools

Install the dependencies

yarn install

Install packages

quasar ext add @quasar/<package name>

Emvironment

• Add .quasar.env.json which is used during application bootstrap.

{
  "development": {
    "API_KEY":"",
    "AUTH_DOMAIN":"",
    "PROJECT_ID":"",
    "STORAGE_BUCKET":"",
    "MESSAGING_SENDER_ID":"",
    "APP_ID":"",
    "MEASUREMENT_ID":"",
    "DATABASE_URL":""
  },
  "production": {
    "API_KEY":"",
    "AUTH_DOMAIN":"",
    "PROJECT_ID":"",
    "STORAGE_BUCKET":"",
    "MESSAGING_SENDER_ID":"",
    "APP_ID":"",
    "MEASUREMENT_ID":"",
    "DATABASE_URL":""
  },
  "test": {
    "API_KEY":"",
    "AUTH_DOMAIN":"",
    "PROJECT_ID":"",
    "STORAGE_BUCKET":"",
    "MESSAGING_SENDER_ID":"",
    "APP_ID":"",
    "MEASUREMENT_ID":"",
    "DATABASE_URL":""
  }
}

Start the app in development mode (hot-code reloading, error reporting, etc.)

• Generate self-signed cert for serving HTTP/2 over HTTPS.
• Configure the cert path in quasar.conf.js devServer.https section.

yarn dev

Lint the files

npm run lint

Build the app for production

quasar build

Publish the webapp to firebase

firebase deploy

Publish the webapp to https://khteh.github.io GitHub Page

yarn deploy

• This will run quasar build and push-dir the content of dist/spa to https://khteh.github.io

Tests

Jest unit tests:

• Fibonacci page.
• AutoGenerate page.

yarn test:unit:<foo>

Cypress E2E or Component tests:

yarn test:e2e:<foo>
yarn test:component:<foo>