Nuxt.js: Deploying SSR nuxt.js on Firebase Cloud Function

[ipoppo]

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?

_{This question is available on Nuxt.js community (#c1461)}

[qm3ster]

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 yarn/npm build yourself before firebase deploy.

A solution without express would probably be slimmer and charge you less per request, but this was an immediately obvious one.

[qm3ster]

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)

{
  "hosting": {
    "public": "dist",

    // Add the following rewrites section *within* "hosting"
   "rewrites": [ {
      "source": "**",
      "function": "app"
    } ]

  }
}

:warning: Attention :warning:
Routes that match a static file will not trigger the function, they will just serve the file.
Found that here, but not in the docs?

For optimum performance, do both build and generate, but make sure to not render the routes you want to hit the function.

[qm3ster]

I originally wrote this as an April Fool's joke, but initial testing shows that going from
yarn firebase serve -p 3000 to yarn start and back works.
You can load either initially and then navigate normally.

[ChuiSauCE]

@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.

[qm3ster]

I might try it today. What are you deploying as your function folder? The whole project?

[ChuiSauCE]

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:

<script src="/_nuxt/layouts\default.463bdf2b6acb6fe6f09b.js" defer=""></script>

[qm3ster]

Does nuxt start work if you delete/rename nuxt config?

[ChuiSauCE]

in functions folder we need it to initialize nuxt.

Thats my functions/index.js:

const functions = require('firebase-functions');

const { Nuxt } = require('nuxt')

// We instantiate nuxt.js with the options
const config = require('./nuxt.config.js')
config.dev = false
const nuxt = new Nuxt(config)

exports.nuxt = functions.https.onRequest(nuxt.render);

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.

[qm3ster]

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:

yarn generate
yarn build
yarn package-functions
yarn firebase serve --only functions,hosting

and then, if satisfied,
yarn firebase deploy

PS: .gitignore:

# firebase functions
functions

[qm3ster]

@alexchopin do you think nuxt should officially support this type of hybrid deployment?

Also, what does builder.forGenerate() do, in a sentence? Are generate's build artifacts different to build's?

[qm3ster]

Well, @ChuiSauCE and me both got it working in local simulator but not on real cloud functions.
Wrapping it in express made no difference.

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?
dev = true just makes it time out.

[chrishutchison9]

@qm3ster have you seen this?

https://github.com/davidroyer/nuxt-ssr-firebase

[qm3ster]

Yeah. What's this all about?
Does nuxt.render shove a promise into a callback?!
According to docs, it just returns Promise, like a normal person.
Locally, not engaging in that strange behavior worked out both as an express middleware and directly as a handler for firebase http.

Beyond than that, he just uses express, like I tried as well.
I haven't tried using just real nuxt and not nuxt-start at all, despite #1813
I don't think something like CORS might be the problem since I am receiving a nuxt "Server error" template.

Please post here if you try deploying that repo.

[qm3ster]

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.

[ChuiSauCE]

having 500 on local too. that's not even close :)

[qm3ster]

How did you achieve 500 on local?

[lewyuburi]

@qm3ster any repo for this?

[qm3ster]

It's not actually working, due to some disagreement between real firebase environment and nuxt.
I will continue investigating if I get a way to get a better debug output from production nuxt.

[chanlito]

@qm3ster firebase serve is working for me, but when i deploy all i get is server error page.

[qm3ster]

That is indeed the case, @BruceHem.
Therefore, we are fulfilling the declared requirements of firebase, but some untold limitation on the server leads to pain and suffering.

[ChuiSauCE]

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;

Vue-Firebase-SSR-Template

still needs tons of fix but I'm workin on it slowly 👅

[chanlito]

How comes this is a closed issue?

[cagataycali]

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

[qm3ster]

@ChuiSauCE I am sorry, but how is that relevant?
We are trying to fix/hack Nuxt to be able to SSR on GCF, not roll a new solution.

[ChuiSauCE]

@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.

[cagataycali]

Nuxt & firebase works well in local environment,
Node: v8.0.0
npm: 5.5.1

But I'm trying @production, firebase's node version is 6.11.1 which is es2015. We must transpile with babel. But IDK

[ChuiSauCE]

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.
On logs we don't see much details but I'm sure they are all about missing modules.

[chanlito]

@ChuiSauCE you seemed pretty sure about this do you have a working repo?

[besnikh]

@ChuiSauCE I think you are right about your argument saying that that dependencies should be included on package.json
I am facing this problem at this time, I've already built my app but I want to to deploy it on Firebase Hosting.. is there any update on this case?

@qm3ster Is there any update on making nuxt work with firebase functions ?

Cheers

[jelmerf]

@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).

