NextJS Firebase onRequest Function Rewrites - firebase

I am working on a project using the Vercel Next.js firebase-with-hosting template found here.
The template uses a Firebase Function to allow for Firebase Hosting. I am trying to add additional Firebase onRequest functions so that I can send request to the server.
I've added the printTest function and set the rewrites in the firebase.json file but keep getting 404 errors. I've successfully implemented this before with Express and without NextJS. I think I have an issue with my rewrites.
I've also tested onCallable, and pubSub functions and these worked great. My guess is I have a rewrite issue. Any help with understanding why this does now work would be greatly appreciated.
const { join } = require('path'); // From NextJS Vercel Base Build
const { default: next } = require('next'); // From NextJS Vercel Base Build
const isDev = process.env.NODE_ENV !== 'production'; // From NextJS Vercel Base Build
const nextjsDistDir = join('src', require('./src/next.config.js').distDir); // From NextJS Vercel Base Build
const admin = require('firebase-admin'); // Firebase Admin SDK for NodeJS.
const functions = require('firebase-functions'); // For NextJS + Firebase Functions + Firebase Hosting.
const serviceAccount = require('./firebaesAdminServiceAccountKey.json'); // Service account key for Firebase Admin SDK.
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++ Firebase Admin Initialization ++++++++++++++++++++++++++++++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
});
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++ Firebase Firestore Initialization ++++++++++++++++++++++++++++++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
const dba = admin.firestore();
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++ Nextjs Configuration ++++++++++++++++++++++++++++++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
const nextjsServer = next({
dev: isDev,
conf: {
distDir: nextjsDistDir,
},
});
const nextjsHandle = nextjsServer.getRequestHandler();
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++ Cloud Functions ++++++++++++++++++++++++++++++++++++++++
// +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// Nextjs Cloud Function to allow for Firebase Hosting.
exports.nextjsFunc = functions.https.onRequest((req, res) => {
return nextjsServer.prepare().then(() => nextjsHandle(req, res));
});
exports.printTest = functions.https.onRequest((req, res) => {
console.log('THIS WORKS!');
res.status(200).send();
});
Here is the firebase.json file with the rewrite.
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "nextjsFunc"
},
{
"source": "/printTest",
"function": "printTest"
}
]
},
"functions": {
"source": ".",
"predeploy": [
"npm --prefix \"$PROJECT_DIR\" install",
"npm --prefix \"$PROJECT_DIR\" run build"
],
"runtime": "nodejs10"
}
}

The URL pattern ** means that all of your requests are sent to nextjsFunc() and that includes /printTest. Since that is the first rewrite config rule, anything below is ignored.
From the doc, here's an important note:
Hosting applies the rewrite defined by the first rule with a URL pattern that matches the requested path. So, you need to deliberately order the rules within the rewrites attribute.
Fix the issue by changing the order and putting the least-strict rule at the end:
"rewrites": [
{
"source": "/printTest",
"function": "printTest"
},
{
"source": "**",
"function": "nextjsFunc"
}
]

Related

Using Firebase Functions with Nuxt 3

