aleleba/create-react-ssr
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-ssr.git synced 2025-01-09 05:26:58 -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();
// @ts-ignore:next-line
const compiler = webpack(webpackConfig);
if(env === 'development'){
// @ts-ignore:next-line
const compiler = webpack(webpackConfig);
const serverConfig = {
serverSideRender: true,
publicPath: webpackConfig.output?.publicPath,
@ -72,6 +72,8 @@ const setResponse = (html, preloadedState, manifest) => {
const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js';
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : '';
const memoryFs = compiler.outputFileSystem
const haveVendor = haveVendorsCss(manifest, memoryFs)
return(`
<!DOCTYPE html>
@ -84,7 +86,7 @@ const setResponse = (html, preloadedState, manifest) => {
<meta name="theme-color" content="#000000">
${manifestJson}
<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>
</head>
<body>

15
src/server/utilsServer.ts
View File

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

2
webpack.config.ts
View File

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