SPA-SSR Deployment with Apache



  • 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):

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

    1. 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!


  • Admin

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



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



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

    1. include in quasar.conf.js assetPublicPath: '/node/' -> nothing
    2. 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
    3. 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.