Environment
Operating System: macOS 10.15.7
Node Version:v16.14.2
Nuxt Version: 3.0.0-rc.2
Firebase: 9.7.0
firebase-admin: 10.2.0
firebase-functions: 3.21.0
firebase-functions-test: 0.3.3
In firebase.json the following config is set:
{
"functions": { "source": ".output/server" }
}
I have a file under the "server" directory containing the following function:
import * as functions from "firebase-functions";
export const helloWorld = functions.https.onRequest((request, response) => {
functions.logger.info("Hello logs!", {structuredData: true});
response.send("Hello from Firebase!");
});
When I run:
NITRO_PRESET=firebase npm run build
firebase emulators:start --only functions
then go to my firebase emulator log, it does not show the new helloWorld() function being initialized. Also, when going to "http://localhost:5001/$PROJECTNAME/us-central1/helloWorld", it returns "Function us-central1-helloWorld does not exist, valid functions are: us-central1-server" which suggests that my function has not been initialized.
Is there any way I can write firebase cloud functions in my Nuxt 3 app from files in my server directory?
I saw a similar discussion here that said it was possible to change the nuxt.config.ts functions object between deploying functions,storage,firestore and deploying server and hosting. I am trying to write firebase functions solely in the "server" directory without creating a "functions" directory and the root of my project. Is this possible?
I have also opened a discussion on GitHub here
Unfortunately, the procedure you are following has some points to highlight. As previously mentioned on this thread:
The Vue.js app is a front-end component (even if it is hosted in a cloud service like Firebase Hosting).
The Cloud Functions are serverless back-end components, hosted in the Firebase (Google Cloud) infrastructure and reacting to events.
To get these two components interacting with each other there are basically two possibilities:
For Callable Cloud Functions and HTTPS Cloud Functions, you will call them from your Vue.js app.
For background triggered Cloud Functions (e.g. triggered by a Firestore event like doc creation), the Vue.js front-end could generate the event (e.g. write to Firestore) and/or listen to the result of a Cloud Function execution (e.g. a Firestore doc is modified).
…
As explained in the documentation, to call the Callable Function from your Vue.js app, you need to do as follows (with the JS SDK v9):
Add Firebase to your Vue.js app. For example via a firebaseConfig.js file:
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getFunctions } from "firebase/functions";
const firebaseConfig = {
apiKey: "...",
// ....
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const functions = getFunctions(firebaseApp);
export { db, functions };
Then, in your component, you do
<script>
import { functions } from '../firebaseConfig';
import { httpsCallable } from 'firebase/functions';
// ...
methods: {
async callFunction() {
const addMessage = httpsCallable(functions, 'addMessage');
const result = await addMessage({ text: messageText })
const data = result.data;
//...
});
}
</script>
I also tried to reproduce the issue, and I successfully deployed the functions on the emulator with the same approach from the question, following the documentation from GCP on how to add Firebase to your project, and using this Youtube tutorial as a guide, it has some important tips on how to add Firebase to a NuxtJS project.
I will leave a sample on how my firebase.json file ended up looking once all the set-up was finished:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": ".output/server"
},
"hosting": {
"site": "<your_project_id>",
"public": ".output/public",
"cleanUrls": true,
"rewrites": [{ "source": "**", "function": "server" }],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Additionally, I would like to suggest using the Firebase CLI, as it has more accessibility features, and check this Medium guide to take a deeper look at how to add Firebase to Nuxt.

Firebase database triggers and Rest API in same project?

I have a Firebase cloud function project that I recently updated all the functions.https.onRequest to run through Express to create a REST API service. The APIs work fine. But when I try and deploy the project, none of the previous Firebase database triggers are deployed anymore (Example: CalculateMyStats trigger worked fine, but was removed from my cloud functions list) . Only the rest function is deployed now. Is it possible to have Rest API's and triggers in the same project?
index.ts
import * as admin from 'firebase-admin';
import * as functions from 'firebase-functions';
import * as http from './http';
import { AddLocationIOBookMarks, DistrubuteNotificationData, NewUserEmail } from './users/usersFuncModules';
import { AutoCheckoutCron } from './locations/locationsFuncModule';
import { CalculateMyStats } from './rating/ratingFuncModule';
import { FIREBASE_CONFIG } from './config/firebaseConfig';
import { LocationsUserCount } from './pushNotifications/pushFuncModule';
export { AddLocationIOBookMarks, DistrubuteNotificationData, NewUserEmail };
export { AutoCheckoutCron };
export { CalculateMyStats };
export { LocationsUserCount };
admin.initializeApp({
credential: admin.credential.cert({
projectId: FIREBASE_CONFIG.project_id,
clientEmail: FIREBASE_CONFIG.client_email,
privateKey: FIREBASE_CONFIG.private_key
}),
databaseURL: FIREBASE_CONFIG.databaseURL
});
admin.firestore().settings({ timestampsInSnapshots: true });
exports.rest = functions.https.onRequest(http.endpoint);
ratingFuncModule.ts
import * as express from 'express';
import * as functions from 'firebase-functions';
import * as http from '../http';
import * as myStatsModule from './calculateMystats';
import * as ratingModule from './rateUser';
import { fsConst } from '../firestoreConst';
const rateRoute = express.Router();
const cors = require('cors');
const corsOptions = http.corsOptions;
export const CalculateMyStats = functions.firestore.document(`${fsConst.USERRATINGS}/{doc-id}`).onWrite((change, context) => {
const ratedUser = change.after.data();
return myStatsModule.roundAllMyStats(ratedUser.userId).catch(error => {
console.error(new Error(error), `| Method: CalculateMyStats`);
});
});
rateRoute.get('/rate/updateRating', cors(corsOptions), (req, res) => {
const currentUserId = req.query.currentUserId;
const toBeRatedUserId = req.query.toBeRatedUserId;
const rateDocId = req.query.rateDocId;
const rateFormValues = req.query.rateFormValues;
ratingModule
.rateCurrentUser(currentUserId, toBeRatedUserId, rateDocId, rateFormValues)
.then(data => {
if (rateDocId !== 'undefined') {
res.send(JSON.stringify(rateDocId));
} else {
res.send(JSON.stringify(data));
}
})
.catch(error => {
console.error(new Error(error), `| Method: updateUserRating`);
});
});
// Export all routes for rating related http request
module.exports = rateRoute;
firebase.json
{
"functions": {
"predeploy": [
"npm --prefix $RESOURCE_DIR run lint",
"npm --prefix $RESOURCE_DIR run build"
],
"source": "functions"
},
"hosting": {
"public": "public",
"rewrites": [{
"source": "/api/v1/**",
"function": "rest"
}],
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}
}
And when I deploy:
firebase deploy --only functions
You have to export all your trigger functions alongside your exports.rest in index.ts like so:
import { CalculateMyStats } from './rating/ratingFuncModule';
exports.rest = functions.https.onRequest(http.endpoint); // your existing export
exports.calculateMyStats = CalculateMyStats // trigger function export

Firebase redirects to deleted function

I am new to Firebase and is working on a project with nuxtjs, Firestore, Firebase functions, and Firebase hosting. I deployed a function that does server side rendering named 'nuxtssr' and it worked after deployment. But then I noticed that the default region of the function is in the US. I wanted to deploy the function to Europe West so I deleted the 'nuxtssr' function and deployed a new function 'nuxtssrEurope' with region set to Europe West. But after that, when I try to access my site through browser, it redirects to this page asking to verify myself.
https://accounts.google.com/ServiceLogin/webreauth?service=ah&passive=true&continue=https%3A%2F%2Fappengine.google.com%2F_ah%2Fconflogin%3Fcontinue%3Dhttps%3A%2F%2Fus-central1-example.cloudfunctions.net%2Fnuxtssr%2F&flowName=GlifWebSignIn&flowEntry=ServiceLogin
As you can see, the redirection is to the function 'nuxtssr' which I deleted which used to reside in US Central. When I verify myself, I get redirected and get this message from https://us-central1-example.cloudfunctions.net/nuxtssr/
Error: Forbidden
Your client does not have permission to get URL /nuxtssr/ from this server.
I looked around but could not find an answer. And yes I checked for any typos. This is my function:
const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')
const express = require('express')
const app = express()
const config = {
dev: false
}
const nuxt = new Nuxt(config)
let isReady = false
const readyPromise = nuxt
.ready()
.then(() => {
isReady = true
})
.catch(() => {
process.exit(1)
})
async function handleRequest(req, res) {
if (!isReady) {
await readyPromise
}
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
await nuxt.render(req, res)
}
app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssrEurope = functions.region('europe-west1').https.onRequest(app)
My firebase.json
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "nuxtssrEurope"
}
]
}
}
Apparently. Cloud Functions only supports serving dynamic content for Firebase hosting on us-central1 only, so you can't use other servers for Cloud Functions. After I changed back to us-central1 for my Cloud Function, it works now.
If you are using HTTP functions to serve dynamic content for Firebase Hosting, you must use us-central1.
https://firebase.google.com/docs/hosting/functions

