{"id":25786208,"url":"https://github.com/u12206050/gridsome-firebase-starter","last_synced_at":"2025-02-27T09:05:08.467Z","repository":{"id":38808661,"uuid":"183651049","full_name":"u12206050/gridsome-firebase-starter","owner":"u12206050","description":"Frontend Starter for Gridsome \u0026 Firebase using Firesync","archived":false,"fork":false,"pushed_at":"2022-12-10T17:16:45.000Z","size":5718,"stargazers_count":48,"open_issues_count":23,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-13T14:49:31.773Z","etag":null,"topics":["firebase","gridsome","gridsome-starter","vuefire","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/u12206050.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-26T15:18:25.000Z","updated_at":"2024-01-01T20:54:43.000Z","dependencies_parsed_at":"2022-08-31T21:10:32.982Z","dependency_job_id":null,"html_url":"https://github.com/u12206050/gridsome-firebase-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/u12206050%2Fgridsome-firebase-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/u12206050%2Fgridsome-firebase-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/u12206050%2Fgridsome-firebase-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/u12206050%2Fgridsome-firebase-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/u12206050","download_url":"https://codeload.github.com/u12206050/gridsome-firebase-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240997046,"owners_count":19891089,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","gridsome","gridsome-starter","vuefire","vuejs"],"created_at":"2025-02-27T09:05:07.781Z","updated_at":"2025-02-27T09:05:08.460Z","avatar_url":"https://github.com/u12206050.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Starter for Gridsome \u0026 Firebase\n\n## What is inside\n\n1. Ready to go firebase setup\n2. Login and logout using Firebase authentication\n3. Stores to keep everything in sync\n4. Code examples to get you running\n5. No style framework so you are free to choose\n\n### [Gridsome](https://gridsome.org/docs)\n\nStatic site builder, but does not limit to how dynamic it can be client side\n\n### [Firebase](https://firebase.google.com/docs)\n\n**Cloud Firestore** – Realtime nosql datastore\n\n**Firebase Authentication with FirebaseUI** – Supports social and email login\n\n**Cloud Functions** – Execute custom written functions\n\n\n### Other\n\n  **Firesync** – Keep Firestore subscriptions in sync with store. Checkout `firesync.js` to see the examples\n\n  **Simple Store** – Checkout how your clicks are being counted from the layout to where it is displayed\n\n  **SCSS** – Locate and add more mixins in the `assets/sass` directory, all files are automatically globally available\n\n  **[FlexGrid](http://flexboxgrid.com/)** – For all your basic layout needs\n\n\n### Components\n\n  **Auth Set** – Set of login and logout components\n\n  **Loading** – A simple loading component that you can use anywhere\n\n\n# Getting Started\n\nIf you don't have gridsome installed run `npm install --global @gridsome/cli`\n\n## Frontend\n\n1. Clone the repo or run `gridsome create website https://github.com/u12206050/gridsome-firebase-starter.git` to create the site in a folder called `website`\n2. Copy the `.env.example` file and rename to `.env.development`\n3. Update the `.env.development` with your firebase credentials\n4. `gridsome develop` to start a local dev server at `http://localhost:8080`\n5. Happy coding 🎉🙌\n\n## Firebase\n\n1. Run `npm install -g firebase-tools` [Firebase cli](https://firebase.google.com/docs/cli)\n2. Create your project folder `mkdir my-project`\n3. Navigate to your project folder `cd my-project`\n4. Run `firebase login`\n5. Run `firebase init`\n\n## Deploying your site\n\nUpdate your enviroment variables in a file called `.env.production`\n\n1. Build your static site `gridsome build``\n2. Move the dist folder into your project directory as public `mv dist ../public`\n3. To preview your static site run `firebase serve --only hosting`\n4. Deploy the site to [Firebase hosting](https://firebase.google.com/docs/hosting/) run `firebase deploy --only hosting`\n\nTip: 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`\n\n## Functions\n\nOn every Vue component/view you have access to the following:\n\n  **`this.$db`**: Used for creating references and fetching data from Firestore. Same as `firebase.firestore()`\n\n    Example: `this.$db.collection('documents').get().then(snapshot =\u003e console.log(snapshot.size))`\n\n  **`this.$bind`**: Bind the results of a firestore reference to a property on the component\n\n    Example: `this.$bind(this.$db.collection('documents'), 'documents')`: Now on `this.documents` you can access the documents and have the automatically be updated.\n\n  **`this.$unbind`**: Unbinds the property so it no longer gets updates.\n\n    Example: `this.$unbind('documents', null?): The 2nd argument is optional. To leave the property untouched in its current state leave out the `null`\n\n  **`this.$functions`**: Most commonly used for creating requests to Firebase functions. Same s `firebase.functions()`\n\n    Example: `this.$functions.httpsCallable('getTime')().then(time =\u003e console.log(time))`\n\n  **`this.$auth`**: This is extended on the `firebase.auth()` object which besides the `logout()` and `currentUser` methods and function it also has:\n\n    `this.$auth.isLoggedIn`: If the user is logged in or not\n\n    `this.$auth.userId`: The user id of the currently logged in user\n\n    `this.$auth.roles`: An object of roles the user has been assigned\n\n  **`this.$firestore`**: Contains the useful field properties to use when writing to db.\n\n    `this.$firestore.GeoPoint`\n\n    `this.$firestore.Timestamp`\n\n    `this.$firestore.FieldValue`\n\n## Other\n\n  `npm run build`: Will build your project and test your **bundle size** according to the size limits set in `package.json`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fu12206050%2Fgridsome-firebase-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fu12206050%2Fgridsome-firebase-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fu12206050%2Fgridsome-firebase-starter/lists"}