aleleba/create-react-ssr
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-ssr.git synced 2025-01-09 21:46:56 -06:00
Code Issues Actions Packages Projects 1 Releases Wiki Activity

PR-536602: making more changing to fix css.

Browse Source
This commit is contained in:
Alejandro Lembke Barrientos 2022-08-16 20:48:02 +00:00
parent 5780bae041
commit 27e53ed20b
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/server/server.tsx
View File

@ -30,9 +30,9 @@ const routesUrls = routes.map( route => route.path);
const app = express(); const app = express();
// @ts-ignore:next-line
const compiler = webpack(webpackConfig);
if(env === 'development'){ if(env === 'development'){
// @ts-ignore:next-line
const compiler = webpack(webpackConfig);
const serverConfig = { const serverConfig = {
serverSideRender: true, serverSideRender: true,
publicPath: webpackConfig.output?.publicPath, publicPath: webpackConfig.output?.publicPath,
@ -72,6 +72,8 @@ const setResponse = (html, preloadedState, manifest) => {
const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js'; const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js';
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js'; const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : ''; const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : '';
const memoryFs = compiler.outputFileSystem
const haveVendor = haveVendorsCss(manifest, memoryFs)
return(` return(`
<!DOCTYPE html> <!DOCTYPE html>
@ -84,7 +86,7 @@ const setResponse = (html, preloadedState, manifest) => {
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
${manifestJson} ${manifestJson}
<link href="${mainStyles}" rel="stylesheet" type="text/css"></link> <link href="${mainStyles}" rel="stylesheet" type="text/css"></link>
${haveVendorsCss() ? `<link href="${vendorStyles}" rel="stylesheet" type="text/css"></link>` : ''} ${haveVendor ? `<link href="${vendorStyles}" rel="stylesheet" type="text/css"></link>` : ''}
<title>App</title> <title>App</title>
</head> </head>
<body> <body>

15
src/server/utilsServer.ts
View File

@ -1,20 +1,25 @@
import fs from 'fs'; import fs from 'fs';
import config from '../../config';
const { env } = config
export const getHashManifest = () => { export const getHashManifest = () => {
try { try {
const baseUrl = __dirname.replace(/\/server(.*)/,''); const baseUrl = __dirname.replace(/\/server(.*)/,'');
const fullURL = `${baseUrl}/assets/manifest-hash.json` ; const fullURL = `${baseUrl}/assets/manifest-hash.json`;
return JSON.parse(fs.readFileSync(fullURL).toString()); const readFileData = JSON.parse(fs.readFileSync(fullURL).toString());
return readFileData
}catch(err){ }catch(err){
console.error(err); console.error(err);
} }
}; };
export const haveVendorsCss = () => { export const haveVendorsCss = (manifest, memoryFs) => {
try { try {
const baseUrl = __dirname.replace(/\/server(.*)/,''); const baseUrl = __dirname.replace(/\/server(.*)/,'');
const fullURL = `${baseUrl}/assets/vendors.css` ; const fullURL = `${baseUrl}${manifest ? manifest['vendors.css'] : '/build/assets/vendors.css'}`;
fs.readFileSync(fullURL).toString(); env === 'production' && fs.readFileSync(fullURL).toString();
env === 'development' && memoryFs.readFileSync(fullURL).toString();
return true return true
}catch(err){ }catch(err){
// console.error(err); // console.error(err);

2
webpack.config.ts
View File

@ -198,7 +198,7 @@ const serverConfig = {
filename: '[path][base].gz', filename: '[path][base].gz',
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'assets/[name]/app-[fullhash].css', filename: 'assets/[name]-[fullhash].css',
}), }),
new WebpackManifestPlugin({ new WebpackManifestPlugin({
fileName: 'assets/manifest-hash.json', fileName: 'assets/manifest-hash.json',