Firebase & SSR Deployment

mosiki

Hi

Does anyone know how to deploy the Quasar app to firebase in SSR mode successfully? I can deploy in SPA mode fine, but I need server side api’s so its not enough.

I have attempted to use a cloud function to redirect on https request but unsure as how to call the Quasar SSR Built App with express.

Any help much appreciated.

Thanks

P.

beets

@mosiki quasar build ssr does generate an express project itself which is all you need to deploy. You can integrate that with your api express project, but it’s usually not recommended. Can you deploy two apps on fire base, point example.com to the quasar ssr one and api.example.com or example.com/api to your api express project? If cost is a factor then I’d see why you may want to merge them, but again it’s usually not recommended because it will cause some more manual work.

mosiki

I’ve been looking at this as an example : https://github.com/zaru/quasar_ssr_firebase_sample/blob/master/quasar.conf.js

When I update the quasar.conf.js file to include, distDir: ‘functions/dist’, - quasar build -m ssr now biulds in the ‘functions/dist’ folder, however there is no ssr folder being created inside the dist folder. yet the server.js file includes ‘ssr = require(’…/dist/ssr’)’, which errors out.

beets

@mosiki That repo looks like it was for Quasar 0.17.x so there’s probably some things that aren’t updated for 1.x branch. Looking at current quasar docs, try:

distDir: `functions/dist/${ctx.modeName}`,

Or more simply:

distDir: 'functions/dist/ssr',

mosiki

In the src-ssr folder there is a reference - const ssr = require(‘quasar-ssr’). Where is quasar-ssr ? Seems to be the sticking point.

beets

@mosiki Quasar cli generates that file automatically, based on some settings in quasar.conf.js. It sets a webpack alias:

resolve: { 
    alias: {                                                                                         
      '../ssr': '/home/beets/project/.quasar/ssr-config.js',     
      'quasar-ssr': '/home/beets/project/.quasar/ssr-config.js'
    },
}

and then after build if you want to see what it looked like, check .quasar/ssr-config.js, but you cannot edit it:

/**
 * THIS FILE IS GENERATED AUTOMATICALLY.
 * DO NOT EDIT.
 **/

That being said, this file should not be a problem as quasar build bundles it into the final index.js file. Did you try my distDir suggestions?

mosiki

Yeah, thanks. The ssr build is now being created in functions/dist/ssr folder.

I have tried another option which is to use the src-ssr/index.js file as a cloud function in firebase.

Adding to top of the src-ssr/index.js file -

const functions = require('firebase-functions') // <---- ADD FIREBASE FUNCTIONS

Adding to bottom of file -

exports.handler = app;

Then in the functions index.js file -

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const server = require("../src-ssr/index.js");

exports.server = functions.https.onRequest(server.handler);

On firebase deploy command, it throws an error:

Error: Error parsing triggers: Cannot find module 'quasar-ssr'

beets

@mosiki You should not try to require index.js from src-ssr after build, as that file must be processed by quasar cli. You could try adding firebase functions in another file in src-ssr and require that, but I’m not familiar with firebase.

Think of it this way though, anything in src-ssr is the source files for an express sever. Once you build, the express server gets built to the dist dir and is independent of quasar at that point. Usually to deploy you just copy the dist dir to the server, yarn install, and run.

No More Posting New Topics!

Firebase & SSR Deployment