Vuejs-Vuefire quickstart: vuefire-quickstart @sejrvuefire-quickstart - Documented Firebase integration w/ webpack and eslint, by @sejr.

vuefire-quickstart

vuefire-quickstart makes web application development with Vue.js and Firebase simple, providing the required npm modules and helpful comments. In the future we will likely move toward a more opinionated structure that allows for rapid project scaffolding. It comes bundled with webpack and Babel so you can tap into the latest trends in JavaScript app development.

[A demo version is available here: https://vuefire-quickstart-demo.firebaseapp.com/] (https://vuefire-quickstart-demo.firebaseapp.com/)

Build Setup

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

Deploy to Firebase

Note: When deploying with Firebase, you will be prompted for the directory name that contains your built app. By default, Firebase searches for a public directory. You should change this to dist to avoid having to modify the build process that came with the template.

# build for production with minification
npm run build

# make sure you've installed the firebase CLI
npm install -g firebase-tools

# initialize a firebase app; see above note
firebase init

# deploy to firebase servers
firebase deploy

Comments

  • I needed to switch Firebase database typ
    I needed to switch Firebase database typ

    Aug 23, 2018

    This ALMOST worked out of box; I first had to switch the database type to "Realtime Database" instead of "Cloud Firestore [BETA]", and then add permissive rules, (switch false to true) here: https://console.firebase.google.com/u/0/project/myappname/database/myappname/rules

    { "rules": { ".read": true, ".write": true } }

    Maybe just update the readme? Or would you like me to make a pull request? (I haven't done one yet...)

    Reply
  • Nice logo!
    Nice logo!

    Jul 4, 2017

    Did you make it yourself? I think it would look great as the official logo of VueFire (they don't even have one currently).

    Reply