This project combines the exercises of Shaun Pelling's D3.js & Firebase course with a Vue SPA and Bootstrap (as opposed to Vanilla JS and Material design.)
This project assumes you are running against a firebase firestore instance for persistence. See Google's documentation for creating a firestore instance.
Once you've created a firestore instance, you will need to setup the environment file with your configuration values. If you'd like, you can simply run the command:
npm run setup
And a blank configuration file will be created for you. You will still need to add your own configuration values.
Otherwise, you can do this yourself by simply copying the below snippet into a file called .env.local and filling in with the values from the firebase console: Settings > Project Settings:
VITE_FIREBASE_API_KEY='YOUR_VAL_HERE'
VITE_FIREBASE_AUTH_DOMAIN='YOUR_VAL_HERE'
VITE_FIREBASE_DB_URL='YOUR_VAL_HERE'
VITE_FIREBASE_PROJ_ID='YOUR_VAL_HERE'
VITE_FIREBASE_STORAGE_BUCKET='YOUR_VAL_HERE'
VITE_FIREBASE_MESSAGE_SENDER_ID='YOUR_VAL_HERE'
VITE_FIREBASE_MESSAGE_APP_ID='YOUR_VAL_HERE'
This file is automatically setup to be ignored by version control, and should allow you to store the necessary credentials only on the machine running the app, without accidentally publishing them by committing them.
After setup, the rest is the same as normal for a project managed with NPM. To start:
npm install
Then to run:
Compile with hot-reload for development
npm run dev
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Run the unit tests
npm run test
The project uses Cypress for e2e testing. Note that the tests assume a certain database state that can be easily recreated by starting the firebase firestore emulator locally with the provided seed data.
Once you've made sure to setup firebase tools locally (you can check with firebase --help, and making sure you get a list of commands), then loading the seed data can be accomplished by running the following command at repo root (on Windows only for now - see "Limitations" below):
firebase emulators:start --import=./cypress/fixtures/firebase
Alternatively, by starting the emulator without the seed data, you will start with the database in a clean state.
Due to internal issues in the firebase emulator, the export currently only works on Windows (where it was initially exported), and it will cause the emulator to crash if import is attempted on Linux/macOS (see firebase-tools issue 2421).
Finally, to have the application connect to the emulated instance of firebase you can start it with:
npm run dev:e2e
This makes use of Vue CLI's modes and environment variables to wire up the emulator instead.