Convert SPA to SSR using Firebase

[joaoluizmagalhaes]

I'm trying to install a Quasar APP using SSR into a Firebase, however I'm not sure how to do this in the firebase functions, I'm stuck. Right now when I try to access the Firebase function in emulator mode, I got a Cannot GET /

here my files:
src-ssr/server.js

/**
 * More info about this file:
 * https://v2.quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver
 *
 * Runs in Node context.
 */

/**
 * Make sure to yarn add / npm install (in your project root)
 * anything you import here (except for express and compression).
 */
import express from 'express'
import compression from 'compression'
import {
  ssrClose,
  ssrCreate,
  ssrListen,
  ssrHandler,
  ssrRenderPreloadTag,
  ssrServeStaticContent
} from 'quasar/wrappers'
import render from './middlewares/render' // Ajuste o caminho conforme necessário
import * as functions from 'firebase-functions'

/**
 * Create your webserver and return its instance.
 * If needed, prepare your webserver to receive
 * connect-like middlewares.
 *
 * Should NOT be async!
 */
export const create = ssrCreate(async (/* { ... } */) => {
  const app = express()

  // attackers can use this header to detect apps running Express
  // and then launch specifically-targeted attacks
  app.disable('x-powered-by')

  // place here any middlewares that
  // absolutely need to run before anything else
  if (process.env.PROD) {
    app.use(compression())
  }

  render({ app })


  return app
})

/**
 * You need to make the server listen to the indicated port
 * and return the listening instance or whatever you need to
 * close the server with.
 *
 * The "listenResult" param for the "close()" definition below
 * is what you return here.
 *
 * For production, you can instead export your
 * handler for serverless use or whatever else fits your needs.
 */
export async function listen ({ app, port, isReady }) {
  if(process.env.DEV){
    await isReady()
    return app.listen(port, () => {
      if (process.env.PROD) {
        console.log('Server listening at port ' + port)
      }
    })
  } else {
    return {handler: functions.https.onRequest(app)}
  }
}

/**
 * Should close the server and free up any resources.
 * Will be used on development only when the server needs
 * to be rebooted.
 *
 * Should you need the result of the "listen()" call above,
 * you can use the "listenResult" param.
 *
 * Can be async.
 */
export const close = ssrClose(({ listenResult }) => {
  return listenResult.close()
})

const maxAge = process.env.DEV
  ? 0
  : 1000 * 60 * 60 * 24 * 30

/**
 * Should return middleware that serves the indicated path
 * with static content.
 */
export const serveStaticContent = ssrServeStaticContent((path, opts) => {
  return express.static(path, {
    maxAge,
    ...opts
  })
})

const jsRE = /\.js$/
const cssRE = /\.css$/
const woffRE = /\.woff$/
const woff2RE = /\.woff2$/
const gifRE = /\.gif$/
const jpgRE = /\.jpe?g$/
const pngRE = /\.png$/

/**
 * Should return a String with HTML output
 * (if any) for preloading indicated file
 */
export const renderPreloadTag = ssrRenderPreloadTag((file) => {
  if (jsRE.test(file) === true) {
    return `<link rel="modulepreload" href="${file}" crossorigin>`
  }

  if (cssRE.test(file) === true) {
    return `<link rel="stylesheet" href="${file}">`
  }

  if (woffRE.test(file) === true) {
    return `<link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
  }

  if (woff2RE.test(file) === true) {
    return `<link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
  }

  if (gifRE.test(file) === true) {
    return `<link rel="preload" href="${file}" as="image" type="image/gif">`
  }

  if (jpgRE.test(file) === true) {
    return `<link rel="preload" href="${file}" as="image" type="image/jpeg">`
  }

  if (pngRE.test(file) === true) {
    return `<link rel="preload" href="${file}" as="image" type="image/png">`
  }

  return ''
})

functions/index.js

const functions = require('firebase-functions')
const ssrHandlerPromise = require('./dist/ssr').default

ssrHandlerPromise.then(ssrHandler => {
  exports.ssr = functions.https.onRequest(ssrHandler.handler)
})

Please let me know if I need to share any other information

[yusufkandemir]

exports.ssr = needs to be at the top level.

You can update listen to not return a Promise in production like this:
src-ssr/server.js

// remove async modifier
export function listen ({ app, port, isReady }) {
  // returns { handler: ... } without Promise on production
  if (process.env.PROD) {
    return { handler: functions.https.onRequest(app) }
  }

  // returns a promise only on development
  return isReady().then(() => {
    return app.listen(port, () => {
      console.log('Server listening at port ' + port)
	})
  })
}

functions/index.js

const { handler } = require('./dist/ssr').default

// no need for `functions.https.onRequest` again since it's in src-ssr/server.js already
export.ssr = handler

[connellyguy]

I put this code in place, except I'm using ES6 import syntax instead of CJS require. This is what my functions/index.js file has:

import { handler } from '../src-ssr/server.js';
exports.app = handler;

/dist/ssr doesn't have an export named handler, I'm not sure that code works as you wrote it originally.

But my code is erroring when I try to build using firebase, because of this line in src-ssr/server.js

import {
    ssrClose, ssrCreate, ssrListen, ssrServeStaticContent, ssrRenderPreloadTag
} from 'quasar/wrappers';

quasar/wrappers is not a file path, but firebase treats it like one. I assume quasar has some built in alias that converts this to another file source. Any way around this you recommend?

[yusufkandemir]

/dist/ssr doesn't have an export named handler, I'm not sure that code works as you wrote it originally.

const { handler } = require('./dist/ssr').default notice the .default in the end, it uses the default export and deconstructs it. The ESM equivalent would be this:

import server from '../src-ssr/server.js';
const { handler } = server;

