- Ready to go firebase setup
- Login and logout using Firebase authentication
- Stores to keep everything in sync
- Code examples to get you running
- No style framework so you are free to choose
Static site builder, but does not limit to how dynamic it can be client side
Cloud Firestore – Realtime nosql datastore
Firebase Authentication with FirebaseUI – Supports social and email login
Cloud Functions – Execute custom written functions
Firesync – Keep Firestore subscriptions in sync with store. Checkout firesync.js
to see the examples
Simple Store – Checkout how your clicks are being counted from the layout to where it is displayed
SCSS – Locate and add more mixins in the assets/sass
directory, all files are automatically globally available
FlexGrid – For all your basic layout needs
Auth Set – Set of login and logout components
Loading – A simple loading component that you can use anywhere
If you don't have gridsome installed run npm install --global @gridsome/cli
- Clone the repo or run
gridsome create website https://github.com/u12206050/gridsome-firebase-starter.git
to create the site in a folder calledwebsite
- Copy the
.env.example
file and rename to.env.development
- Update the
.env.development
with your firebase credentials gridsome develop
to start a local dev server athttp://localhost:8080
- Happy coding 🎉🙌
- Run
npm install -g firebase-tools
Firebase cli - Create your project folder
mkdir my-project
- Navigate to your project folder
cd my-project
- Run
firebase login
- Run
firebase init
Update your enviroment variables in a file called .env.production
- Build your static site `gridsome build``
- Move the dist folder into your project directory as public
mv dist ../public
- To preview your static site run
firebase serve --only hosting
- Deploy the site to Firebase hosting run
firebase deploy --only hosting
Tip: You can move your frontend project into your project folder for easier development ex. my-project/website/
and then deploy with a single command within your website folder: npm run deploy
On every Vue component/view you have access to the following:
this.$db
: Used for creating references and fetching data from Firestore. Same as firebase.firestore()
Example: `this.$db.collection('documents').get().then(snapshot => console.log(snapshot.size))`
this.$bind
: Bind the results of a firestore reference to a property on the component
Example: `this.$bind(this.$db.collection('documents'), 'documents')`: Now on `this.documents` you can access the documents and have the automatically be updated.
this.$unbind
: Unbinds the property so it no longer gets updates.
Example: `this.$unbind('documents', null?): The 2nd argument is optional. To leave the property untouched in its current state leave out the `null`
this.$functions
: Most commonly used for creating requests to Firebase functions. Same s firebase.functions()
Example: `this.$functions.httpsCallable('getTime')().then(time => console.log(time))`
this.$auth
: This is extended on the firebase.auth()
object which besides the logout()
and currentUser
methods and function it also has:
`this.$auth.isLoggedIn`: If the user is logged in or not
`this.$auth.userId`: The user id of the currently logged in user
`this.$auth.roles`: An object of roles the user has been assigned
this.$firestore
: Contains the useful field properties to use when writing to db.
`this.$firestore.GeoPoint`
`this.$firestore.Timestamp`
`this.$firestore.FieldValue`
npm run build
: Will build your project and test your bundle size according to the size limits set in package.json