Vue.js SPA on Firebase Hosting with wildcard rewrite to Firebase Cloud Functions

Question

I have a vue.js app using vue-router. If I serve the app in the default public directory using firebase hosting and try to use https functions, the function does not get called because the router picks up the path and tries to render a route.

I moved the app to public/app and altered the firebase.json rewrites accordingly (my app content is working as expected by visiting URLs ending in /app/**) but I still cannot get the functions to run.

I tried using a rewrite with wildcard as follows

"rewrites": [
  {
    "source": "/:function",
    "function": ":function"
  },
  {
    "source": "/app/**",
    "destination": "/app/index.html"
  }
]

but this doesn't work either (I'm not sure if it's meant to with functions, I can't find an example anywhere).

e.g. I have used the default functions index.js (and uncommented the helloWorld function) and so expect /helloWorld to output the response from the helloWorld function (as I said before, if I navigate to /app/route, I get the output I expect from my vue application).

Should this work? Or do I need to do something completely different?

------Edit

After Doug's comment, I updated my functions script to the following

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import * as express from 'express';

const app = express();

app.get("/:function", (req, res) => {
    switch(req.params.function) {

        case 
            "helloWorld" : helloWorld(res)
            break;

        default : res.send("Invalid function requested.")

    }
});

function helloWorld(res) {
    res.send("Hello world!");
}

exports.api = functions.https.onRequest(app);

This works as expected when serving only functions.

But when I run firebase serve, the rewrites (as follows) are still not working for the api routes I expect to rewrite to my functions:

    "rewrites": [
      {
        "source": "/api/**",
        "function": "api"
      },
      {
        "source": "/app/**",
        "destination": "/app/index.html"
      }
    ]

I'm suspicious that when running firebase serve, it is not actually serving the functions since I don't get any endpoints listed in the terminal.

It seems that when I run 'firebase serve' it is not serving my functions because I can't even visit the same URL as when I run 'firebase serve --only functions' to get the expected response. — Paul Renshaw
You can't use route placeholders like that in rewrites. If you want routes, you'll have to set that up in an express app that you configure in the Cloud Function code. — Doug Stevenson
@DougStevenson Thanks for the comment Doug. Would you be kind enough to check my edit? — Paul Renshaw
I tried to see if it would work when deployed. I don't get any errors in the terminal, but when I visit /api/helloWorld, I just get the response 'Cannot GET /api/helloWorld', though the function works as expected when visiting the direct function URL. — Paul Renshaw
It works if I change the rewrite source to "/*", and visit /helloWorld (no /api/ in the URI). — Paul Renshaw

Paul Renshaw Paul Renshaw · Accepted Answer · 2018-04-22T15:46:30

I got everything working as expected with the following as an example:

functions/src/index.ts

import * as functions from 'firebase-functions';
import * as express from 'express';

const app = express();

app.get("/:function", (req, res) => {
    switch(req.params.function) {

        case 
            "helloWorld" : helloWorld(res)
            break;

        default : res.send("Invalid function requested.")

    }
});

app.get("/users/:id", (req, res) => {
    res.send("User with ID: " + req.params.id)
});

function helloWorld(res) {
    res.send("Hello world!");
}

exports.api = functions.https.onRequest(app);

firebase.json (redirects and rewrites)

    "redirects": [
      {
        "source": "/",
        "destination": "/app/",
        "type": 301
      }
    ],
    "rewrites": [
      {
        "source": "/app/**",
        "destination": "/app/index.html"
      },
      {
        "source": "/**",
        "function": "api"
      }
    ]

Vue.js SPA on Firebase Hosting with wildcard rewrite to Firebase Cloud Functions

1 Answers