https://github.com/jvanst/vue-firebase-emulator
Demo app with Vue.js and Firebase Emulator
https://github.com/jvanst/vue-firebase-emulator
Last synced: about 1 month ago
JSON representation
Demo app with Vue.js and Firebase Emulator
- Host: GitHub
- URL: https://github.com/jvanst/vue-firebase-emulator
- Owner: jvanst
- Created: 2024-09-13T22:43:51.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-16T19:08:15.000Z (almost 2 years ago)
- Last Synced: 2026-02-01T15:59:35.689Z (5 months ago)
- Language: TypeScript
- Size: 85.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue.js + Firebase Emulator Suite
This is a simple Vue 3 project that uses Firebase Emulator Suite for local development.
## Project setup
### Pre-requisites
- Node.js (v20 preferred)
- Visual Studio Code (recommended)
### Getting started
**1. Clone the repository**
**2. Install Firebase Emulator Suite**
Note: You will need Java JDK 11 or heigher to run the Firebase Emulator Suite. https://firebase.google.com/docs/emulator-suite/install_and_configure
In the terminal, run the following command:
```bash
npm install -g firebase-tools
```
**3. Start the Firebase Emulator Suite using the VSCode task**
- Open the command palette (Ctrl + Shift + P)
- Type `Tasks: Run Task`
- Select `Start Firebase Emulator Suite`, press Enter
- After the task is completed, you should see the following output:
```
┌─────────────────────────────────────────────────────────────┐
│ ✔ All emulators ready! It is now safe to connect your app. │
│ i View Emulator UI at http://127.0.0.1:4000/ │
└─────────────────────────────────────────────────────────────┘
```
Note: If you're using a different editor, you can start the Firebase Emulator Suite by running the following command in the terminal (from the `firebase-emulator` folder of the project):
```bash
firebase emulators:start --project demo-app --import ./data --export-on-exit
```
**4. Install the dependencies for the Vue project**
```
npm install
```
Now you can access the Firebase Emulator Suite UI at http://localhost:4000
**5. Finally, Start the Vue project**
```
npm run dev
```
## Important files
- `firebase_emulators`: Firebase Emulator Suite configuration files
- `data`: Contains import/export data from the firestore emulator. Data is imported when the emulator starts, and exported when the emulator stops.
- `firebase.json`: Firebase Emulator Suite configuration file
- `firestore.rules`: Firestore security rules
- `firestore.indexes.json`: Firestore indexes
- `src/firebase/index.ts`: Firebase configuration file. This connects to the Firebase Emulator Suite when running locally. Note: This file is imported in `main.ts` to initialize Firebase.
## Other important reading
- [Firebase Emulator Suite](https://firebase.google.com/docs/emulator-suite): Firebase Emulator Suite documentation
- [Vue 3](https://v3.vuejs.org/): Vue 3 documentation
- [Vue Router](https://next.router.vuejs.org/): Vue Router documentation
- [Vuefire](https://vuefire.vuejs.org/): Vuefire documentation (useful for integrating Firebase with Vue)