From dd990d303050996adfce2072ae1c881fddcc2cd9 Mon Sep 17 00:00:00 2001 From: Devmax Date: Tue, 14 Nov 2023 08:45:36 -0800 Subject: [PATCH] Add antui, chakra in build config --- build.config.js | 3 +- servers/backend-server/build.config.js | 1 + servers/frontend-server/build.config.js | 3 + servers/frontend-server/src/app/Main.tsx | 5 +- .../frontend-server/src/app/MainChakra.tsx | 90 ++++----- .../src/backend/middlewares/website.ts | 37 ++++ servers/frontend-server/src/backend/server.ts | 2 +- .../src/backend/website-antui.tsx | 168 ++++++++-------- .../src/backend/website-chakra-antui.tsx | 178 ++++++++--------- .../src/backend/website-chakra.tsx | 179 ++++++++---------- servers/frontend-server/src/index.tsx | 4 - 11 files changed, 322 insertions(+), 348 deletions(-) create mode 100644 servers/frontend-server/src/backend/middlewares/website.ts mode change 100755 => 100644 servers/frontend-server/src/backend/website-antui.tsx diff --git a/build.config.js b/build.config.js index 9f5aebf96..b88f5f0cf 100644 --- a/build.config.js +++ b/build.config.js @@ -27,7 +27,8 @@ const config = { process.env.WEBSITE_URL || `${__SERVER_PROTOCOL__}://${__SERVER_HOST__}:${__WEB_DEV_SERVER_PORT__}`, __BACKEND_URL__: process.env.LOCAL_BACKEND_URL || `${__SERVER_PROTOCOL__}://${__SERVER_HOST__}:${__WEB_SERVER_PORT__}`, + __CHAKRA__: false, + __ANTUI__: false, }; -console.log('---CONFIG', config); module.exports = config; diff --git a/servers/backend-server/build.config.js b/servers/backend-server/build.config.js index d710157ac..54cc5d83c 100644 --- a/servers/backend-server/build.config.js +++ b/servers/backend-server/build.config.js @@ -11,4 +11,5 @@ const config = { __FRONTEND_BUILD_DIR__: process.env.FRONTEND_BUILD_DIR || '../frontend-server/dist/web', }; +console.log('---CONFIG', config); module.exports = config; diff --git a/servers/frontend-server/build.config.js b/servers/frontend-server/build.config.js index 6f5c9ee57..8bcd78bc3 100644 --- a/servers/frontend-server/build.config.js +++ b/servers/frontend-server/build.config.js @@ -8,6 +8,9 @@ const config = { __GRAPHQL_URL__: process.env.GRAPHQL_URL || '/graphql', __API_URL__: process.env.API_URL || '/graphql', __FRONTEND_BUILD_DIR__: process.env.FRONTEND_BUILD_DIR || './dist/web', + __CHAKRA__: process.env.CHAKRA === 'true' || false, + __ANTUI__: process.env.ANTUI === 'true' || false, }; +console.log('---CONFIG', config); module.exports = config; diff --git a/servers/frontend-server/src/app/Main.tsx b/servers/frontend-server/src/app/Main.tsx index b006622cc..6a7543217 100755 --- a/servers/frontend-server/src/app/Main.tsx +++ b/servers/frontend-server/src/app/Main.tsx @@ -7,7 +7,6 @@ import { PersistGate } from 'redux-persist/integration/react'; import { persistStore } from 'redux-persist'; import { createBrowserHistory } from 'history'; import { HelmetProvider } from 'react-helmet-async'; - import { createReduxStore } from '../config/redux-config'; import { createClientContainer } from '../config/client.service'; import modules, { MainRoute } from '../modules'; @@ -30,8 +29,8 @@ export class Main extends React.Component<{}, {}> { - , - )} + + )} diff --git a/servers/frontend-server/src/app/MainChakra.tsx b/servers/frontend-server/src/app/MainChakra.tsx index 827f7f6d8..ceaca4d19 100644 --- a/servers/frontend-server/src/app/MainChakra.tsx +++ b/servers/frontend-server/src/app/MainChakra.tsx @@ -8,62 +8,62 @@ import { persistStore } from 'redux-persist'; import { createBrowserHistory } from 'history'; import { HelmetProvider } from 'react-helmet-async'; import { CacheProvider } from '@emotion/react'; - import createEmotionCache from '../common/createEmotionCache'; import { createReduxStore } from '../config/redux-config'; import { createClientContainer } from '../config/client.service'; import modules, { MainRoute } from '../modules'; const { apolloClient: client } = createClientContainer(); - const history = createBrowserHistory(); const { store } = createReduxStore(history); -const cache = createEmotionCache(); -export class Main extends React.Component<{}, {}> { - public render() { - if (__SSR__) { - let persistor = persistStore(store); - return ( - - - - - {() => ( - - {modules.getWrappedRoot( - - - , - )} - - )} - - - - +const WithChakra = () => { + if (__CHAKRA__) { + const cache = createEmotionCache(); + return ( + + {modules.getWrappedRoot( + + + , + )} + + ); + } else { + return + modules.getWrappedRoot( + + + , ); - } else { - let persistor = persistStore(store); - return ( - - - - - - {modules.getWrappedRoot( - - - , - )} - - - - - - ); - } } } +const WithPersistGate = () => { + let persistor = persistStore(store); + if (__SSR__) { + return ( + + {() => } + + ); + } else { + return ( + + + + ); + } +} + +const Main = () => ( + + + + + + + +); + export default Main; diff --git a/servers/frontend-server/src/backend/middlewares/website.ts b/servers/frontend-server/src/backend/middlewares/website.ts new file mode 100644 index 000000000..ef5a77d3b --- /dev/null +++ b/servers/frontend-server/src/backend/middlewares/website.ts @@ -0,0 +1,37 @@ +import path from 'path'; +import { logger } from '@cdm-logger/server'; + +const getServerSideRenderer = async () => { + let renderer; + if (__CHAKRA__) { + if (__ANTUI__) { + renderer = await import('../website-chakra-antui'); + } else { + renderer = await import('../website-chakra'); + } + } else { + renderer = await import('../website-antui'); + } + + return renderer.default; +} + +export const websiteMiddleware = async (req, res, next) => { + try { + if (req.path.indexOf('.') < 0 && __SSR__) { + const renderServerSide = await getServerSideRenderer(); + if (renderServerSide) { + return await renderServerSide(req, res); + } + next(); + } else if (req.path.indexOf('.') < 0 && !__SSR__ && req.method === 'GET' && !__DEV__) { + logger.debug('FRONEND_BUILD_DIR with index.html'); + res.sendFile(path.resolve(__FRONTEND_BUILD_DIR__, 'index.html')); + } else { + next(); + } + } catch (e) { + logger.error('RENDERING ERROR:', e); + return next(e); + } +}; diff --git a/servers/frontend-server/src/backend/server.ts b/servers/frontend-server/src/backend/server.ts index 3ebbac2cc..28c21fc6b 100755 --- a/servers/frontend-server/src/backend/server.ts +++ b/servers/frontend-server/src/backend/server.ts @@ -8,7 +8,7 @@ import * as path from 'path'; import * as url from 'url'; import 'isomorphic-fetch'; import { logger } from '@cdm-logger/server'; -import { websiteMiddleware } from './website-chakra-antui'; +import { websiteMiddleware } from './middlewares/website'; import { corsMiddleware } from './middlewares/cors'; import { errorMiddleware } from './middlewares/error'; import { config } from '../config'; diff --git a/servers/frontend-server/src/backend/website-antui.tsx b/servers/frontend-server/src/backend/website-antui.tsx old mode 100755 new mode 100644 index 6511b44af..fd5d7cd69 --- a/servers/frontend-server/src/backend/website-antui.tsx +++ b/servers/frontend-server/src/backend/website-antui.tsx @@ -20,104 +20,86 @@ import clientModules, { MainRoute } from '../modules'; let assetMap; const antdCache = createAntdCache(); -async function renderServerSide(req, res) { - try { - const { apolloClient: client } = createClientContainer(); +export default async function renderServerSide(req, res) { + try { + const { apolloClient: client } = createClientContainer(); - let context: { pageNotFound?: boolean; url?: string } = { pageNotFound: false }; - const history = createMemoryHistory({ initialEntries: [req.url] }); - const { store } = createReduxStore(history); + let context: { pageNotFound?: boolean; url?: string } = { pageNotFound: false }; + const history = createMemoryHistory({ initialEntries: [req.url] }); + const { store } = createReduxStore(history); - const extractor = new ChunkExtractor({ - statsFile: path.resolve(__FRONTEND_BUILD_DIR__, 'loadable-stats.json'), - entrypoints: ['index'], - publicPath: !__DEV__ && __CDN_URL__ ? __CDN_URL__ : '/', - }); + const extractor = new ChunkExtractor({ + statsFile: path.resolve(__FRONTEND_BUILD_DIR__, 'loadable-stats.json'), + entrypoints: ['index'], + publicPath: !__DEV__ && __CDN_URL__ ? __CDN_URL__ : '/', + }); - const helmetContext = {} as FilledContext; - const Root = ( - - - - - - {clientModules.getWrappedRoot( - - - , - )} - - - - - - ); + const helmetContext = {} as FilledContext; + const Root = ( + + + + + + {clientModules.getWrappedRoot( + + + , + )} + + + + + + ); - try { - await getDataFromTree(Root); - } catch (e: any) { - console.log('Apollo Error! Rendering result anyways'); - console.log(e); - } - const content = ReactDOMServer.renderToString(Root); + try { + await getDataFromTree(Root); + } catch (e: any) { + console.log('Apollo Error! Rendering result anyways'); + console.log(e); + } - if (context.pageNotFound === true) { - res.status(404); - } + const content = ReactDOMServer.renderToString(Root); + if (context.pageNotFound === true) { + res.status(404); + } - - if (context.url) { - res.writeHead(301, { Location: context.url }); - res.end(); - } else { - if (__DEV__ || !assetMap) { - assetMap = JSON.parse(fs.readFileSync(path.join(__FRONTEND_BUILD_DIR__, 'assets.json')).toString()); - } - // data - const apolloState = Object.assign({}, client.extract()); - const reduxState = Object.assign({}, store.getState()); - const env = { - ...publicEnv, - }; - // styles - let styleSheet = extractStyle(antdCache); - // html page - const page = ( - - ); - let pageContent = ReactDOMServer.renderToStaticMarkup(page); - pageContent = pageContent.replace(/__STYLESHEET__/, styleSheet); - res.status(200); - res.send(`\n${pageContent}`); - res.end(); - } - } catch (err) { - logger.error('SERVER SIDE RENDER failed due to (%j) ', err.message); - logger.debug(err); + if (context.url) { + res.writeHead(301, { Location: context.url }); + res.end(); + } else { + if (__DEV__ || !assetMap) { + assetMap = JSON.parse(fs.readFileSync(path.join(__FRONTEND_BUILD_DIR__, 'assets.json')).toString()); + } + // data + const apolloState = { ...client.extract() }; + const reduxState = { ...store.getState() }; + const env = { ...publicEnv }; + // styles + const styleSheet = extractStyle(antdCache); + // Html Page + const page = ( + + ); + let pageContent = ReactDOMServer.renderToStaticMarkup(page); + pageContent = pageContent.replace(/__STYLESHEET__/, styleSheet); + res.status(200); + res.send(`\n${pageContent}`); + res.end(); } + } catch (err) { + logger.error('SERVER SIDE RENDER failed due to (%j) ', err.message); + logger.debug(err); + } } -export const websiteMiddleware = async (req, res, next) => { - try { - if (req.path.indexOf('.') < 0 && __SSR__) { - return await renderServerSide(req, res); - } else if (req.path.indexOf('.') < 0 && !__SSR__ && req.method === 'GET' && !__DEV__) { - logger.debug('FRONEND_BUILD_DIR with index.html'); - res.sendFile(path.resolve(__FRONTEND_BUILD_DIR__, 'index.html')); - } else { - next(); - } - } catch (e) { - logger.error('RENDERING ERROR:', e); - return next(e); - } -}; diff --git a/servers/frontend-server/src/backend/website-chakra-antui.tsx b/servers/frontend-server/src/backend/website-chakra-antui.tsx index db461d48c..df9fe98e7 100644 --- a/servers/frontend-server/src/backend/website-chakra-antui.tsx +++ b/servers/frontend-server/src/backend/website-chakra-antui.tsx @@ -26,109 +26,91 @@ const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionS const antdCache = createAntdCache(); -async function renderServerSide(req, res) { - try { - const { apolloClient: client } = createClientContainer(); - - let context: { pageNotFound?: boolean; url?: string } = { pageNotFound: false }; - const history = createMemoryHistory({ initialEntries: [req.url] }); - const { store } = createReduxStore(history); +export default async function renderServerSide(req, res) { + try { + const { apolloClient: client } = createClientContainer(); - const extractor = new ChunkExtractor({ - statsFile: path.resolve(__FRONTEND_BUILD_DIR__, 'loadable-stats.json'), - entrypoints: ['index'], - publicPath: !__DEV__ && __CDN_URL__ ? __CDN_URL__ : '/', - }); + let context: { pageNotFound?: boolean; url?: string } = { pageNotFound: false }; + const history = createMemoryHistory({ initialEntries: [req.url] }); + const { store } = createReduxStore(history); - const helmetContext = {} as FilledContext; - const Root = ( - - - - - - - {clientModules.getWrappedRoot( - - - , - )} - - - - - - - ); + const extractor = new ChunkExtractor({ + statsFile: path.resolve(__FRONTEND_BUILD_DIR__, 'loadable-stats.json'), + entrypoints: ['index'], + publicPath: !__DEV__ && __CDN_URL__ ? __CDN_URL__ : '/', + }); - try { - await getDataFromTree(Root); - } catch (e: any) { - console.log('Apollo Error! Rendering result anyways'); - console.log(e); - } - const content = ReactDOMServer.renderToString(Root); - if (context.pageNotFound === true) { - res.status(404); - } + const helmetContext = {} as FilledContext; + const Root = ( + + + + + + + {clientModules.getWrappedRoot( + + + , + )} + + + + + + + ); + try { + await getDataFromTree(Root); + } catch (e: any) { + console.log('Apollo Error! Rendering result anyways'); + console.log(e); + } + const content = ReactDOMServer.renderToString(Root); + if (context.pageNotFound === true) { + res.status(404); + } - if (context.url) { - res.writeHead(301, { Location: context.url }); - res.end(); - } else { - if (__DEV__ || !assetMap) { - assetMap = JSON.parse(fs.readFileSync(path.join(__FRONTEND_BUILD_DIR__, 'assets.json')).toString()); - } - // data - const apolloState = Object.assign({}, client.extract()); - const reduxState = Object.assign({}, store.getState()); - const env = { - ...publicEnv, - }; - // styles - let styleSheet = extractStyle(antdCache); - const emotionStyles = extractCriticalToChunks(content); - const styles = constructStyleTagsFromChunks(emotionStyles); - styleSheet = styleSheet + styles; - // Html Page - const page = ( - - ); - let pageContent = ReactDOMServer.renderToStaticMarkup(page); - pageContent = pageContent.replace(/__STYLESHEET__/, styleSheet); - res.status(200); - res.send(`\n${pageContent}`); - res.end(); - } - } catch (err) { - logger.error('SERVER SIDE RENDER failed due to (%j) ', err.message); - logger.debug(err); + if (context.url) { + res.writeHead(301, { Location: context.url }); + res.end(); + } else { + if (__DEV__ || !assetMap) { + assetMap = JSON.parse(fs.readFileSync(path.join(__FRONTEND_BUILD_DIR__, 'assets.json')).toString()); + } + // data + const apolloState = { ...client.extract() }; + const reduxState = { ...store.getState() }; + const env = { ...publicEnv }; + // styles + let styleSheet = extractStyle(antdCache); + const emotionStyles = extractCriticalToChunks(content); + const styles = constructStyleTagsFromChunks(emotionStyles); + styleSheet = styleSheet + styles; + // Html Page + const page = ( + + ); + let pageContent = ReactDOMServer.renderToStaticMarkup(page); + pageContent = pageContent.replace(/__STYLESHEET__/, styleSheet); + res.status(200); + res.send(`\n${pageContent}`); + res.end(); } + } catch (err) { + logger.error('SERVER SIDE RENDER failed due to (%j) ', err.message); + logger.debug(err); + } } -export const websiteMiddleware = async (req, res, next) => { - try { - if (req.path.indexOf('.') < 0 && __SSR__) { - return await renderServerSide(req, res); - } else if (req.path.indexOf('.') < 0 && !__SSR__ && req.method === 'GET' && !__DEV__) { - logger.debug('FRONEND_BUILD_DIR with index.html'); - res.sendFile(path.resolve(__FRONTEND_BUILD_DIR__, 'index.html')); - } else { - next(); - } - } catch (e) { - logger.error('RENDERING ERROR:', e); - return next(e); - } -}; diff --git a/servers/frontend-server/src/backend/website-chakra.tsx b/servers/frontend-server/src/backend/website-chakra.tsx index ff765b7ed..14644c179 100644 --- a/servers/frontend-server/src/backend/website-chakra.tsx +++ b/servers/frontend-server/src/backend/website-chakra.tsx @@ -23,114 +23,87 @@ let assetMap; const cache = createEmotionCache(); const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache); -async function renderServerSide(req, res) { - try { - const { apolloClient: client } = createClientContainer(); +export default async function renderServerSide(req, res) { + try { + const { apolloClient: client } = createClientContainer(); - let context: { pageNotFound?: boolean; url?: string } = { pageNotFound: false }; - const history = createMemoryHistory({ initialEntries: [req.url] }); - const { store } = createReduxStore(history); + let context: { pageNotFound?: boolean; url?: string } = { pageNotFound: false }; + const history = createMemoryHistory({ initialEntries: [req.url] }); + const { store } = createReduxStore(history); - const extractor = new ChunkExtractor({ - statsFile: path.resolve(__FRONTEND_BUILD_DIR__, 'loadable-stats.json'), - entrypoints: ['index'], - publicPath: !__DEV__ && __CDN_URL__ ? __CDN_URL__ : '/', - }); + const extractor = new ChunkExtractor({ + statsFile: path.resolve(__FRONTEND_BUILD_DIR__, 'loadable-stats.json'), + entrypoints: ['index'], + publicPath: !__DEV__ && __CDN_URL__ ? __CDN_URL__ : '/', + }); - const helmetContext = {} as FilledContext; - const Root = ( - - - - - - {clientModules.getWrappedRoot( - - - , - )} - - - - - - ); + const helmetContext = {} as FilledContext; + const Root = ( + + + + + + {clientModules.getWrappedRoot( + + + , + )} + + + + + + ); - try { - await getDataFromTree(Root); - } catch (e: any) { - console.log('Apollo Error! Rendering result anyways'); - // if (e instanceof ApolloError) { - // const notFound = e.graphQLErrors.some((ge) => (ge.extensions as any)?.code === 'NOT_FOUND'); - // if (notFound) - // store.dispatch( - // setError({ - // errorType: ErrorEnum.NOT_FOUND, - // }), - // ); - // } - console.log(e); - } - const content = ReactDOMServer.renderToString(Root); - console.log('---CONTENT', content.length); - if (context.pageNotFound === true) { - res.status(404); - } + try { + await getDataFromTree(Root); + } catch (e: any) { + console.log('Apollo Error! Rendering result anyways'); + console.log(e); + } - if (context.url) { - res.writeHead(301, { Location: context.url }); - res.end(); - } else { - if (__DEV__ || !assetMap) { - assetMap = JSON.parse(fs.readFileSync(path.join(__FRONTEND_BUILD_DIR__, 'assets.json')).toString()); - } - // data - const apolloState = Object.assign({}, client.extract()); - const reduxState = Object.assign({}, store.getState()); - const env = { - ...publicEnv, - }; - // styles - const emotionStyles = extractCriticalToChunks(content); - const styleSheet = constructStyleTagsFromChunks(emotionStyles); - // html page - const page = ( - - ); + const content = ReactDOMServer.renderToString(Root); + if (context.pageNotFound === true) { + res.status(404); + } - let pageContent = ReactDOMServer.renderToStaticMarkup(page); - pageContent = pageContent.replace(/__STYLESHEET__/, styleSheet); - res.status(200); - res.send(`\n${pageContent}`); - res.end(); - } - } catch (err) { - logger.error('SERVER SIDE RENDER failed due to (%j) ', err.message); - logger.debug(err); + if (context.url) { + res.writeHead(301, { Location: context.url }); + res.end(); + } else { + if (__DEV__ || !assetMap) { + assetMap = JSON.parse(fs.readFileSync(path.join(__FRONTEND_BUILD_DIR__, 'assets.json')).toString()); + } + // data + const apolloState = { ...client.extract() }; + const reduxState = { ...store.getState() }; + const env = { ...publicEnv }; + // styles + const emotionStyles = extractCriticalToChunks(content); + const styleSheet = constructStyleTagsFromChunks(emotionStyles); + // Html Page + const page = ( + + ); + let pageContent = ReactDOMServer.renderToStaticMarkup(page); + pageContent = pageContent.replace(/__STYLESHEET__/, styleSheet); + res.status(200); + res.send(`\n${pageContent}`); + res.end(); } + } catch (err) { + logger.error('SERVER SIDE RENDER failed due to (%j) ', err.message); + logger.debug(err); + } } -export const websiteMiddleware = async (req, res, next) => { - try { - if (req.path.indexOf('.') < 0 && __SSR__) { - return await renderServerSide(req, res); - } else if (req.path.indexOf('.') < 0 && !__SSR__ && req.method === 'GET' && !__DEV__) { - logger.debug('FRONEND_BUILD_DIR with index.html'); - res.sendFile(path.resolve(__FRONTEND_BUILD_DIR__, 'index.html')); - } else { - next(); - } - } catch (e) { - logger.error('RENDERING ERROR:', e); - return next(e); - } -}; diff --git a/servers/frontend-server/src/index.tsx b/servers/frontend-server/src/index.tsx index b59f36b71..74611e9bb 100755 --- a/servers/frontend-server/src/index.tsx +++ b/servers/frontend-server/src/index.tsx @@ -5,11 +5,7 @@ import 'reflect-metadata'; import * as React from 'react'; import { hydrateRoot, createRoot } from 'react-dom/client'; import { loadableReady } from '@loadable/component'; - import './config/public-config'; - -// add any css files - import Main from './app/MainChakra'; // Virtual (module as any), generated in-memory by zenjs, contains count of backend rebuilds