Deploy Quasar SSR vue/node app to Firebase Hosting

Question

I've tried many approches to upload and run the node/vue project on the firebase hosting, but didn't succeed.

I've followed official guidelines on Firecast youtube channel, but it seems that I'm missing something.

My vue.js app in SSR mode works fine on localhost. It is slighly different than the basic node/express app. Once deployed to Firebase Hosting, I have Error 404 page. (Quasar Documentation on SSR deploy)

I've build an app with quasar build -m ssr, which generates a new folder dist/ssr folder.

firebase.json file in the root of my project where I've initiated a firebase project with firebase init contains following lines:

  {
    "hosting": {
      "public": "dist/ssr",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "function": "app"
        }
      ]
    }
  }

Before deploying to firebase hosting, I'm trying to test it with firebase serve but when I access a page on localhost:5000 I get an error 404 or No-content.

Anyone have a solution ?

aspirinemaga aspirinemaga · Accepted Answer · 2020-09-11T09:01:22

So here is the solution I came up with.

I've made a project template on github: https://github.com/danieltorscho/gcp-quasar

After having initialized your firebase project in the root of your project folder with firebase init, open the generated firebase.json:

{
  "hosting": {
    "public": "dist/ssr",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
      "source": "**",
      "function": "ssrapp" // <- This NAME should be the same as in /src-ssr/index.js
    }]
  },
  "functions": {
    "source": "dist/ssr"
  }
}

Install dependencies yarn add firebase-admin firebase-functions
Open and edit /src-ssr/index.js:

// BEGINNING OF THE FILE
const functions = require('firebase-functions') // <---- ADD FIREBASE FUNCTIONS

const
  express = require('express'),
  compression = require('compression')

const
  ssr = require('quasar-ssr'),
  extension = require('./extension'),
  app = express(),
  port = process.env.PORT || 3000
...
...
...
// END OF THE FILE

// COMMENT or DELETE following 3 lines of app.listen function
// app.listen(port, () => {
//   console.log(`Server listening at port ${port}`)
// })

exports.ssrapp = functions.https.onRequest(app) // <- "ssrapp" name is the same as in firebase.json

Now build the SSR app with quasar build -m ssr
In your terminal, go to ./dist/ssr/ and run yarn install to install node modules.
Finally go back to your root path "./" and test before deployment with firebase serve command. It will be available at port 5000 as usual. localhost:5000

Deploy Quasar SSR vue/node app to Firebase Hosting

2 Answers