Vueflame

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

Remove this line after completion: Clone this project and find and replace vueflame with your firebase project name (keep the case sensitivity e.g. vueflame -> myproject and Vueflame -> Myproject etc.)

Copy .env.example to .env and fill in the values, note that VITE_FIREBASE_API_KEY is not the same as VITE_PROJECT_ID need to be prefixed with demo- read firebase docs

Frontend

npm run setup

Copy firebase-messaging-sw-*.js and manifest.webmanifest from dist folder to public folder (your will need to do that again after each you change those files)

Run server and Hot-Reload for Development

Run frontend dev server

npm run emulators:dev

Run backend dev server

cd functions 
npm run build:watch

Run server and Minify for Production

npm run emulators:preview

Run Unit Tests with Vitest

npm run emulators:test:unit

Run End-to-End Tests with Cypress

npm run emulators:test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

# npm run build
npm run emulators:test:e2e

Lint with ESLint

npm run lint

Configure GitHub actions (init via Firebase)

Run this firebase init hosting:github to regenerate .github folder and authorized firebase to deploy to GitHub (delete .github folder before running this command) read here for manual setup

Protect main branch (only after initial commit):

• Go to Settings -> Branches -> Add rule (or edit existing rule) -> Add main branch
  • check Require a pull request before merging -> check Require approvals -> choose 1 -> check Require approval of the most recent reviewable push
  • check Require status checks to pass before merging -> check Require branches to be up to date before merging
  • check Require conversation resolution before merging
  • check Require linear history
  • check Lock branch

Automatically delete branch after merge:

• Go to Settings -> check Automatically delete head branches

Allow only squash merge:

• Go to Settings -> check Allow squash merging -> uncheck Allow merge commits -> uncheck Allow rebase merging

Allow firebase to deploy:

• Go to Settings -> Actions -> General -> check Read and write permissions -> check Allow GitHub Actions to create and approve pull requests

Troubleshooting

If you get 403, PERMISSION_DENIED error when running npm run emulators:dev, remove the demo prefix and run npm run emulators:dev again this code is in the src/firebase-messaging-sw.ts and in src/plugins/firebase.ts

if (location?.hostname === 'localhost') {
    firebaseConfig.projectId = 'demo-' + firebaseConfig.projectId
}

but then you will need to change it back or firestore UI will not work in the emulator