SSR on Firebase Hosting with GC Functions not working

Ok so this is my folder Structure
So here is the Functions Index File:
const functions = require('firebase-functions')
const express = require('express')
const { Nuxt } = require('nuxt')
const app = express()
const config = {
dev: false,
buildDir: 'nuxt',
build: {
publicPath: '/'
}
}
const nuxt = new Nuxt(config)
function handleRequest (req, res) {
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
nuxt.renderRoute('/').then(result => {
res.send(result.html)
}).catch(e => {
res.send(e)
})
}
app.get('*', handleRequest)
exports.nuxtApp = functions.https.onRequest(app)
But all I get when visiting the Url is "{"code":"MODULE_NOT_FOUND"}
(after deploying)
All i did in the nuxt.config.js is just telling it to make the build directory into the nuxt folder in the functions folder
firebase.json
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "nuxtApp"
}
]
}
}
When testing locally with Firebase Serve it works but it only renders the base url / and nothing else and also I have no Static Assets like my scss files or the app manifest.
After a few days of debugging I found a solution.
At first, you have to extend your error logging, so you can see the stack-trace:
console.error(e)
res.send(e)
My errors were:
error#1 firebase package was not installed in my functions folder, so I had to install it with npm install --save firebase in the functions directory. The overall firebase package is not required by Cloud Functions, however it's needed for my nuxt project for firestore usage
error#2 You could get an error like firebaseApp.firestore is not a function. It's due to a wrong import of firebase to you could function. I found the solution for this problem here
I change this import:
import firebase from 'firebase';
import 'firebase/firestore';
To this:
import firebase from '#firebase/app';
import '#firebase/firestore'
After solving these two errors, my NuxtJs app worked well with Firebase Cloud Functions.

Cannot Deploy cloud functions

I tried deploying a sample function,but it shows an error
my code for the function is below
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
// Listens for new messages added to /message/:pushId/original and creates an
// uppercase version of the message to /message/:pushId/uppercase
exports.makeUppercase = functions.database.ref('/message/{pushId}/original')
.onCreate((snapshot, context) => {
// Grab the current value of what was written to the Realtime Database.
const original = snapshot.val();
console.log('Uppercasing', context.params.pushId, original);
const uppercase = original.toUpperCase();
// You must return a Promise when performing asynchronous tasks inside a Functions such as
// writing to the Firebase Realtime Database.
// Setting an "uppercase" sibling in the Realtime Database returns a Promise.
return snapshot.ref.parent.child('uppercase').set(uppercase);
});
my firebase.json file
{
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": "functions"
}
}

Resources