Proxy DataFast with Firebase Hosting

Eugene Gusarov — Sun, 17 Aug 2025 19:45:40 +0000

Firebase Hosting does not support reverse proxy and rewrite rules for external destinations natively. So the following configuration in firebase.json will not work:

{
 "hosting": {
   ...
   "rewrites": [
     {
       "source": "/js/script.js",
       "destination": "https://datafa.st/js/script.js"
     },
     {
       "source": "/api/events",
       "destination": "https://datafa.st/api/events"
     },
     ...
   ]
 },
 ...
}

A way to workaround this problem is to use Firebase Cloud Functions and configure them to behave like a reverse proxy. This tutorial will show you how.

Note: Firebase also claims to natively provide the experimental setup out-of-box similar to the one outlined here with the web frameworks experiment. It appears to be not working at the time of writing.

1. Set up Firebase Functions for your project (optional)

If you haven’t yet, add support of Firebase Functions to your Firebase project.

firebase init functions

Follow the instructions from the command above according to your setup. Optionally, configure Firebase Emulators for Firebase Functions for local testing.

At the end of the process, you should end up having a new folder typically called /functions in your project and your firebase.json with a similar configuration:

{
 ...
 "emulators": {
   "functions": {
     "port": 5001,
     "host": "127.0.0.1"
   },
   ...
 },
 "functions": [
   {
     "source": "functions",
     "codebase": "default",
     "ignore": ["node_modules", ".git", "firebase-debug.log", "firebase-debug.*.log", "*.local"]
   }
 ]
 ...
}

2. Create a ReverseProxy Firebase Function

Create a new Firebase Function and configure it to behave like a Reverse Proxy. The easiest way to do it is by using Express.js and a publically available Express HTTP Proxy middleware.

Make sure you’re in the functions/ folder:

cd functions/

Install express dependecies:

npm i -s express express-http-proxy

Create a new reverseProxy Firebase function with the code below:

const { onRequest } = require("firebase-functions/v2/https");
const express = require("express");
const proxy = require("express-http-proxy");


const app = express();


app.set("trust proxy", true);


app.use(
 "/js/script.js", proxy("https://datafa.st", {
   proxyReqPathResolver: () => "/js/script.js",
 }),
);


app.use(
 "/api/events", proxy("https://datafa.st", {
   proxyReqPathResolver: () => "/api/events",
 }),
);


exports.reverseProxy = onRequest(app);

3. Configure rewrite rules for ReverseProxy function

Update your Firebase Hosting configuration in firebase.json to point to the reverseProxy function you created:

{
 "hosting": {
   ...
   "rewrites": [
     {
       "source": "/js/script.js",
       "function": "reverseProxy"
     },
     {
       "source": "/api/events",
       "function": "reverseProxy"
     },
     // Your other rewrite rules
     ...
   ]
 },
 ...
}

4. Update Your script tag

Finally, update the path to Datafast script everywhere in your codebase:

<script 
  data-website-id="<your-website-id>" 
  data-domain="<your-domain>"
  src="/js/script.js">
  defer 
</script>

5. Deploy your website and functions

The proxy configuration will take effect automatically after deployment:

firebase deploy --only hosting,functions

Verification

To verify the proxy is working:

Visit your website
Open the network tab in your browser's developer tools
Check that analytics requests are going through your domain instead of datafa.st

What is DataFast?

DataFast is a lightweight analytics platform that helps startups track revenue, conversions, and customer journeys without the clutter of traditional analytics.

DEV Community: Eugene Gusarov