drejohnson/sapper-graphql-firebase

Svelte + Sapper + GraphQL + Firebase Auth

Svelte + Sapper + Firebase + GraphQL 🔥

Svelte Starter with Sapper, GraphQL and Firebase Auth.

Features

• Svelte
• Sapper
• RxJS
• GraphQL via Hasura's graphql-engine
• Authentication via Firebase Auth
• Uses Service Worker to Cache GraphQL Request

Quick start

• Install dependencies: run yarn in project root
• For dev server: run yarn dev or npm run dev, from project root. The app should be running at: http://localhost:3000.
• To build frontend run: yarn build or npm run build from project root. Run yarn start or npm start to start app.

Notes

• Repo was set up using my personal Hasura and Firebase configurations which is not included. So some setup is required for this repo to work for you.
• You will need to edit the .env file to add your credentials
• Add your Firebase config to `src/firebase/config.js
• You also need to update the graphql directory with your own queries and mutations
• To run/test in docker locally run docker run -p 3000:3000 -it <IMAGE> sh. e.g. docker run -p 3000:3000 -it gcr.io/your_project/your_service:54bxr7g9 sh, then from inside image run node __sapper__/build. Now open browser to localhost:3000

Deploy

• Uses Cloud Run
• To deploy on Cloud Run: run yarn deploy or npm run deploy,

TODO

• Move the src/svql directory into it's own repo and publish as a lightweight graphql client for svelte on npm
• use firebase-admin
• Add TypeScript when supported

sapper-graphql-firebase's Issues

Issue with deployment to now

Hi Dre,

I've been fascinated by your setup here for the past few days, learned about some new platforms like Hasura.
But I've been stuck on trying to get this to run on Now 2.
I think I've done everything needed.
My .env file contains hasura credentials etc.
I added a config.js file to the src/firebase/ folder
Successfully deployed the function to add the hasura tokens from firebase auth
And locally it works like a charm to log in and log out.

So my next step was to try and deploy it to now, and that's where I'm stuck.
I keep getting a 500 server error message, and it is complaining about modules in server.js not being found.
Do you have any pointers on how you've gotten this to work for you?

Graphql Setup

Hey, thanks again for this template. I am a bit of a noob, and I am looking into setting up graphql in my sapper app using hasura. Would you still recommend this setup for graphql? I was looking at the svelte-apollo package but I like your approach better, I just don't know enough yet to know if there are any things to be aware of with this approach.

Thanks again for your time!

Circular dependency warnings

Hi, and thanks for the template, very useful and well crafted!
A doubt about one thing though: I get

Circular dependency: src/firebase/auth.js -> src/firebase/init.js -> src/firebase/auth.js

Would it be possible to move the authListener maybe in the init.js file so that it would not need circular imports?

Also, a nice to have, some comments/readme about the operations going on with the auth + forkJoin + tap + etc. for a non RxJs developer

config.js example with empty data

Can I see the src/firebase/config.js example with empty data?
Or where can I see the example config.js?

'config' is not exported by src/firebase/config.js, imported by src/firebase/init.js
2: import { map, tap } from 'rxjs/operators'
3: import { authListener } from './auth'
4: import { config } from './config'

my config.js

var firebaseConfig = {
    apiKey: "*******************************************",
    authDomain: "sapper-jwt.firebaseapp.com",
    databaseURL: "https://sapper-jwt.firebaseio.com",
    projectId: "sapper-jwt",
    storageBucket: "sapper-jwt.appspot.com",
    messagingSenderId: "**********************",
    appId: "1:****************:web:*******************"
  };

Thank you!

Thanks so much for making this available, I have been struggling for days to figure out how to get firebase auth working with sapper.

What's the best way to add `firestore`?

The machinery to import and use firebase is different from standard templates that one finds around, so a copy paste would not work here.

As of now, to use firestore I am obliged to instantiate a db variable, and assign to it the firestore instantiation with a subscription.
Here's the code:

import { collectionData } from 'rxfire/firestore';
import { firebaseApp$ } from '../firebase';

let db;
firebaseApp$.subscribe(firebaseApp => (db = firebaseApp.firestore()))

This works.
However, instead of passing through firebaseApp$, I would prefer to have db instantiated inside firebase/index.js and to just import it with

import { db } from '../firebase'.

How could it be done?