[besnikh]

@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 :fire: ? I mean using cloud functions etc...

[jelmerf]

@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.

[ishitatsuyuki]

Please also see https://issuetracker.google.com/issues/71649801, this is the main issue causing server error.

[ishitatsuyuki]

If your dependency set is small, this workaround is viable:

1. Perform build as normal.
2. Comment out node_modules in .gcloudignore.
3. Run yarn/npm install --prod.
4. Deploy.

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.

[lagmanzaza]

I have a problem after I try to deploy this repo https://github.com/davidroyer/nuxt-ssr-firebase

[ishitatsuyuki]

@lagmanzaza you probably need to transpile it.

[lagmanzaza]

OMG I forgot that cloud function that supports node V6

[lagmanzaza]

Thank you very much

[lewyuburi]

Update -> https://www.youtube.com/watch?v=ZYUWsjUxxUQ

[Nayir]

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.
FCF is "adding" my ('/') html content on ('/additionalpage') at the bottom of the page (inside )
Did you have same issue ? It's coming from nuxt.renderRoute('/') right ?

[chanlito]

Cloud function doesn't work with latest Nuxt.

[ishitatsuyuki]

Nuxt 1.x (non-RC) raised the Node requirement to 8+. See https://github.com/phlogisticfugu/perfect-paca/pull/6 for works on transpiling it back.

[mesqueeb]

@lewyuburi
I'm using Nuxt RC version exactly as the Youtube tutorial mentions.

The problem:

When opening a webpage with a different URI (other than landing page) it doesn't load any html besides the footer...

Any ideas how to also have other webpages loaded properly if those links are visited directly?

[JamieCurnow]

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!
https://github.com/nuxt/nuxt.js/commit/412ffd4c0656779b247a173e5c5efe8241e6bf74

It works now if you install nuxt-edge rather than nuxt in your cloud functions folder. Then you can just const { Nuxt } = require('nuxt-edge') in your index.js of the functions and use it as usual.
Just be sure to compile down with babel when you nuxt build.

[uboat46]

Nuxt has it on it´s docs at https://nuxtjs.org/guide/routing/

[jtorfs01]

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:

const functions = require("firebase-functions");
const { Nuxt } = require("nuxt");
const express = require("express");
const app = express();

const config = {
    dev: false,
    buidlDir: 'src',
    build: {
        publicPath: '/'
    }
};

const nuxt = new Nuxt(config);


function handleRequest(req, res){
    console.log('handling request');
    res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
    nuxt.renderRoute('/')
    .then(result => {
        console.log('result: ' + result.html);
        res.send(result.html);
    })
    .catch(e => {
        res.send(e);
        console.log(e);
    })
}

app.get('*', handleRequest);
exports.ssrApp = functions.https.onRequest(app);

I also tried with function:

function handleRequest(req, res) {

    console.log("log3");
    res.set("Cache-Control", "public, max-age=300, s-maxage=600");
    return new Promise((resolve, reject) => {
      nuxt.render(req, res, promise => {
        promise.then(resolve).catch(reject);
      });
    });
  }

But with the same result.
PS: I'm using NodeJS v8 for my function so I don't think that's the problem.

[qm3ster]

@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?

[lock[bot]]

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.