WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 2ee65ae

Browse files
committed
fix(docs): update ssr webserver page
1 parent 3a38aea commit 2ee65ae

File tree

2 files changed

+158
-106
lines changed

2 files changed

+158
-106
lines changed

docs/src/pages/quasar-cli-vite/developing-ssr/ssr-webserver.md

Lines changed: 79 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ The `/src-ssr/server.js` file is used for both DEV and PROD, so please be carefu
1919
*/
2020

2121
/**
22-
* Make sure to yarn add / npm install (in your project root)
22+
* Make sure to yarn/npm/pnpm/bun install (in your project root)
2323
* anything you import here (except for express and compression).
2424
*/
2525
import express from 'express'
@@ -38,6 +38,21 @@ import {
3838
* connect-like middlewares.
3939
*
4040
* Can be async: defineSsrCreate(async ({ ... }) => { ... })
41+
*
42+
* Param: ({
43+
* port, // on dev: devServer port; on prod: process.env.PORT or quasar.config > ssr > prodPort
44+
* resolve: {
45+
* urlPath, // (url) => path string with publicPath ensured to be included,
46+
* root, // (pathPart1, ...pathPartN) => path string (joins to the root folder),
47+
* public // (pathPart1, ...pathPartN) => path string (joins to the public folder)
48+
* },
49+
* publicPath, // string
50+
* folders: {
51+
* root, // path string of the root folder
52+
* public // path string of the public folder
53+
* },
54+
* render, // (ssrContext) => html string
55+
* })
4156
*/
4257
export const create = defineSsrCreate((/* { ... } */) => {
4358
const app = express()
@@ -67,6 +82,27 @@ export const create = defineSsrCreate((/* { ... } */) => {
6782
* handler for serverless use or whatever else fits your needs.
6883
*
6984
* Can be async: defineSsrListen(async ({ app, devHttpsApp, port }) => { ... })
85+
*
86+
* Param: ({
87+
* app, // Expressjs app or whatever is returned from create()
88+
* devHttpsApp, // DEV only, if using HTTPS
89+
* port, // on dev: devServer port; on prod: process.env.PORT or quasar.config > ssr > prodPort
90+
* resolve: {
91+
* urlPath, // (url) => path string with publicPath ensured to be included,
92+
* root, // (pathPart1, ...pathPartN) => path string (joins to the root folder),
93+
* public // (pathPart1, ...pathPartN) => path string (joins to the public folder)
94+
* },
95+
* publicPath, // string
96+
* folders: {
97+
* root, // path string of the root folder
98+
* public // path string of the public folder
99+
* },
100+
* render, // (ssrContext) => html string
101+
* serve: {
102+
* static // ({ urlPath = '/', pathToServe = '.', opts = {} }) => void (OR whatever returned by serveStaticContent()),
103+
* error // DEV only; ({ err, req, res }) => void
104+
* },
105+
* })
70106
*/
71107
export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
72108
const server = devHttpsApp || app
@@ -86,6 +122,28 @@ export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
86122
* you can use the "listenResult" param.
87123
*
88124
* Can be async: defineSsrClose(async ({ listenResult }) => { ... })
125+
*
126+
* Param: ({
127+
* app, // Expressjs app or whatever is returned from create()
128+
* devHttpsApp, // DEV only, if using HTTPS
129+
* port, // on dev: devServer port; on prod: process.env.PORT or quasar.config > ssr > prodPort
130+
* resolve: {
131+
* urlPath, // (url) => path string with publicPath ensured to be included,
132+
* root, // (pathPart1, ...pathPartN) => path string (joins to the root folder),
133+
* public // (pathPart1, ...pathPartN) => path string (joins to the public folder)
134+
* },
135+
* publicPath, // string
136+
* folders: {
137+
* root, // path string of the root folder
138+
* public // path string of the public folder
139+
* },
140+
* serve: {
141+
* static // ({ urlPath = '/', pathToServe = '.', opts = {} }) => void (OR whatever returned by serveStaticContent()),
142+
* error // DEV only; ({ err, req, res }) => void
143+
* },
144+
* render, // (ssrContext) => html string
145+
* listenResult // whatever returned from listen()
146+
* })
89147
*/
90148
export const close = defineSsrClose(({ listenResult }) => {
91149
return listenResult.close()
@@ -103,6 +161,22 @@ const maxAge = process.env.DEV
103161
*
104162
* Can be async: defineSsrServeStaticContent(async ({ app, resolve }) => {
105163
* Can return an async function: return async ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
164+
*
165+
* Param: ({
166+
* app, // Expressjs app or whatever is returned from create()
167+
* port, // on dev: devServer port; on prod: process.env.PORT or quasar.config > ssr > prodPort
168+
* resolve: {
169+
* urlPath: (url) => path string with publicPath ensured to be included,
170+
* root: (pathPart1, ...pathPartN) => path string (joins to the root folder),
171+
* public: (pathPart1, ...pathPartN) => path string (joins to the public folder)
172+
* },
173+
* publicPath, // string
174+
* folders: {
175+
* root, // path string of the root folder
176+
* public // path string of the public folder
177+
* },
178+
* render: (ssrContext) => html string
179+
* })
106180
*/
107181
export const serveStaticContent = defineSsrServeStaticContent(({ app, resolve }) => {
108182
return ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
@@ -160,54 +234,6 @@ export const renderPreloadTag = defineSsrRenderPreloadTag((file/* , { ssrContext
160234
Remember that whatever the `listen()` function returns (if anything) will be exported from your built `dist/ssr/index.js`. You can return your ssrHandler for a serverless architecture should you need it.
161235
:::
162236

163-
## Parameters
164-
165-
```js
166-
export function <functionName> ({
167-
app, port, isReady, ssrHandler,
168-
resolve, publicPath, folders, render, serve
169-
}) => {
170-
```
171-
172-
Detailing the Object:
173-
174-
```js
175-
{
176-
app, // Expressjs app instance (or whatever you return from create())
177-
178-
port, // on production: process∙env∙PORT or quasar.config file > ssr > prodPort
179-
// on development: quasar.config file > devServer > port
180-
181-
isReady, // Function to call returning a Promise
182-
// when app is ready to serve clients
183-
184-
ssrHandler, // Prebuilt app handler if your serverless service
185-
// doesn't require a specific way to provide it.
186-
// Form: ssrHandler (req, res, next)
187-
// Tip: it uses isReady() under the hood already
188-
189-
// all of the following are the same as
190-
// for the SSR middlewares (check its docs page);
191-
// normally you don't need these here
192-
// (use a real SSR middleware instead)
193-
resolve: {
194-
urlPath(path)
195-
root(arg1, arg2),
196-
public(arg1, arg2)
197-
},
198-
publicPath, // String
199-
folders: {
200-
root, // String
201-
public // String
202-
},
203-
render(ssrContext),
204-
serve: {
205-
static({ urlPath, pathToServe, opts }),
206-
error({ err, req, res })
207-
}
208-
}
209-
```
210-
211237
## Usage
212238

213239
::: warning
@@ -270,13 +296,13 @@ export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
270296
}
271297
else { // in production
272298
// return an object with a "handler" property
273-
// that the server script will named-export
299+
// that the server script will be named-export
274300
return { handler: app }
275301
}
276302
})
277303
```
278304

279-
Please note that the provided `ssrHandler` is a Function of form: `(req, res, next) => void`.
305+
Please note that the provided `app` is a Function of form: `(req, res, next) => void`.
280306
Should you require to export a handler of form `(event, context, callback) => void` then you will most likely want to use the `serverless-http` package (see below).
281307

282308
#### Example: serverless-http
@@ -296,7 +322,7 @@ export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
296322
})
297323
}
298324
else { // in production
299-
return { handler: serverless(ssrHandler) }
325+
return { handler: serverless(app) }
300326
}
301327
})
302328
```
@@ -317,7 +343,7 @@ export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
317343
}
318344
else { // in production
319345
return {
320-
handler: functions.https.onRequest(ssrHandler)
346+
handler: functions.https.onRequest(app)
321347
}
322348
}
323349
})

docs/src/pages/quasar-cli-webpack/developing-ssr/ssr-webserver.md

Lines changed: 79 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ The `/src-ssr/server.js` file is used for both DEV and PROD, so please be carefu
1919
*/
2020

2121
/**
22-
* Make sure to yarn add / npm install (in your project root)
22+
* Make sure to yarn/npm/pnpm/bun install (in your project root)
2323
* anything you import here (except for express and compression).
2424
*/
2525
import express from 'express'
@@ -38,6 +38,21 @@ import {
3838
* connect-like middlewares.
3939
*
4040
* Can be async: defineSsrCreate(async ({ ... }) => { ... })
41+
*
42+
* Param: ({
43+
* port, // on dev: devServer port; on prod: process.env.PORT or quasar.config > ssr > prodPort
44+
* resolve: {
45+
* urlPath, // (url) => path string with publicPath ensured to be included,
46+
* root, // (pathPart1, ...pathPartN) => path string (joins to the root folder),
47+
* public // (pathPart1, ...pathPartN) => path string (joins to the public folder)
48+
* },
49+
* publicPath, // string
50+
* folders: {
51+
* root, // path string of the root folder
52+
* public // path string of the public folder
53+
* },
54+
* render, // (ssrContext) => html string
55+
* })
4156
*/
4257
export const create = defineSsrCreate((/* { ... } */) => {
4358
const app = express()
@@ -67,6 +82,27 @@ export const create = defineSsrCreate((/* { ... } */) => {
6782
* handler for serverless use or whatever else fits your needs.
6883
*
6984
* Can be async: defineSsrListen(async ({ app, devHttpsApp, port }) => { ... })
85+
*
86+
* Param: ({
87+
* app, // Expressjs app or whatever is returned from create()
88+
* devHttpsApp, // DEV only, if using HTTPS
89+
* port, // on dev: devServer port; on prod: process.env.PORT or quasar.config > ssr > prodPort
90+
* resolve: {
91+
* urlPath, // (url) => path string with publicPath ensured to be included,
92+
* root, // (pathPart1, ...pathPartN) => path string (joins to the root folder),
93+
* public // (pathPart1, ...pathPartN) => path string (joins to the public folder)
94+
* },
95+
* publicPath, // string
96+
* folders: {
97+
* root, // path string of the root folder
98+
* public // path string of the public folder
99+
* },
100+
* render, // (ssrContext) => html string
101+
* serve: {
102+
* static // ({ urlPath = '/', pathToServe = '.', opts = {} }) => void (OR whatever returned by serveStaticContent()),
103+
* error // DEV only; ({ err, req, res }) => void
104+
* },
105+
* })
70106
*/
71107
export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
72108
const server = devHttpsApp || app
@@ -86,6 +122,28 @@ export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
86122
* you can use the "listenResult" param.
87123
*
88124
* Can be async: defineSsrClose(async ({ listenResult }) => { ... })
125+
*
126+
* Param: ({
127+
* app, // Expressjs app or whatever is returned from create()
128+
* devHttpsApp, // DEV only, if using HTTPS
129+
* port, // on dev: devServer port; on prod: process.env.PORT or quasar.config > ssr > prodPort
130+
* resolve: {
131+
* urlPath, // (url) => path string with publicPath ensured to be included,
132+
* root, // (pathPart1, ...pathPartN) => path string (joins to the root folder),
133+
* public // (pathPart1, ...pathPartN) => path string (joins to the public folder)
134+
* },
135+
* publicPath, // string
136+
* folders: {
137+
* root, // path string of the root folder
138+
* public // path string of the public folder
139+
* },
140+
* serve: {
141+
* static // ({ urlPath = '/', pathToServe = '.', opts = {} }) => void (OR whatever returned by serveStaticContent()),
142+
* error // DEV only; ({ err, req, res }) => void
143+
* },
144+
* render, // (ssrContext) => html string
145+
* listenResult // whatever returned from listen()
146+
* })
89147
*/
90148
export const close = defineSsrClose(({ listenResult }) => {
91149
return listenResult.close()
@@ -103,6 +161,22 @@ const maxAge = process.env.DEV
103161
*
104162
* Can be async: defineSsrServeStaticContent(async ({ app, resolve }) => {
105163
* Can return an async function: return async ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
164+
*
165+
* Param: ({
166+
* app, // Expressjs app or whatever is returned from create()
167+
* port, // on dev: devServer port; on prod: process.env.PORT or quasar.config > ssr > prodPort
168+
* resolve: {
169+
* urlPath: (url) => path string with publicPath ensured to be included,
170+
* root: (pathPart1, ...pathPartN) => path string (joins to the root folder),
171+
* public: (pathPart1, ...pathPartN) => path string (joins to the public folder)
172+
* },
173+
* publicPath, // string
174+
* folders: {
175+
* root, // path string of the root folder
176+
* public // path string of the public folder
177+
* },
178+
* render: (ssrContext) => html string
179+
* })
106180
*/
107181
export const serveStaticContent = defineSsrServeStaticContent(({ app, resolve }) => {
108182
return ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
@@ -160,54 +234,6 @@ export const renderPreloadTag = defineSsrRenderPreloadTag((file/* , { ssrContext
160234
Remember that whatever the `listen()` function returns (if anything) will be exported from your built `dist/ssr/index.js`. You can return your ssrHandler for a serverless architecture should you need it.
161235
:::
162236

163-
## Parameters
164-
165-
```js
166-
export function <functionName> ({
167-
app, port, isReady, ssrHandler,
168-
resolve, publicPath, folders, render, serve
169-
}) => {
170-
```
171-
172-
Detailing the Object:
173-
174-
```js
175-
{
176-
app, // Expressjs app instance (or whatever you return from create())
177-
178-
port, // on production: process∙env∙PORT or quasar.config file > ssr > prodPort
179-
// on development: quasar.config file > devServer > port
180-
181-
isReady, // Function to call returning a Promise
182-
// when app is ready to serve clients
183-
184-
ssrHandler, // Prebuilt app handler if your serverless service
185-
// doesn't require a specific way to provide it.
186-
// Form: ssrHandler (req, res, next)
187-
// Tip: it uses isReady() under the hood already
188-
189-
// all of the following are the same as
190-
// for the SSR middlewares (check its docs page);
191-
// normally you don't need these here
192-
// (use a real SSR middleware instead)
193-
resolve: {
194-
urlPath(path)
195-
root(arg1, arg2),
196-
public(arg1, arg2)
197-
},
198-
publicPath, // String
199-
folders: {
200-
root, // String
201-
public // String
202-
},
203-
render(ssrContext),
204-
serve: {
205-
static({ urlPath, pathToServe, opts }),
206-
error({ err, req, res })
207-
}
208-
}
209-
```
210-
211237
## Usage
212238

213239
::: warning
@@ -270,13 +296,13 @@ export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
270296
}
271297
else { // in production
272298
// return an object with a "handler" property
273-
// that the server script will named-export
299+
// that the server script will be named-export
274300
return { handler: app }
275301
}
276302
})
277303
```
278304

279-
Please note that the provided `ssrHandler` is a Function of form: `(req, res, next) => void`.
305+
Please note that the provided `app` is a Function of form: `(req, res, next) => void`.
280306
Should you require to export a handler of form `(event, context, callback) => void` then you will most likely want to use the `serverless-http` package (see below).
281307

282308
#### Example: serverless-http
@@ -296,7 +322,7 @@ export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
296322
})
297323
}
298324
else { // in production
299-
return { handler: serverless(ssrHandler) }
325+
return { handler: serverless(app) }
300326
}
301327
})
302328
```
@@ -317,7 +343,7 @@ export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
317343
}
318344
else { // in production
319345
return {
320-
handler: functions.https.onRequest(ssrHandler)
346+
handler: functions.https.onRequest(app)
321347
}
322348
}
323349
})

0 commit comments

Comments
 (0)