Example project using a Vue frontend to send data an Apollo GraphQL server based in a cloud function on Firebase. Check out the demo!
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!
The first step is to create a new project in Firebase. 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.