Vue Firebase Vuetify Boilerplate

Up and running with Vue, Vuetify and Firebase the rocket way!

Demo

https://vue-firebase-boilerplate.firebaseapp.com/

Why another Vue Firebase boilerplate

When I get an idea to build something. I always end up building the foundation - login and firebase connection. Time lost instead of just clone -> run -> build!

So looking around for a boilerplate. The ones I found do to much for the small applications I want to test out. I just want a connection to firebase and good to go!

So why not just create one myself? Good way to learn more about firebase! Also I wanted a boilerplate that was built on top of vue-cli and preconfigured with Vuetify!

What you get

• Sign in page
• Signup page
• Display stored user data
• Social logins Twitter, Google, Facebook and GitHub
• Connection to Firebase using Cloud Firestore
• Built based on vue-cli
• Built with Vuetify
• Setup with Sentry
• TODO: Setup with Google Analytics Do we want this?

Project setup

• Set up firebase (See below)
• (optional) setup Sentry (See below)
• (optional) setup Analytics (Todo)
• (optional) setup CircleCI (See below)
• run following commands

yarn install
yarn deploy

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lint's and fixes files

yarn lint

Compiles and minifies for production and deploys to firebase

yarn deploy

Same as running

yarn build
yarn firebase:build

Firebase setup

TODO fix a tutorial on how to setup in firebase console

yarn firebase:login
yarn firebase:init

Follow steps TODO: Add a tutorial on how to setup firebase

Firebase user db info

For now the information on the users is stored in a collection users/{firebasekey} and the information stored is the following.

displayName: ""
email: ""
phoneNumber: ""
photoURL: ""
provider: ""
uid: ""

This information only exist if user log in using social. For ordinary email login only email is stored.

Setting up testing environment

Summary from the guide cypress-firebase

• Create a new test user by signup or by firebase console
• Create a new Service account
• Create cypress.env.json with the users UID.

"TEST_UID": "...",

• Here we also need to add the firebase configuration like we have in env.local
• Create serviceAccount.json with the private key following authenticate-with-a-service-account "Generate a new private key"
  • Paste the content in the generate json inside the serviceAccount.json file.

Sentry setup

Login to Sentry (create an account if you dont have one). Set up your project.

TODO: Tutorial on how to setup sentry

Install sentry module

yarn add @sentry/browser @sentry/integrations

Update .env.local with your api key you get from Sentry.

VUE_APP_SENTRYKEY=MY_SECRET_KEY_FROM_SENTRY

Initialize sentry before application start.

Sentry.init({
    dsn: process.env.VUE_APP_SENTRYKEY,
    integrations: [new Integrations.Vue({ Vue, attachProps: true })]
});

CircleCI setup

Pretty easy to get going, login to CircleCI and add your project :)

Good guide here learn-cicleci for more information!

Deployment

For deployment to work you need to do the following: Get a firebase deploy key using firebase login:ci login with you google account.

Inside CircleCI on you projects setting page add Environment Variables. Matching your local env file.

FIREBASE_DEPLOY_TOKEN xxxx3ojq
VUE_APP_FIREBASE_KEY xxxxaXuk
VUE_APP_FIREBASE_MESSAGESENDERID  xxxx5981
VUE_APP_FIREBASE_PROJECTID xxxxlate
VUE_APP_SENTRYKEY  xxxx1200

yarn run build

Implement in existing project

If you already have a project you want to connect.

Quickest way you

• clone this repo
• copy your src files over from your other project. (Make sure you don't override any needed functionality from this repo).
• Update package.json with your name, URLs and custom dependencies
• create .env.local update with needed parameters
• remove node_modules
• run yarn or npm install
• Setup firebase (se above)

If you want to keep your other project

• Make sure you git commit all your changes in your project
• Copy following from this repo to your project

.cicleci
.firebase
public/
src/
.browserlistrc
.eslintrc.js
.firebaserc
.gitignore
babel.config.js
database.rules.json
firebase.json
package.json
vue.config.js

• create .env.local update with needed parameters
• update .firebaserc matching you firebase project
• remove node_modules/
• remove your yarn.lock or package.lock
• run yarn or npm install
• Check all git changes
• yarn serve

Contributing

Please! Feel free to create an issue or push up an PR with changes you feel is needed.

Roadmap

TODO

Credits

This is possibly by the great people behind.

• babel
• eslint
• Firebase
• Cypress
• cypress-firebase
• Prettier
• Sentry
• testing-library/cypress
• Vue
• Vue-CLI
• Vuetify
• Social style (colors) from lipis
• Rocket logo base from kisspng
• Spinner source

And the rest of the dependencies tree that don't fit in this text :)

Know issues

@testing-library/cypress

Need to add resolved tag in package json to install correct Cypress version.

More info in issue #121