Correct way to Deploy SSR-PWA to Netlify ?

  • Hi all, I have just stumbled across the quasar framework and am testing a ssr - pwa deployment to Netlify without success. (using V 0.17.0) - pwa worked first time, ssr with pwa takeover failed. I would appreciate if somone could point me in the right direction of how to get this up and running.

    PWA build working
    Publish directory: dist/pwa-mat

    build command: “yarn build”

    Publish directory: dist/ssr-mat

     "build":"quasar build -m ssr ",

    runs build on Netlify but does not find dist/ssr-mat folder and run “yarn start”

    7:48:41 AM: Verify run directory
    7:48:41 AM: Executing user command: yarn start
    7:48:42 AM: yarn run v1.13.0
    7:48:42 AM: error Command "start" not found.   

    pkg scripts updated

    "build":"quasar build -m ssr && yarn ssr",
    "ssr":"cd dist/ssr-mat && yarn start",

    Netlify error

    8:38:57 AM: Build ready to start
    8:39:00 AM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
    8:39:00 AM: build-image tag: v3.3.2
    8:39:00 AM: buildbot version: 75cd99f62ada9e21edea53208e8baf0eab85a045
    8:39:00 AM: Fetching cached dependencies
    8:39:00 AM: Starting to download cache of 89.8MB
    8:39:01 AM: Finished downloading cache in 511.475355ms
    8:39:01 AM: Starting to extract cache
    8:39:04 AM: Finished extracting cache in 3.532109944s
    8:39:04 AM: Finished fetching cache in 4.106948732s
    8:39:04 AM: Starting to prepare the repo for build
    8:39:07 AM: Preparing Git Reference refs/heads/live
    8:39:08 AM: Starting build script
    8:39:08 AM: Installing dependencies
    8:39:09 AM: Started restoring cached node version
    8:39:10 AM: Finished restoring cached node version
    8:39:11 AM: v10.15.3 is already installed.
    8:39:12 AM: Now using node v10.15.3 (npm v6.4.1)
    8:39:12 AM: Attempting ruby version 2.6.2, read from environment
    8:39:14 AM: Using ruby version 2.6.2
    8:39:14 AM: Using PHP version 5.6
    8:39:14 AM: Started restoring cached node modules
    8:39:14 AM: Finished restoring cached node modules
    8:39:14 AM: Started restoring cached yarn cache
    8:39:14 AM: Finished restoring cached yarn cache
    8:39:15 AM: Installing NPM modules using Yarn version 1.13.0
    8:39:16 AM: yarn install v1.13.0
    8:39:16 AM: [1/5] Validating package.json...
    8:39:16 AM: [2/5] Resolving packages...
    8:39:16 AM: warning Resolution field "ajv@6.8.1" is incompatible with requested version "ajv@^6.9.1"
    8:39:16 AM: warning Resolution field "ajv@6.8.1" is incompatible with requested version "ajv@^6.9.1"
    8:39:16 AM: warning Resolution field "ajv@6.8.1" is incompatible with requested version "ajv@6.5.3"
    8:39:16 AM: success Already up-to-date.
    8:39:16 AM: Done in 0.71s.
    8:39:16 AM: NPM modules installed using Yarn
    8:39:17 AM: Started restoring cached go cache
    8:39:17 AM: Finished restoring cached go cache
    8:39:17 AM: unset GOOS;
    8:39:17 AM: unset GOARCH;
    8:39:17 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
    8:39:17 AM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
    8:39:17 AM: go version >&2;
    8:39:17 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
    8:39:17 AM: go version go1.12 linux/amd64
    8:39:17 AM: Installing missing commands
    8:39:17 AM: Verify run directory
    8:39:17 AM: Executing user command: yarn build
    8:39:17 AM: yarn run v1.13.0
    8:39:17 AM: $ quasar build -m ssr && yarn ssr
    8:39:17 AM:  Build mode........ ssr
    8:39:17 AM:  Quasar theme...... mat
    8:39:17 AM:  Quasar CLI........ v0.17.24
    8:39:17 AM:  Quasar Framework.. v0.17.20
    8:39:17 AM:  Debugging......... no
    8:39:18 AM:  app:quasar-conf Reading quasar.conf.js +0ms
    8:39:19 AM:  app:workbox [GenerateSW] Will generate a service-worker file. Ignoring your custom written one. +1s
    8:39:19 AM:  app:webpack Extending Client Webpack config +68ms
    8:39:19 AM:  app:webpack Extending Server Webpack config +2ms
    8:39:19 AM:  app:artifacts Cleaned build artifact: "/opt/build/repo/dist/ssr-mat" +4ms
    8:39:19 AM:  app:generator Generating Webpack entry point +2ms
    8:39:19 AM:  app:build Building... +3ms
    8:39:19 AM:  app:progress Compiling Server... +147ms
    8:39:19 AM:  app:progress Compiling Client... +23ms
    8:39:19 AM: (node:1293) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    8:40:19 AM:  app:progress Compiled Server in ~59s +59s
    8:40:20 AM:  app:progress Compiled Client in ~1m +2s
    8:40:20 AM:  app:artifacts Added build artifact "/opt/build/repo/dist/ssr-mat" +1ms
    8:40:20 AM: Version: webpack 4.25.1
    8:40:20 AM: Time: 59473ms
    8:40:20 AM: Built at: 05/12/2019 6:40:19 AM
    8:40:20 AM:                         Asset       Size  Chunks             Chunk Names
    8:40:20 AM:                   ../index.js   28 bytes          [emitted]
    8:40:20 AM:               ../package.json  635 bytes          [emitted]
    8:40:20 AM:        ../server/extension.js  860 bytes          [emitted]
    8:40:20 AM:            ../server/index.js   1.98 KiB          [emitted]
    8:40:20 AM:                     ../ssr.js   1.38 KiB          [emitted]
    8:40:20 AM:              ../template.html   1.66 KiB          [emitted]
    8:40:20 AM: ../vue-ssr-server-bundle.json    240 KiB          [emitted]
    8:40:20 AM: Entrypoint app = server-bundle.js
    8:40:20 AM: Version: webpack 4.25.1
    8:40:20 AM: Time: 61092ms
    8:40:20 AM: Built at: 05/12/2019 6:40:20 AM
    8:40:20 AM:                                                   Asset       Size    Chunks             Chunk Names
    8:40:20 AM:                         ../vue-ssr-client-manifest.json   27.4 KiB            [emitted]
    8:40:20 AM:             fonts/KFOkCnqEu92Fr1MmgVxIIzQ.e9dbbe8a.woff   19.5 KiB            [emitted]
    8:40:20 AM:            fonts/KFOlCnqEu92Fr1MmEU9fBBc-.de8b7431.woff   19.5 KiB            [emitted]
    8:40:20 AM:            fonts/KFOlCnqEu92Fr1MmSU5fBBc-.a1471d1d.woff   19.4 KiB            [emitted]
    8:40:20 AM:            fonts/KFOlCnqEu92Fr1MmWUlfBBc-.cf6613d1.woff   19.4 KiB            [emitted]
    8:40:20 AM:            fonts/KFOlCnqEu92Fr1MmYUtfBBc-.8c2ade50.woff   19.5 KiB            [emitted]
    8:40:20 AM:                fonts/KFOmCnqEu92Fr1Mu4mxM.bafb105b.woff   19.4 KiB            [emitted]
    8:40:20 AM:        fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.c38ebd3c.woff   70.6 KiB            [emitted]
    8:40:20 AM: fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.8a9a261c.woff2   53.8 KiB            [emitted]
    8:40:20 AM:                       img/quasar-logo-full.c3e88651.svg   12.6 KiB            [emitted]
    8:40:20 AM:                                 js/1928f995.4e50536b.js  864 bytes  1928f995  [emitted]
    8:40:20 AM:                                 js/889824ae.c319fbf5.js   2.79 KiB  889824ae  [emitted]
    8:40:20 AM:                                      js/app.b569bbab.js    171 KiB       app  [emitted]  app
    8:40:20 AM:                                   js/vendor.90fceb3e.js    228 KiB    vendor  [emitted]  vendor
    8:40:20 AM:                                           manifest.json  602 bytes            [emitted]
    8:40:20 AM:   precache-manifest.a5ea8e4017a647bd20e113611b8fe444.js   2.56 KiB            [emitted]
    8:40:20 AM:                                       service-worker.js   1.06 KiB            [emitted]
    8:40:20 AM:                    statics/icons/apple-icon-152x152.png   12.8 KiB            [emitted]
    8:40:20 AM:                         statics/icons/favicon-16x16.png   1.32 KiB            [emitted]
    8:40:20 AM:                         statics/icons/favicon-32x32.png   2.54 KiB            [emitted]
    8:40:20 AM:                          statics/icons/icon-128x128.png   7.03 KiB            [emitted]
    8:40:20 AM:                          statics/icons/icon-192x192.png   10.3 KiB            [emitted]
    8:40:20 AM:                          statics/icons/icon-256x256.png   14.7 KiB            [emitted]
    8:40:20 AM:                          statics/icons/icon-384x384.png   22.7 KiB            [emitted]
    8:40:20 AM:                          statics/icons/icon-512x512.png     29 KiB            [emitted]
    8:40:20 AM:                       statics/icons/ms-icon-144x144.png     12 KiB            [emitted]
    8:40:20 AM:                                 statics/quasar-logo.png   7.03 KiB            [emitted]
    8:40:20 AM: Entrypoint app = js/vendor.90fceb3e.js js/app.b569bbab.js
    8:40:20 AM:  Build succeeded
    8:40:20 AM:  Build mode........ ssr
    8:40:20 AM:  Quasar theme...... mat
    8:40:20 AM:  Quasar CLI........ v0.17.24
    8:40:20 AM:  Quasar Framework.. v0.17.20
    8:40:20 AM:  Debugging......... no
    8:40:20 AM:  ==================
    8:40:20 AM:  Output folder..... /opt/build/repo/dist/ssr-mat
    8:40:20 AM:  Tip: The output folder must be yarn/npm installed before using it,
    8:40:20 AM:       except when it is run inside your already yarn/npm installed project folder.
    8:40:20 AM:  Tip: Notice the package.json generated, where there's a script defined:
    8:40:20 AM:         "start": "node index.js"
    8:40:20 AM:       Running "$ yarn start" or "$ npm run start" from the output folder will
    8:40:20 AM:       start the webserver. Alternatively you can call "$ node index.js"
    8:40:20 AM:       yourself.
    8:40:22 AM: $ cd dist/ssr-mat && yarn start
    8:40:22 AM: $ node index.js
    8:40:22 AM: Server listening at port 3000
    9:08:59 AM: Build exceeded maximum allowed runtime

    What do I try next?
    Any help appreciated.

  • SSR (Server Side Rendering) sites need a server to run and so Netlify won’t work for that. Netlify just hosts your publish directory but there’s not a server for you to render the page content and send it back.

    If you are looking to statically generate your site (like nuxt generate) then you should know that Quasar doesn’t have a mode for that. The closest you can get is SPA. However Netlify does have an “Enable prerendering” setting that is currently in Beta. I’d recommend building your site as a PWA and enabling that setting for Netlify. Not sure how good their prerendering is but I’m it on one of my own sites and the Google Lighthouse scores were pretty good.

    If you want SSR then look at deploying with

  • I have a crazy idea I want to try with Quasar. I’m going to try to run a SSR build through and see if I can generate all my pages statically to be hosted on Netlify. I’ll get back here soon on that front.

  • I’m interested in hearing how it goes for you!

  • @elliott @JamesDev Last I checked about a month ago v1 is not available any longer and v2 isn’t compatible. So if you get stuck trying to get it to work, that’s why. The Quasar documentation is specifically for v1.

  • @99hats yeah I was just looking at that…looks like isn’t an option right now and generating static pages from the quasar app is possible but definitely is going to take a good amount of work to make it work the right way…

  • I had problems with too - so I just buckled down and used Digital Ocean. And for those of you interested, I wrote up a how to:

Log in to reply