https://github.com/danielwaltz/vue-apollo-firebase-functions

Example project for using Firebase cloud functions with Vue and Apollo
https://github.com/danielwaltz/vue-apollo-firebase-functions

apollo cloud-functions firebase firebase-functions graphql node serverless-functions template-project vue vue-apollo vue-router vuejs

Last synced: 22 days ago
JSON representation

Example project for using Firebase cloud functions with Vue and Apollo

• Host: GitHub
• URL: https://github.com/danielwaltz/vue-apollo-firebase-functions
• Owner: danielwaltz
• Created: 2019-01-20T06:31:26.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2021-09-03T01:41:33.000Z (over 3 years ago)
• Last Synced: 2024-12-02T20:50:18.932Z (3 months ago)
• Topics: apollo, cloud-functions, firebase, firebase-functions, graphql, node, serverless-functions, template-project, vue, vue-apollo, vue-router, vuejs
• Language: JavaScript
• Homepage: https://vue-apollo-firebase-functions.firebaseapp.com/
• Size: 325 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue Apollo Firebase Functions

Example project using a Vue frontend to send data an Apollo GraphQL server based in a cloud function on Firebase. Check out the [demo](https://vue-apollo-firebase-functions.firebaseapp.com/)!

## Local Development

Clone the repo and download dependencies. Dependencies will need to be downloaded in two locations; the repo root and the `functions` directory. `nvm` is used in the `functions` directory because Firebase cloud functions run on node `v8.14.0` and don't give you an option to use a later version. `npm` must also be used in the `functions` directory for most tasks.

```

yarn

cd functions

npm i

```

After dependencies are downloaded, start the frontend server and Firebase functions emulator.

```

yarn serve

cd functions

npm run serve

```

You can then navigate to `http://localhost:8080` and changes made will be reflected on save. The emulated cloud function is located at `http://localhost:5000/vue-apollo-firebase-functions/us-central1/api/graphql` and includes a GraphQL playground. Make sure you change the url inside the playground for it to work properly!

## Build & Deploy

The first step is to create a new project in [Firebase](https://firebase.google.com/). It is free to host a simple cloud function with a couple gotchas; strict rate limits and no access to the outside internet from inside the function. It's limiting but perfect for getting started.

After your project is created run `yarn firebase login` from the repo root. After you have logged in to the Firebase cli you then need to change instances of `vue-apollo-firebase-functions` throughout the project to the id of your new project. I recommend running a find and replace.

After the urls are updated simply run `yarn deploy` and wait for the deployment to Firebase to complete! By default it will deploy both the frontend and function in one go.