CODEWITHSUNDEEP
node.jsfirebasevue.jsfirebase-hostingquasar
aspirinemaga
aspirinemaga

Reputation: 3937

Deploy Quasar SSR vue/node app to Firebase Hosting

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. enter image description here

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 ?

Upvotes: 5

Views: 1771

Answers (2)

aspirinemaga
aspirinemaga

Reputation: 3937

So here is the solution I came up with.

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

  1. 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"
  }
}

  1. Install dependencies yarn add firebase-admin firebase-functions

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

  1. Now build the SSR app with quasar build -m ssr

  2. In your terminal, go to ./dist/ssr/ and run yarn install to install node modules.

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

Upvotes: 4

Doug Stevenson
Doug Stevenson

Reputation: 317487

Using http://localhost:5000 in your browser is going to request the file called "index.html" from your public folder, which is dist/ssr. From what you've shown here, there is no index.html in that folder. I see "index.js" and "template.html".

You're either going to have to do one of the following:

  • Arrange for an index.html to be created in dist/ssr
  • Or, change your URL to locate an HTML file that exists under dist/ssr
  • Or, change your public folder configuration to point to a folder that has the content you're looking for.

Upvotes: 1

Related Questions