Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Deploy to firebase hosting from a firebase function

Is it possible to deploy static assets from a firebase function to the firebase hosting?

Use case: A blog with static html files. Blog content and meta infos would be stored in the database (content as markdown). On publish or update, a firebase function is triggered which parses the markdown and generates a static html file for the blog post and deploys it to the firebase hosting. After deployment, the function would store the live URL in the database.

Would this workflow be possible? In the current documentation, I cannot find anything about deploy from functions.

As a workaround, I could imagine a setup with travis-ci. The function triggers a rebuild on travis, travis builds the static assets and deploys them to firebase hosting, but this seems like a huge overhead.

I could also pull the markdown content from the db and build on the client, but I really like to try the static file approach for initial loading time reasons.

like image 751
Philipp Gfeller Avatar asked Mar 22 '17 08:03

Philipp Gfeller


People also ask

How do I deploy my Firebase project to a runtime environment?

Note: To deploy to a runtime environment of Node.js 10 and higher, your Firebase project must be on the Blaze pricing plan. For more details, refer to Cloud Functions pricing. Deploy your function as well as your Hosting content and config to your site by running the following command from the root of your local project directory:

What is Firebase Hosting?

Firebase Hosting is production-grade web content hosting for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network). You can also pair Firebase Hosting with Cloud Functions or Cloud Run to build and host microservices on Firebase.

How do I use express JS with Firebase Hosting and Cloud Functions?

The following section provides a walk-through example for using Express.js with Firebase Hosting and Cloud Functions. Install Express.js in your local project by running the following command from your functions directory: npm install express --save Open your /functions/index.js file, then import and initialize Express.js:

How do I automate deployment to Firebase from Google Cloud?

To automate your deployment to Firebase: In your repository, add a build config file with steps to invoke the firebase deploy command where project-id is your Cloud project ID: Create a trigger with the build config file created in the previous step: Open the Triggers page in the Google Cloud Console:


2 Answers

I have been wanting to do this for a long time, and it seems that with the newly unveiled Firebase Functions Hosting Integration... well, we still can't do exactly what we want. But we can get close!

If you follow the read the post above, you can see how we can now edit the firebase.json redirect a URL(s) to point to a firebase function which will can build the page from markdown stored in firebase and serve that to the client.

The thing is, this happens on every GET request for each page. Which is dumb (for a largely static page like a typical blog). We want static pages that are instantly available without needing to wait for functions to generate anything (even though that happens really fast). We can mitigate that by setting the Cache-Control header to an arbitrarily large number with the response object as in

res.set('Cache-Control', 'public, max-age=600, s-maxage=31536000');

Which will tell the browser to cache the result for 10 minutes, but the CDN to cache it for a year. This almost solves the problem of wanting pre-rendered, instantly available pages for all but the first hit, which will incur the render cost. Plus, the CDN can evict your cached content if it determines that there is not enough traffic to warrant storing it.

Getting closer.

But we aren't quite where we need to be. Say you publish your post and a few days later, notice a typo? Well, I think you are pretty much hosed. Your cached content will continue to be served for the rest of the year unless you do something like:

Change the URL of the Post - This is probably a bad idea, as it will tank any SEO and break links to the page that are already in the wild.

There may be a way to force the CDN to update, perhaps by augmenting your 'publish blog post' process to included a javascript GET request with something odd in the request header, or maybe there is a way to do it with a firebase function any time the post gets updated. This is where I get stuck.

Firebase uses Google's Cloud Platform CDN which includes a mechanism for Cache invalidation, but I don't know that this is readily available from functions -- and even if it does, it still doesn't solve getting evicted from the cache.

Personally, I will probably use the setup I described with a CDN cache age limit of intermediate length. This beats my current approach of sending markdown to the client and rendering locally using (the excellent) showdown.js, which is still really fast, but does require client side javascript and a few cpu cycles.

Hopefully someone will have a solve for this (or someone at firebase can slip pushing to hosting from functions into the next release :) ). I'll update my answer if I get it nailed down.

like image 63
qhoffman Avatar answered Nov 15 '22 19:11

qhoffman


I've haven't tried this yet, but I hope your cloud function could deploy new static files to firebase hosting with Hosting REST API.

I'll update this answer with function code and tutorial after some tests.

like image 42
Elijah Ellanski Avatar answered Nov 15 '22 20:11

Elijah Ellanski