A Simple Trick to Rewrite Your Cloud Functions URL

We all agree, Cloud Functions URL are ugly! Let’s see together how to rewrite Firebase Cloud Functions URLs in an Angular web application (or any other Javascript framework or library).

Initialize Cloud Functions

If your web app uses already Firebase Hosting you can simply run firebase init functions to initialize Cloud Functions. If not, check out my article on How to deploy Angular 9 WebApp to Firebase for free.

Rewriting your URLs

Let’s create a simple Http Cloud Function in Javascript that returns “Hello from Medium”.

Source code : https://github.com/cwebbn/myWebAppMedium/blob/36e9154a99be3bcd45093ab9723ffe81e2eb4512/functions/index.js

Run firebase deploy --only functions to deploy your Cloud Function inside the functions directory.

Your function was deployed but — The URL created by Google may not have an elegant or visually appealing presentation.

To rewrite your Cloud Function link go to the /firebase.json file. In the rewrites array add this object before the existing one:

Source code : https://github.com/cwebbn/myWebAppMedium/blob/36e9154a99be3bcd45093ab9723ffe81e2eb4512/firebase.json

Run firebase deploy --only hosting to send changes to the server.

Congrats! Your Cloud Function is now accessible at https://YOURDOMAIN/api/hello. Your Angular app can now access your Cloud Function via this cleaner looking URL.

Resources

cwebbn/myWebAppMedium