Hosting Webflow Website in Firebase

Publishing help Hosting
1

Can I host my webflow website through firebase? If yes, please help me how.

2

Hi @rohanpalkiit,

I know this is possible as there is currently a site: flowbase.com that does just that. However, I have never tried it before, although, you could probably reach out to the team at flowbasecom and ask them about this setup!

3

The domain is flowbase.co

I am too looking for info how to export a Webflow site using ‘collections’ into Firebase hosted database. When I export WF files, the images from my collection are hard coded embedded.

Do you know how to restore the ‘dynamic’ data of a collection when using Firebase?

4

Hi. Sorry bout the site confusion. Unfortunately, i have never used it. I would recommend reaching out to the team at flowbase with regards to those steps.

5

I know this is a late post but in case anyone else ends up here with the same question…
Here’s my approach.

  1. Export your Webflow site: I recommend using https://stacket.app/ if you want to work with traditional HTML pages (multi page site) OR https://designsync.app/ if you want to convert your site to React / Next.js (single page app)

  2. Clone your repo to your local computer: Both of these services should give you access to your very own Github repository will all of your exported pages, css, fonts, optimized images etc. You’ll want to “git clone” this repo to your machine so you can make edits and deploy to Firebase hosting.

  3. Install Firebase Tools: Once you have this repo on your local machine, open a terminal and enter: npm install -g firebase-tools. This CLI tool will enable you to log into your Firebase account from the command line and deploy your local repo to Firebase hosting. Alternatively, you can set up a Github action in your local codebase that will deploy automatically every time a change gets committed to your repository.

  4. Set Up Webflow Webhooks with Firebase Cloud Functions: What I’d do now is set up a serverless function on Firebase Cloud functions that you can use as an endpoint for Webflow Webhooks. You’ll want to create hooks for collection_item_changed, collection_item_deleted and collection_item_created. These hooks will catch a collection item payload from Webflow that looks like this:

{
  "_archived": false,
  "_draft": false,
  "color": "#a98080",
  "name": "Exciting blog post title",
  "post-body": "<p>Blog post contents...</p>",
  "post-summary": "Summary of exciting blog post",
  "main-image": {
    "fileId": "580e63fe8c9a982ac9b8b749",
    "url": "https://d1otoma47x30pg.cloudfront.net/580e63fc8c9a982ac9b8b744/580e63fe8c9a982ac9b8b749_1477338110257-image20.jpg"
  },
  "slug": "exciting-post-b",
  "author": "580e640c8c9a982ac9b8b778",
  "updated-on": "2016-11-15T22:45:32.647Z",
  "updated-by": "Person_5660c5338e9d3b0bee3b86aa",
  "created-on": "2016-11-15T22:45:32.647Z",
  "created-by": "Person_5660c5338e9d3b0bee3b86aa",
  "published-on": null,
  "published-by": null,
  "_cid": "580e63fc8c9a982ac9b8b745",
  "_id": "582b900cba19143b2bb8a759"
}
  1. Sync Collection Items to Firestore with Webhooks: Inside of these Cloud Functions, you can then use the Firestore admin SDK to copy over received collection item payload to a document in your Firestore collection.

This a very high level set of steps.
If anyone needs a more in depth breakdown on this approach, feel free to shoot me a DM.

4 Likes