quasar/wrappers resolves to quasar/wrappers/index.js/quasar/wrappers/index.mjs, which is managed by Webpack/Vite. But, you shouldn't use src-ssr/server.js, it's the source code. You should build the SSR app using quasar build -m ssr, then import from /dist/ssr/index.js, which is in CommonJS format. If you want to use ESM SSR, use app-vite v2 beta or app-webpack v4 beta.

[joaoluizmagalhaes]

In fact, that's the issue that no ones explain on their docs.

To properly work from firebase functions, you need to deploy the build code inside the functions folder, then I import/require the handler that I export on server.js file:

src-ssr/server.js

export const listen = ssrListen(({ app, port, isReady, ssrHandler }) => {
  // returns { handler: ... } without Promise on production
  if (process.env.PROD) {
    return { handler: functions.https.onRequest(ssrHandler) }
  }

  // returns a promise only on development
  return isReady().then(() => {
    return app.listen(port, () => {
      console.log('Server listening at port ' + port)
	  })
  })
})

functions/index.js
const { handler } = require('./dist/ssr').default

you need to import the build from Quasar SSR, not the src files.

[connellyguy]

If you want to use ESM SSR, use app-vite v2 beta or app-webpack v4 beta.

It looks like this is my problem, I'm currently on the app-vite v2 beta. The beta builds /dist/ssr using ESM, but exports is not defined in index.js so I can't import the ssr handler from it. Seems like this may be a beta issue, I'll reconfigure to app-vite v1 and then follow your steps.

[joaoluizmagalhaes]

Hello, thanks for helping me.

After I fixed your suggestions, I'm still stuck. After the fixes, I've tested using Firebase functions emulators, accessing this URL http://127.0.0.1:5001/essencia-bahiana/us-central1/ssr and I got and error on screen: Cannot GET /

Not sure if this is the way I'm supposed to test this. this is my first time trying a SSR app.

I've also deployed the Build to firebase hosting, and as a suggestion from GPT, added the build inside the functions folder. Not sure if all this is needed.

the Quasar dev ssr is working properly, but the production is not.

in production I'm receiving this error:

Error: Forbidden
Your client does not have permission to get URL /ssr/ from this server.

[yusufkandemir]

You can try this: https://mehmetkose.com.tr/posts/how-to-solve-the-firebase-error-forbidden-your-client-does-not-have-permission-to-get-url/

[joaoluizmagalhaes]

I couldn't find my functions there. In fact, I wasn't able to deploy the functions yet.

First, I want to know if the approach I'm doing here is the correct one:

• copy the dist/ssr into firebase functions folder;
• copy all dependecies for my project into functions package.json;
• test the function using http://127.0.0.1:5001/essencia-bahiana/us-central1/ssr this URL, for a emulator;

[joaoluizmagalhaes]

I did everything on this tutorial.
Finally I was able to upload my functions, after I add all the app dependencies into functions package.json.

However, now I'm receiving the follow error:

Cannot GET /

in both production env and the ssr function

[joaoluizmagalhaes]

I was able to fix all of that.

First I fixed the code as you pointed in your first comment:
Second, you need to pass ssrHandler not the app:
return { handler: functions.https.onRequest(ssrHandler) }

and don't need to import render and recall it again

so it is working, matter of fact, the pieces missing on the quasar Docs, were that you need to add the files for your build in your Functions folder, and alo all dependencies for the project.

[filiocorp]

@joaoluizmagalhaes it would be great if I could have your help as we are also stuck in converting our SPA to SSR, similar to your case.

[filiocorp]

Hi @joaoluizmagalhaes;

I have spent quite a bit of time using quasar ssr with firebase, but no success after many days; I thought the best way to show you is to record my screen and show you what I have done. I would appreciate anyone taking a look at this:
My recorded screen

I also shared firebas.json; server.js, and functions/index.js for your reference. Any help would be appreciated.

firebase.json

server.js

import express from 'express'
import compression from 'compression'
import * as functions from "firebase-functions";
import {
  ssrClose,
  ssrCreate,
  ssrListen,
  ssrRenderPreloadTag,
  ssrServeStaticContent
} from 'quasar/wrappers'
export async function listen({ app, port, ssrHandler }) {
  if (process.env.NODE_ENV === 'development') {
    await isReady();
    return await app.listen(port, () => {
      // we're ready to serve clients
      console.log(`Server is listening on port ${port}`);
    });
  } else { // in production
    return {
      handler: functions.https.onRequest(ssrHandler)
    };
  }
}

functions/index.js

const functions = require("firebase-functions");
const ssrApp = require("./ssr/index.js");
exports.ssr = functions.https.onRequest(ssrApp);

[joaoluizmagalhaes]

Hi @filiocorp, sorry for the delay to responde, really busy days.

If you check some comments above, the solution is:

In fact, that's the issue that no ones explain on their docs.

To properly work from firebase functions, you need to deploy the build code inside the functions folder, then I import/require the handler that I export on server.js file:

src-ssr/server.js

export const listen = ssrListen(({ app, port, isReady, ssrHandler }) => {
  // returns { handler: ... } without Promise on production
  if (process.env.PROD) {
    return { handler: functions.https.onRequest(ssrHandler) }
  }

  // returns a promise only on development
  return isReady().then(() => {
    return app.listen(port, () => {
      console.log('Server listening at port ' + port)
	  })
  })
})

functions/index.js const { handler } = require('./dist/ssr').default

you need to import the build from Quasar SSR, not the src files.

Did you followed this steps?

[filiocorp]

@joaoluizmagalhaes I totally understand and thank you for the response. I believe I am already doing this. Would you mind taking a look at this short video here: Recorded Screen