firebase-vue3-startup-kit

Purpose

This is a Start-Up kit for a Firebase web project, which uses Vue3 and firebase 9.

Requirements

• Node.js version 14 or later.

Instruction

1. Git clone this repository
2. Run "yarn global add firebase-tools" to install firebase tools.
3. Run "yarn install" once to get necessary node modules.
4. Run "yarn install" once in the functions directory as well.
5. Open the firebase console (from https://firebase.google.com) and add a project
6. From the dashboard of this project, add an app and choose "web" (</>).
7. From the setting of this app, choose "Config" (in Firebase SDK snippet)
8. Copy the config file, and paste into src/config/project.ts file.
9. Replace the word "fir-vue-startup-kit" in .firebaserc file with your Firebase project name.
10. Open the firebase console, and create a Cloud Firestore (make it "secure" for now).
11. Enable Firebase Hosting on the firebase console.

Available Scripts

In the project directory, you can run:

yarn run serve

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn run build

Builds the app for production to the dist folder.
It correctly bundles Vue in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

yarn run deploy-dev

Build and deploy the app to the Firebase cloud. Now only deploy web assets to hosting.

yarn run format

Run Prettier, rewrite code as code formatting.

yarn test

to Run browser automated test with puppeteer and @chainsafe/dappeteer. for login with wallet, Metamask chrome-extension will be needed, and puppeteer doesn't support headless mode with chrome-extension(https://github.com/puppeteer/puppeteer/blob/main/website/versioned_docs/version-16.1.0/index.md#working-with-chrome-extensions).

** So we can use this test command for local, but cannot use for CI.

Test pre-condition

1. run yarn serve on /functions/ (this will run firebase-emulator on local, to test with same-condition )
2. edit src/config/project.ts emulator: false => true
3. run yarn serve on /(top directory). (this will serve nouns-map web with localhost:8080)
4. run you can run yarn test on /.

you can re-try, re-test step 4 only.(On 1st time to test it fails randomly,because firebase emulator took much time to preplare backend,, so please retry yarn test again, on that case.)

Firebase Hosting GitHub Action

Get that service account's key and add it to your repository as a secret

1. Create and download the new service account's JSON key
2. Add that JSON key as a secret in your GitHub repository. JSON key is FIREBASE_SERVICE_ACCOUNT_FIR_VUE_STARTUP_KIT.
3. Add firebase project id as a secret in your GitHub repository. JSON key is FIREBASE_PROJECT.

More detail: see, https://github.com/marketplace/actions/deploy-to-firebase-hosting

This is the sample site I deployed.

https://firebase-vue3-startup-kit.firebase.love/