Zfunkcneni aplikace, aktualizace zavislosti

src-ssr/middlewares/render.js

@@ -1,10 +1,10 @@
-import { ssrMiddleware } from 'quasar/wrappers'
+import { defineSsrMiddleware } from '#q-app/wrappers'
 
 // This middleware should execute as last one
 // since it captures everything and tries to
 // render the page with Vue
 
-export default ssrMiddleware(({ app, resolve, render, serve }) => {
+export default defineSsrMiddleware(({ app, resolve, render, serve }) => {
   // we capture any other Express route and hand it
   // over to Vue and Vue Router to render our page
   app.get(resolve.urlPath('*'), (req, res) => {
@@ -28,12 +28,9 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {
         } else if (err.code === 404) {
           // hmm, Vue Router could not find the requested route
 
-          console.log("404 v renderu")
-
           // Should reach here only if no "catch-all" route
           // is defined in /src/routes
-          // res.status(404).send('404 | Page Not Found')
-            res.redirect(resolve.urlPath('404'))
+          res.status(404).send('404 | Page Not Found')
         } else if (process.env.DEV) {
           // well, we treat any other code as error;
           // if we're in dev mode, then we can use Quasar CLI
@@ -42,7 +39,6 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {
 
           // serve.error is available on dev only
           serve.error({ err, req, res })
-
         } else {
           // we're in production, so we should have another method
           // to display something to the client when we encounter an error
@@ -51,7 +47,11 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {
 
           // Render Error Page on production or
           // create a route (/src/routes) for an error page and redirect to it
-            res.redirect(resolve.urlPath('500'))
+          res.status(500).send('500 | Internal Server Error')
+
+          if (process.env.DEBUGGING) {
+            console.error(err.stack)
+          }
         }
       })
   })

src-ssr/server.js

@@ -12,21 +12,22 @@
 import express from 'express'
 import compression from 'compression'
 import {
-  ssrClose,
-  ssrCreate,
-  ssrListen,
-  ssrRenderPreloadTag,
-  ssrServeStaticContent
-} from 'quasar/wrappers'
+  defineSsrCreate,
+  defineSsrInjectDevMiddleware,
+  defineSsrListen,
+  defineSsrClose,
+  defineSsrServeStaticContent,
+  defineSsrRenderPreloadTag
+} from '#q-app/wrappers'
 
 /**
  * Create your webserver and return its instance.
  * If needed, prepare your webserver to receive
  * connect-like middlewares.
  *
- * Should NOT be async!
+ * Can be async: defineSsrCreate(async ({ ... }) => { ... })
  */
-export const create = ssrCreate((/* { ... } */) => {
+export const create = defineSsrCreate((/* { ... } */) => {
   const app = express()
 
   // attackers can use this header to detect apps running Express
@@ -42,6 +43,19 @@ export const create = ssrCreate((/* { ... } */) => {
   return app
 })
 
+/**
+ * Used by Quasar SSR dev server to inject middleware into the webserver.
+ * It uses it to handle Vite dev server, handle public paths, etc.
+ * The given middleware is compatible with `node:http`'s Server, Express, Connect, etc.
+ *
+ * Can be async: defineSsrInjectDevMiddleware(async ({ app }) => { ... })
+ */
+export const injectDevMiddleware = defineSsrInjectDevMiddleware(({ app }) => {
+  return (middleware) => {
+    app.use(middleware)
+  }
+})
+
 /**
  * You need to make the server listen to the indicated port
  * and return the listening instance or whatever you need to
@@ -52,10 +66,12 @@ export const create = ssrCreate((/* { ... } */) => {
  *
  * For production, you can instead export your
  * handler for serverless use or whatever else fits your needs.
+ *
+ * Can be async: defineSsrListen(async ({ app, devHttpsApp, port }) => { ... })
  */
-export const listen = ssrListen(async ({ app, port, isReady }) => {
-  await isReady()
-  return app.listen(port, () => {
+export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
+  const server = devHttpsApp || app
+  return server.listen(port, () => {
     if (process.env.PROD) {
       console.log('Server listening at port ' + port)
     }
@@ -70,9 +86,9 @@ export const listen = ssrListen(async ({ app, port, isReady }) => {
  * Should you need the result of the "listen()" call above,
  * you can use the "listenResult" param.
  *
- * Can be async.
+ * Can be async: defineSsrClose(async ({ listenResult }) => { ... })
  */
-export const close = ssrClose(({ listenResult }) => {
+export const close = defineSsrClose(({ listenResult }) => {
   return listenResult.close()
 })
 
@@ -81,14 +97,19 @@ const maxAge = process.env.DEV
   : 1000 * 60 * 60 * 24 * 30
 
 /**
- * Should return middleware that serves the indicated path
- * with static content.
+ * Should return a function that will be used to configure the webserver
+ * to serve static content at "urlPath" from "pathToServe" folder/file.
+ *
+ * Notice resolve.urlPath(urlPath) and resolve.public(pathToServe) usages.
+ *
+ * Can be async: defineSsrServeStaticContent(async ({ app, resolve }) => {
+ * Can return an async function: return async ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
  */
-export const serveStaticContent = ssrServeStaticContent((path, opts) => {
-  return express.static(path, {
-    maxAge,
-    ...opts
-  })
+export const serveStaticContent = defineSsrServeStaticContent(({ app, resolve }) => {
+  return ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
+    const serveFn = express.static(resolve.public(pathToServe), { maxAge, ...opts })
+    app.use(resolve.urlPath(urlPath), serveFn)
+  }
 })
 
 const jsRE = /\.js$/
@@ -103,13 +124,13 @@ const pngRE = /\.png$/
  * Should return a String with HTML output
  * (if any) for preloading indicated file
  */
-export const renderPreloadTag = ssrRenderPreloadTag((file) => {
+export const renderPreloadTag = defineSsrRenderPreloadTag((file/* , { ssrContext } */) => {
   if (jsRE.test(file) === true) {
     return `<link rel="modulepreload" href="${file}" crossorigin>`
   }
 
   if (cssRE.test(file) === true) {
-    return `<link rel="stylesheet" href="${file}">`
+    return `<link rel="stylesheet" href="${file}" crossorigin>`
   }
 
   if (woffRE.test(file) === true) {
@@ -121,15 +142,15 @@ export const renderPreloadTag = ssrRenderPreloadTag((file) => {
   }
 
   if (gifRE.test(file) === true) {
-    return `<link rel="preload" href="${file}" as="image" type="image/gif">`
+    return `<link rel="preload" href="${file}" as="image" type="image/gif" crossorigin>`
   }
 
   if (jpgRE.test(file) === true) {
-    return `<link rel="preload" href="${file}" as="image" type="image/jpeg">`
+    return `<link rel="preload" href="${file}" as="image" type="image/jpeg" crossorigin>`
   }
 
   if (pngRE.test(file) === true) {
-    return `<link rel="preload" href="${file}" as="image" type="image/png">`
+    return `<link rel="preload" href="${file}" as="image" type="image/png" crossorigin>`
   }
 
   return ''

src-ssr/ssr-flag.d.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
-//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
-
-declare module "quasar/dist/types/feature-flag" {
-  interface QuasarFeatureFlags {
-    ssr: true;
-  }
-}