Discussion on: Deploy nuxt on Firebase

[Bartłomiej]

First of all, thank you for this article, it's pretty awesome!

Although I am struggling with one issue for some time now and really can't figure it out.

In my nuxt app I have a server middleware with sendMessage function accessible under /api/contact route
nuxt.config.js:

...
serverMiddleware: [{ path: '/api/contact', handler: '~/api/contact' }],
...

I can't make it work with Firebase configuration. Should I move ~/api/contact to the functions directory?
Should I define it as a separate Firebase function or import somehow to the nuxtssr function?

I would appreciate any tips ;)

[KiritchoukC]

Hey Bartłomiej, thank you. I'm glad you liked it.

I had to do the exact same thing, you can check how I did it here

In short, I had to add a route to catch post method on 'api/contact' in here at the end of the file.

Tell me if you need any deeper explanations

[Bartłomiej]

That clarified a lot, thank you!

One more question: after following steps from the article I can't use yarn dev anymore. It looks like my plugins are now undefined on page render and Nuxt throws Cannot read property ... of undefined error instead of rendering my page. yarn build:firebase && yarn start:firebase works fine.

Do you have any idea what may be wrong? Do I need some additional configuration in src/server/index.js to make it work again?

[KiritchoukC]

Weird, i get the same error...
I'll investigate on this when i get some free time (so rare these days :D)

[Hudson de Almeida Ferreira]

Did you guys manage to solve this issue? I'm having the same error.

[Hudson de Almeida Ferreira]

Found the solution in the comment below... just run yarn clean before running the yarn dev.

[hapo-duongdv]

Sr ,I'm having the same error. And your link github is 404. How do you solve this issue? Tks.

[Sebastian Manuelli]

Found the index.js he was talking about

github.com/KiritchoukC/kiritchoukc...

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')
const express = require('express')
const contact = require('./contact')

const app = express()
app.use(express.json())

const config = {
/**

• Development mode */ 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=1, s-maxage=1')
await nuxt.render(req, res)
}

app.post('/api/contact', contact)
app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)