DEV Community

Cover image for Proxy DataFast with Firebase Hosting
Eugene Gusarov
Eugene Gusarov

Posted on

Proxy DataFast with Firebase Hosting

#firebase #firebasehosting #datafast #reverseproxy

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"
     },
     ...
   ]
 },
 ...
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"]
   }
 ]
 ...
}
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

Install express dependecies:

npm i -s express express-http-proxy
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
     ...
   ]
 },
 ...
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

5. Deploy your website and functions

The proxy configuration will take effect automatically after deployment:

firebase deploy --only hosting,functions
Enter fullscreen mode Exit fullscreen mode

Verification

To verify the proxy is working:

  1. Visit your website
  2. Open the network tab in your browser's developer tools
  3. 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.

Top comments (0)