SSR on Firebase Hosting with GC Functions not working










2















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.










share|improve this question






















  • Just hit the same issue, looks like we both followed youtube.com/watch?v=ZYUWsjUxxUQ&t=896s would be nice if someone has an answer

    – JavaBeast
    Dec 16 '18 at 0:39












  • I'm having the same issue with Firebase functions and Nuxtjs.

    – Szabó Csaba
    Jan 18 at 9:23











  • @SzaboCsaba Im hosting on Heroku right now since the setup was really messy for the Firebase Hosting + Nuxt also the cold start times of functions made page visits sometimes slow

    – Badgy
    Jan 18 at 9:26















2















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.










share|improve this question






















  • Just hit the same issue, looks like we both followed youtube.com/watch?v=ZYUWsjUxxUQ&t=896s would be nice if someone has an answer

    – JavaBeast
    Dec 16 '18 at 0:39












  • I'm having the same issue with Firebase functions and Nuxtjs.

    – Szabó Csaba
    Jan 18 at 9:23











  • @SzaboCsaba Im hosting on Heroku right now since the setup was really messy for the Firebase Hosting + Nuxt also the cold start times of functions made page visits sometimes slow

    – Badgy
    Jan 18 at 9:26













2












2








2








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.










share|improve this question














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.







firebase google-cloud-functions nuxt.js firebase-hosting






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 14 '18 at 15:03









BadgyBadgy

1,086320




1,086320












  • Just hit the same issue, looks like we both followed youtube.com/watch?v=ZYUWsjUxxUQ&t=896s would be nice if someone has an answer

    – JavaBeast
    Dec 16 '18 at 0:39












  • I'm having the same issue with Firebase functions and Nuxtjs.

    – Szabó Csaba
    Jan 18 at 9:23











  • @SzaboCsaba Im hosting on Heroku right now since the setup was really messy for the Firebase Hosting + Nuxt also the cold start times of functions made page visits sometimes slow

    – Badgy
    Jan 18 at 9:26

















  • Just hit the same issue, looks like we both followed youtube.com/watch?v=ZYUWsjUxxUQ&t=896s would be nice if someone has an answer

    – JavaBeast
    Dec 16 '18 at 0:39












  • I'm having the same issue with Firebase functions and Nuxtjs.

    – Szabó Csaba
    Jan 18 at 9:23











  • @SzaboCsaba Im hosting on Heroku right now since the setup was really messy for the Firebase Hosting + Nuxt also the cold start times of functions made page visits sometimes slow

    – Badgy
    Jan 18 at 9:26
















Just hit the same issue, looks like we both followed youtube.com/watch?v=ZYUWsjUxxUQ&t=896s would be nice if someone has an answer

– JavaBeast
Dec 16 '18 at 0:39






Just hit the same issue, looks like we both followed youtube.com/watch?v=ZYUWsjUxxUQ&t=896s would be nice if someone has an answer

– JavaBeast
Dec 16 '18 at 0:39














I'm having the same issue with Firebase functions and Nuxtjs.

– Szabó Csaba
Jan 18 at 9:23





I'm having the same issue with Firebase functions and Nuxtjs.

– Szabó Csaba
Jan 18 at 9:23













@SzaboCsaba Im hosting on Heroku right now since the setup was really messy for the Firebase Hosting + Nuxt also the cold start times of functions made page visits sometimes slow

– Badgy
Jan 18 at 9:26





@SzaboCsaba Im hosting on Heroku right now since the setup was really messy for the Firebase Hosting + Nuxt also the cold start times of functions made page visits sometimes slow

– Badgy
Jan 18 at 9:26












1 Answer
1






active

oldest

votes


















0














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.






share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53303161%2fssr-on-firebase-hosting-with-gc-functions-not-working%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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.






    share|improve this answer



























      0














      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.






      share|improve this answer

























        0












        0








        0







        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.






        share|improve this answer













        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 21 at 10:14









        Szabó CsabaSzabó Csaba

        7316




        7316





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53303161%2fssr-on-firebase-hosting-with-gc-functions-not-working%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            In R, how to develop a multiplot heatmap.2 figure showing key labels successfully

            Museum of Modern and Contemporary Art of Trento and Rovereto