New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Deploying SSR nuxt.js on Firebase Cloud Function #1634
Comments
You can see here how to deploy express on google/firebase cloud functions, where nuxt can be used as an express middleware, just like it is in your template. There's a chance you would need to run A solution without express would probably be slimmer and charge you less per request, but this was an immediately obvious one. |
const functions = ('firebase-functions')
const { Nuxt } = require ('nuxt')
const config = require('./nuxt.config.js')
config.dev = false
const nuxt = new Nuxt(config)
exports.app = functions.https.onRequest(nuxt.render)
For optimum performance, do both build and generate, but make sure to not render the routes you want to hit the function. |
I originally wrote this as an April Fool's joke, but initial testing shows that going from |
@qm3ster that works good localy i just don't get why it's not working on deploy. I've read some about .nuxt folder was being ignored on functions upload but they've fixed it. have you made it work? Nuxt.js Internal Server Error that's what I'm getting once I visit the link. |
I might try it today. What are you deploying as your function folder? The whole project? |
Just .nuxt folder besides index.js. Seems like it cannot reach that folder on cloud. As you mentioned above we should host dist folder. script tags on page looks like down below:
|
Does nuxt start work if you delete/rename nuxt config? |
in functions folder we need it to initialize nuxt. Thats my functions/index.js:
The problem you cannot point dist directory in your config. all you can do is the rootDir. which should include .nuxt/dist... I've read some articals about next which you can rename the distDir... and you all good to go. |
THEY LIVE{
"scripts": {
"prepackage-functions": "rimraf functions",
"package-functions": "babel 'functionsES6' --out-dir 'functions' --copy-files --ignore 'node_modules'",
"postpackage-functions": "cp -r .nuxt nuxt.config.js functions/ && cd functions && yarn"
}
} functionsES6/package.json: {
"name": "functions",
"description": "Cloud Functions for Firebase",
"dependencies": {
"firebase-admin": "~5.4.1",
"firebase-functions": "^0.7.0",
"nuxt-start": "1.0.0-rc11"
},
"private": true
} functionsES6/index.js: const { Nuxt } = require('nuxt-start')
const functions = require('firebase-functions')
const config = require('./nuxt.config.js')
config.dev = false
const nuxt = new Nuxt(config)
exports.app = functions.https.onRequest(nuxt.render) functionsES6/.babelrc: {
"presets": [
["env", {
"targets": {
"node": "6.11.1"
}
}]
]
} (the 6.11.1 version is what firebase functions provides) nuxt.config.js: generate: {
routes: ['/about']
} (only include pages you want to be static, exclude those you want SSR) firebase.json: {
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**", "function": "app"
}]
}
} in project root, not functions or functionsES6:
and then, if satisfied, PS: .gitignore: # firebase functions
functions |
@alexchopin do you think nuxt should officially support this type of hybrid deployment? Also, what does builder.forGenerate() do, in a sentence? Are |
Well, @ChuiSauCE and me both got it working in local simulator but not on real cloud functions. const { Nuxt } = require('nuxt-start')
const functions = require('firebase-functions')
const express = require('express')
const config = require('./nuxt.config.js')
config.dev = false
const nuxt = new Nuxt(config)
const app = express()
app.use(nuxt.render)
exports.app = functions.https.onRequest(app) How can I get better error pages if I can't access the logs? |
@qm3ster have you seen this? |
Yeah. What's this all about? Beyond than that, he just uses express, like I tried as well. Please post here if you try deploying that repo. |
P.S: const admin = require('firebase-admin')
admin.initializeApp(functions.config().firebase) isn't it either. Not only is that for accessing other firebase services, but I actually tried and it changes nothing. |
having 500 on local too. that's not even close :) |
How did you achieve 500 on local? |
@qm3ster any repo for this? |
It's not actually working, due to some disagreement between real firebase environment and nuxt. |
@qm3ster firebase serve is working for me, but when i deploy all i get is server error page. |
That is indeed the case, @BruceHem. |
its about deployment friends. You need all the dependency list to be on dependency list. not even dev deps. nuxt comes as bundle of tons. which makes firebase functions suffer. that's what i believe xD I've made my way without nuxt base don't hasitate to contribute; still needs tons of fix but I'm workin on it slowly 👅 |
How comes this is a closed issue? |
Still I've same issue but doesn't understand well. What should I do? Here's my example https://github.com/cagataycali/nuxt-firebase-functions-ssr-example |
@ChuiSauCE I am sorry, but how is that relevant? |
@qm3ster as I mentioned, its more about dependencies. I had errors about packages while deploying. localy it works coz dependencies are there. but it's ignored on deployment I mean whole node modules are ignored. So my saying is that we need to make clear dependencies on package.json. The way Nuxt is installed doesn't fit with firebase. |
Nuxt & firebase works well in local environment, But I'm trying @production, firebase's node version is 6.11.1 which is es2015. We must transpile with babel. But IDK |
Again I'm saying on deploy, firebase functions ignore the node modules so you should be explicit on which modules you are using. You should include them on package.json as dependencies not dev-dependencies. |
@ChuiSauCE you seemed pretty sure about this do you have a working repo? |
@ChuiSauCE I think you are right about your argument saying that that dependencies should be included on package.json @qm3ster Is there any update on making nuxt work with firebase functions ? Cheers |
@besnikh have a look at https://github.com/davidroyer/nuxt-ssr-firebase - I got it to work using that (also check the closed issue about error logging over there). |
@jelmerf thank you for this info, I will try it tomorrow. Can I just ask u something did the debug thing make any issues during production ? and how is it working with Firebase... is on 🔥 ? I mean using cloud functions etc... |
@besnikh you shouldn't keep debug on in production. My experience with firebase has been mixed: it's not really fast and I had some errors that were fixed by downgrading an npm dependency. Ah well, both functions and firestore are still in beta, so maybe it is to be expected. |
Please also see https://issuetracker.google.com/issues/71649801, this is the main issue causing server error. |
If your dependency set is small, this workaround is viable:
This will not work if your (zipped) dependency size exceeds the 100MB upload limit. Please complain in the issue tracker to urge Google to resolve this. |
I have a problem after I try to deploy this repo https://github.com/davidroyer/nuxt-ssr-firebase |
@lagmanzaza you probably need to transpile it. |
OMG I forgot that cloud function that supports node V6 |
Thank you very much |
Well, I make the tutorial. But why David is using nuxt.renderRoute() instead of nuxt.render() ? At least, I have some strange issues when I'm creating an additional page, like www.example.com/additionalpage. |
Cloud function doesn't work with latest Nuxt. |
Nuxt 1.x (non-RC) raised the Node requirement to 8+. See phlogisticfugu/perfect-paca#6 for works on transpiling it back. |
@lewyuburi The problem: Any ideas how to also have other webpages loaded properly if those links are visited directly? |
Spent so much time fighting with this but thankfully nuxt is soon to support fallback for node 6. So we're on the home stretch! It works now if you install |
Nuxt has it on it´s docs at https://nuxtjs.org/guide/routing/ |
Hi, I keep getting error: '504 timed out waiting for function to respond' Does anyone else get this error or know where it could come from? My function:
I also tried with function:
But with the same result. |
@jtorfs01 does the artifact you uploaded include the results of "nuxt build"? And before you start adding more logic, does the simple const config = require('./nuxt.config.js')
config.dev = false
const nuxt = new Nuxt(config)
const app = express()
app.use(nuxt.render)
exports.app = functions.https.onRequest(app) work for you? |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
I started from nuxt-community/express-template which seamlessly integrated with express.
But issue transforming into Firebase is that all could functions need to be converted into single method. Next.js could be done nicely. In Nuxt.js, it is not possible to use nuxt.render middleware which use this.options.buildDir to dynamically access .nuxt file.
Is an option to pre-compile all file I need with nuxt?
The text was updated successfully, but these errors were encountered: