2023-03-02 07:57:42 -06:00
|
|
|
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
2022-04-17 16:54:45 -06:00
|
|
|
//Dependencies of Server
|
2022-04-15 09:28:11 -06:00
|
|
|
import express from 'express';
|
|
|
|
|
import webpack from 'webpack';
|
2022-04-19 09:26:24 -06:00
|
|
|
import helmet from 'helmet';
|
2023-02-10 15:09:27 -06:00
|
|
|
import { config } from '@config';
|
2022-04-15 09:28:11 -06:00
|
|
|
|
2022-04-17 16:54:45 -06:00
|
|
|
//Dependencies of HotReloading
|
2022-04-25 09:12:43 -06:00
|
|
|
import webpackConfig from '../../webpack.config.dev';
|
2022-04-17 16:54:45 -06:00
|
|
|
import webpackDevMiddleware from 'webpack-dev-middleware';
|
|
|
|
|
import webpackHotMiddleware from 'webpack-hot-middleware';
|
|
|
|
|
|
|
|
|
|
//Dependencies of SSR
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { renderToString } from 'react-dom/server';
|
2022-04-17 21:59:56 -06:00
|
|
|
//Router
|
2022-04-19 18:21:16 -06:00
|
|
|
import { StaticRouter } from 'react-router-dom/server';
|
2022-04-22 09:00:14 -06:00
|
|
|
import routes from '../routes';
|
2022-04-17 21:59:56 -06:00
|
|
|
//Redux
|
|
|
|
|
import { Provider } from 'react-redux';
|
2022-04-28 12:15:07 -06:00
|
|
|
import setStore from '../frontend/setStore';
|
2022-04-17 21:59:56 -06:00
|
|
|
import initialState from '../frontend/reducers/initialState';
|
2022-04-19 17:09:35 -06:00
|
|
|
//Get Hashes
|
2022-08-10 15:42:46 -06:00
|
|
|
import { getHashManifest, haveVendorsCss } from './utilsServer';
|
2022-04-17 21:59:56 -06:00
|
|
|
//App
|
2022-04-17 16:54:45 -06:00
|
|
|
import App from '../frontend/components/App';
|
|
|
|
|
|
2023-02-10 15:09:27 -06:00
|
|
|
const { ENV, PORT, PREFIX_URL, ONLY_EXACT_PATH } = config;
|
2022-04-15 09:28:11 -06:00
|
|
|
|
2023-02-10 15:09:27 -06:00
|
|
|
const routesUrls = routes.map( route => route.path );
|
2022-04-22 09:00:14 -06:00
|
|
|
|
2023-03-02 07:57:42 -06:00
|
|
|
const isWin = process.platform === 'win32';
|
|
|
|
|
|
2022-04-15 09:28:11 -06:00
|
|
|
const app = express();
|
|
|
|
|
|
2022-08-16 14:48:02 -06:00
|
|
|
// @ts-ignore:next-line
|
|
|
|
|
const compiler = webpack(webpackConfig);
|
2022-08-30 11:00:36 -06:00
|
|
|
if(ENV === 'development'){
|
2022-04-19 18:21:16 -06:00
|
|
|
const serverConfig = {
|
|
|
|
|
serverSideRender: true,
|
2022-05-24 07:49:35 -06:00
|
|
|
publicPath: webpackConfig.output?.publicPath,
|
2022-04-19 18:21:16 -06:00
|
|
|
};
|
2022-04-15 09:28:11 -06:00
|
|
|
|
2022-04-19 18:21:16 -06:00
|
|
|
app
|
|
|
|
|
.use(webpackDevMiddleware(compiler, serverConfig))
|
|
|
|
|
.use(webpackHotMiddleware(compiler, {
|
|
|
|
|
path: '/reload_wss',
|
|
|
|
|
heartbeat: 1000,
|
|
|
|
|
}));
|
2022-04-19 09:26:24 -06:00
|
|
|
}else{
|
2022-04-28 15:37:20 -06:00
|
|
|
const baseUrl = __dirname.replace(/\/server(.*)/,'');
|
2023-03-02 07:57:42 -06:00
|
|
|
const baseUrlWin = __dirname.replace(/\\server(.*)/,'');
|
2022-04-28 15:37:20 -06:00
|
|
|
const fullURL = `${baseUrl}` ;
|
2023-03-02 07:57:42 -06:00
|
|
|
const fullURLWin = `${baseUrlWin}` ;
|
2022-04-19 18:21:16 -06:00
|
|
|
app
|
|
|
|
|
.use((req, res, next) => {
|
|
|
|
|
if(!req.hashManifest) req.hashManifest = getHashManifest();
|
|
|
|
|
next();
|
|
|
|
|
})
|
2023-03-02 07:57:42 -06:00
|
|
|
.use(express.static(isWin ? fullURLWin : fullURL))
|
2022-04-19 18:21:16 -06:00
|
|
|
.use(helmet())
|
|
|
|
|
.use(helmet.permittedCrossDomainPolicies())
|
|
|
|
|
.use(helmet({
|
|
|
|
|
contentSecurityPolicy: {
|
|
|
|
|
directives: {
|
|
|
|
|
...helmet.contentSecurityPolicy.getDefaultDirectives(),
|
2023-03-02 07:57:42 -06:00
|
|
|
'script-src': ['\'self\'', '\'unsafe-inline\''], //"example.com"
|
|
|
|
|
'connectSrc': ['\'self\'', '\'unsafe-inline\'', 'localhost:*']
|
2022-04-19 18:21:16 -06:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}))
|
|
|
|
|
.disable('x-powered-by');
|
2022-04-15 09:28:11 -06:00
|
|
|
}
|
|
|
|
|
|
2022-04-19 17:09:35 -06:00
|
|
|
const setResponse = (html, preloadedState, manifest) => {
|
2022-08-10 15:42:46 -06:00
|
|
|
const mainStyles = manifest ? manifest['frontend.css'] : 'assets/main.css';
|
|
|
|
|
const vendorStyles = manifest ? manifest['vendors.css'] : 'assets/vendors.css';
|
2022-04-25 17:28:32 -06:00
|
|
|
const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js';
|
2022-04-19 18:21:16 -06:00
|
|
|
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
|
2022-04-25 17:28:32 -06:00
|
|
|
const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : '';
|
2023-03-02 07:57:42 -06:00
|
|
|
const memoryFs = compiler.outputFileSystem;
|
|
|
|
|
const haveVendor = haveVendorsCss(manifest, memoryFs);
|
2022-04-19 17:09:35 -06:00
|
|
|
|
2022-04-19 18:21:16 -06:00
|
|
|
return(`
|
2022-04-17 16:54:45 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="es">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2022-04-26 20:12:45 -06:00
|
|
|
<link rel="shortcut icon" href="favicon.ico">
|
2022-04-17 16:54:45 -06:00
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2022-04-24 23:44:06 -06:00
|
|
|
<meta name="theme-color" content="#000000">
|
2022-04-25 17:28:32 -06:00
|
|
|
${manifestJson}
|
2022-04-19 17:09:35 -06:00
|
|
|
<link href="${mainStyles}" rel="stylesheet" type="text/css"></link>
|
2022-08-16 14:48:02 -06:00
|
|
|
${haveVendor ? `<link href="${vendorStyles}" rel="stylesheet" type="text/css"></link>` : ''}
|
2022-04-17 16:54:45 -06:00
|
|
|
<title>App</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">${html}</div>
|
2022-04-17 23:35:25 -06:00
|
|
|
<script>
|
|
|
|
|
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
|
|
|
|
|
</script>
|
2022-04-19 17:09:35 -06:00
|
|
|
<script src="${mainBuild}" type="text/javascript"></script>
|
|
|
|
|
<script src="${vendorBuild}" type="text/javascript"></script>
|
2022-04-17 16:54:45 -06:00
|
|
|
</body>
|
|
|
|
|
</html>
|
2022-04-19 18:21:16 -06:00
|
|
|
`);
|
|
|
|
|
};
|
2022-04-17 16:54:45 -06:00
|
|
|
|
2022-04-22 09:00:14 -06:00
|
|
|
const renderApp = (req, res, next) => {
|
2023-02-10 15:09:27 -06:00
|
|
|
const store = setStore({ initialState });
|
|
|
|
|
const preloadedState = store.getState();
|
|
|
|
|
const html = renderToString(
|
|
|
|
|
// @ts-ignore:next-line
|
|
|
|
|
<Provider store={store}>
|
|
|
|
|
<StaticRouter location={`${PREFIX_URL}${req.url}`} basename={PREFIX_URL}>
|
|
|
|
|
<App />
|
|
|
|
|
</StaticRouter>
|
|
|
|
|
</Provider>
|
|
|
|
|
);
|
|
|
|
|
if(ONLY_EXACT_PATH){
|
|
|
|
|
if(routesUrls.includes(req.url)){
|
|
|
|
|
res.send(setResponse(html, preloadedState, req.hashManifest));
|
|
|
|
|
}
|
|
|
|
|
} else {
|
2022-04-24 23:44:06 -06:00
|
|
|
res.send(setResponse(html, preloadedState, req.hashManifest));
|
2022-04-22 09:00:14 -06:00
|
|
|
}
|
2022-04-24 23:44:06 -06:00
|
|
|
next();
|
2022-04-17 16:54:45 -06:00
|
|
|
};
|
|
|
|
|
|
2022-04-22 09:00:14 -06:00
|
|
|
app
|
|
|
|
|
.get('*', renderApp);
|
|
|
|
|
|
2022-08-30 11:00:36 -06:00
|
|
|
app.listen(PORT, () => {
|
|
|
|
|
console.log(`Server running on port ${PORT}`);
|
2022-04-19 18:21:16 -06:00
|
|
|
});
|
