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-matSSR
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 now.sh.
-
I have a crazy idea I want to try with Quasar. I’m going to try to run a SSR build through cypress.io 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!
-
-
-
I had problems with Now.sh too - so I just buckled down and used Digital Ocean. And for those of you interested, I wrote up a how to: