Changes
- feat(app-vite): upgrade tsconfig preset (#17301)
- feat(app-vite): use newest ssl-skip package, depending on the Capacitor version #16808
- feat(app-vite): make SSR "create" function async #17235
- feat(app-vite): make SSR "serveStaticContent" function async #17235
- feat(app-vite): SSR -> remove ssrHandler() -> no longer needed, instead: directly use "app"
- feat(app-vite): SSR -> improve production script named exports (handler, listenResult, app)
- feat(app-vite): SSR -> greatly enhance server types (easier integration with some other webserver than the default express) #17235
SSR breaking change details
- /src-ssr/server.js > listen
- export const listen = ssrListen(async ({ app, port, isReady }) => {
+ // notice: no "isReady" param
+ // notice: ssrListen() param can still be async (below it isn't)
+ export const listen = ssrListen(({ app, devHttpsApp, port }) => {
- await isReady()
- return app.listen(port, () => {
+ const server = devHttpsApp || app
+ return server.listen(port, () => {
if (process.env.PROD) {
console.log('Server listening at port ' + port)
}
})
})- /src-ssr/server.js > serveStaticContent
- /**
- * Should return middleware that serves the indicated path
- * with static content.
- */
- export const serveStaticContent = ssrServeStaticContent((path, opts) => {
- return express.static(path, { maxAge, ...opts });
- });
+ /**
+ * 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: ssrServeStaticContent(async ({ app, resolve }) => {
+ * Can return an async function: return async ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
+ */
+ export const serveStaticContent = ssrServeStaticContent(({ app, resolve }) => {
+ return ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
+ const serveFn = express.static(resolve.public(pathToServe), { maxAge, ...opts });
+ app.use(resolve.urlPath(urlPath), serveFn);
+ };
+ });- For a serverless approach, this is how the "listen" part should look like:
export const listen = ssrListen(({ app, devHttpsApp, port }) => {
if (process.env.DEV) {
const server = devHttpsApp || app;
return server.listen(port, () => {
console.log('Server listening at port ' + port)
})
}
else { // in production
// return an object with a "handler" property
// that the server script will named-export
return { handler: app }
}
})- For TS devs, you should also make a small change to your /src-ssr/middlewares files, like this:
+ import { Request, Response } from 'express';
// ...
- app.get(resolve.urlPath('*'), (req, res) => {
+ app.get(resolve.urlPath('*'), (req: Request, res: Response) => {Donations
Quasar Framework is an open-source MIT-licensed project made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider the following: