5

I am trying to figure out the best way to set up firestore with sapper. I am specifically asking about sapper (not svelte).

There are very few tutorials on this subject, and the ones I have seen I am not sure about. They involve modifying the template.html file -- and I'm not sure if that is a good idea or not.

So, in short, I am wondering what are the best practices in terms of syncing firestore with sapper.

Any ideas?

Thanks.

Moshe
  • 6,011
  • 16
  • 60
  • 112

1 Answers1

0

There are a variety of approaches to setting up sapper with firestore. Which approach you use will depend on the requirements and goals of what you're building.

Modifying template.html

There isn't an issue with modifying the template.html as long as you keep the sapper tokens necessary for the app to run. You can likely include global script dependencies such as the firebase client before the %sapper.scripts% token (refer to those tutorials you mentioned).

In the case that Sapper is updated, you may need to update template.html—the sapper team will likely inform you of the changes necessary in the migration documents.

This approach is suitable for deploying to firebase hosting and using sapper export, since you load the Firebase client libraries for interacting with Firestore.

Using Firebase Admin SDK + Sapper Server Routes (CRUD endpoints)

This approach is for deploying sapper as a server—or rather, not using sapper export.

If you don't want to use client libraries, and you do want to fully utilize Server-Side Rendering (SSR) you can utilize the Firebase Admin SDK combined with Sapper's Server Routes (aka CRUD endpoints). The Firebase Admin SDK encompasses all Firebase products, so Firestore is included with it.

The high-level approach to using Firebase Admin SDK to manipulate Firestore Documents:

  • Use Sapper's "Server Routes" to save/fetch documents to/from firestore
  • Use Sapper's preload function to load documents/data for Server-side Rendering
  • Use the browser's fetch api to create, read, or update documents via Sapper Server Routes.

To setup Firebase Admin SDK you can follow the instructions for setting up Firestore via the Firebase documentation, and choose Node.js for the code samples (Note that with Sapper you can use ES module import instead of require statements).

Example Repository

A project I'm currently developing uses Sapper+Firestore in the approach outlined above for a CMS-like Dashboard. It is opensource on Github, so feel free to reference it.

robustrory
  • 151
  • 2