How To Create A Mobile App Using Vite, Vue, and Ionic Capacitor - Adding Firebase & Firebase Emulator To Project

This page summarizes the projects mentioned and recommended in the original post on dev.to
Android Vue CSS Firebase HTML

SurveyJS
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
Our great sponsors

  • firebase-tools

    The Firebase Command Line Tools

    • aaronksaunders@Aarons1ProM1Pro vite-vue-cap % firebase emulators:start i emulators: Starting emulators: auth, firestore ⚠ firestore: Did not find a Cloud Firestore rules file specified in a firebase.json config file. ⚠ firestore: The emulator will default to allowing all reads and writes. Learn more about this option: https://firebase.google.com/docs/emulator-suite/install_and_configure#security_rules_configuration. i firestore: Firestore Emulator logging to firestore-debug.log ✔ firestore: Firestore Emulator UI websocket is running on 9150. i ui: downloading ui-v1.11.4.zip... Progress: =========================================================================> (100% of 4MB) i ui: Removing outdated emulator files: ui-v1.6.5 i ui: Removing outdated emulator files: ui-v1.6.5.zip i ui: Emulator UI logging to ui-debug.log ┌─────────────────────────────────────────────────────────────┐ │ ✔ All emulators ready! It is now safe to connect your app. │ │ i View Emulator UI at http://127.0.0.1:4000/ │ └─────────────────────────────────────────────────────────────┘ ┌────────────────┬────────────────┬─────────────────────────────────┐ │ Emulator │ Host:Port │ View in Emulator UI │ ├────────────────┼────────────────┼─────────────────────────────────┤ │ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth │ ├────────────────┼────────────────┼─────────────────────────────────┤ │ Firestore │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │ └────────────────┴────────────────┴─────────────────────────────────┘ Emulator Hub running at 127.0.0.1:4400 Other reserved ports: 4500, 9150 Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

  • vuefire

    🔥 Firebase bindings for Vue.js

    • We'll walk you through the process step-by-step, providing terminal commands and source code to support the video, so you can follow along and see exactly how it's done. But that's not all - this post is part of an ongoing series on Firebase integration with Vite, Vue project. In upcoming videos, we'll show you how to fully integrate Firebase with VueFire, a library that provides seamless integration of Firebase with Vue.js applications.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • capacitor

    Build cross-platform Native Progressive Web Apps for iOS, Android, and the Web ⚡️

    • If you've been struggling with testing and iterating on your Firebase project, constantly having to push to a live environment just to see your changes, then you're in luck! In this post, we'll show you how to integrate Firebase Emulator into your Vite, Vue project using Ionic Capacitor, giving you the power to test, iterate and reset your data, all from the comfort of your local machine.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts