SPA-SSR Deployment with Apache

Ivo

Hi everyone,
I’m trying to deploy a SPA with SSR mode to production but only the express generated html is appearing correctly, every static file (www folder) returns a 404 error.

My configuration is on a subdomain (the top domain is actually the site to be replaced with a quasar based version):

Configuration
1.1 Apache:

[...]
ProxyPass /node http://localhost:4000
ProxyPassReverse /node http://localhost:4000
[...]

1.2 quasar.conf.js

[...]
  build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      publicPath: '/node/',
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        })
      }
    },
[...]

1.3 src-ssr/index.js
As originally.

Debug:
A. quasar build and then running quasar serve --history on dist/spa-mat: everything works as expected.
B. quasar build -m ssr and then running npm start on dist/ssr-mat: none of the files present on dist/ssr-mat/www is loaded, all giving 404 erros.

$ DEBUG=express:* node index.js
  express:application set "x-powered-by" to true +0ms
  express:application set "etag" to 'weak' +4ms
  express:application set "etag fn" to [Function: generateETag] +1ms
  express:application set "env" to 'development' +1ms
  express:application set "query parser" to 'extended' +0ms
  express:application set "query parser fn" to [Function: parseExtendedQueryString] +0ms
  express:application set "subdomain offset" to 2 +0ms
  express:application set "trust proxy" to false +0ms
  express:application set "trust proxy fn" to [Function: trustNone] +1ms
  express:application booting in development mode +0ms
  express:application set "view" to [Function: View] +0ms
  express:application set "views" to '/var/www/html/DigitalSSR/dist/ssr-mat/views' +0ms
  express:application set "jsonp callback name" to 'callback' +0ms
  express:router use '/' query +2ms
  express:router:layer new '/' +0ms
  express:router use '/' expressInit +1ms
  express:router:layer new '/' +0ms
  express:router use '/' serveStatic +0ms
  express:router:layer new '/' +0ms
  express:router use '/' compression +1ms
  express:router:layer new '/' +0ms
  express:router:route new '*' +0ms
  express:router:layer new '*' +0ms
  express:router:route get '*' +0ms
  express:router:layer new '/' +1ms
Server listening at port 4001
  express:router dispatching GET / +12s
  express:router query  : / +2ms
  express:router expressInit  : / +1ms
  express:router serveStatic  : / +1ms
  express:router compression  : / +5ms

Thank you for your help!

rstoenescu

Are you building a SPA or a SSR? From your description, this is confusing: “I’m trying to deploy a SPA with SSR mode”.

Ivo

@rstoenescu thanks for your excellent work and for answering.
Yes, it is confusing, sorry. I am trying to build an SSR, not a SPA.

Ivo

An update:
I noticed that the statics GET ignores the publicPath set on quasar.conf.js, so I tried:

include in quasar.conf.js assetPublicPath: '/node/' -> nothing
on src-ssr/index.js:
2.1.app.use('js', express.static(path.join(__dirname, 'www/js'))) -> nothing
2.2.app.use('*/js', express.static(path.join(__dirname, 'www/js'))) -> nothing
template.html: if I include <base href="/node/"/> on the header (based on this stackoverflow answer), the images are loaded but not js, css…

Probably this is simple and a newbie mistake, but thank you all for all the help you can give.

No More Posting New Topics!

SPA-SSR Deployment with Apache