CODEWITHSUNDEEP
firebasegoogle-cloud-functionsnuxt.jsfirebase-hosting
niclas_4
niclas_4

Reputation: 3674

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.

Upvotes: 3

Views: 1126

Answers (1)

Szabó Csaba
Szabó Csaba

Reputation: 891

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.

Upvotes: 3

Related Questions