2022-04-17 16:54:45 -06:00
|
|
|
//Dependencies of Server
|
2022-04-15 09:28:11 -06:00
|
|
|
import express from 'express';
|
2022-04-25 09:12:43 -06:00
|
|
|
import { config } from '../../config';
|
2022-04-15 09:28:11 -06:00
|
|
|
import webpack from 'webpack';
|
2022-04-19 09:26:24 -06:00
|
|
|
import helmet from 'helmet';
|
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
|
|
|
|
|
import getHashManifest from './getHashManifest';
|
2022-04-17 21:59:56 -06:00
|
|
|
//App
|
2022-04-17 16:54:45 -06:00
|
|
|
import App from '../frontend/components/App';
|
|
|
|
|
|
2022-04-19 18:21:16 -06:00
|
|
|
const { env, port } = config;
|
2022-04-15 09:28:11 -06:00
|
|
|
|
2022-04-24 23:44:06 -06:00
|
|
|
const routesUrls = routes.map( route => route.path);
|
2022-04-22 09:00:14 -06:00
|
|
|
|
2022-04-15 09:28:11 -06:00
|
|
|
const app = express();
|
|
|
|
|
|
|
|
|
|
if(env === 'development'){
|
2022-04-19 18:21:16 -06:00
|
|
|
const compiler = webpack(webpackConfig);
|
|
|
|
|
const serverConfig = {
|
|
|
|
|
serverSideRender: true,
|
|
|
|
|
publicPath: webpackConfig.output.publicPath,
|
|
|
|
|
};
|
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-25 09:12:43 -06:00
|
|
|
const baseUrl = __dirname.replace(/\/client(.*)/,'');
|
|
|
|
|
const fullURL = `${baseUrl}/client/build` ;
|
2022-04-19 18:21:16 -06:00
|
|
|
app
|
|
|
|
|
.use((req, res, next) => {
|
|
|
|
|
if(!req.hashManifest) req.hashManifest = getHashManifest();
|
|
|
|
|
next();
|
|
|
|
|
})
|
2022-04-25 09:12:43 -06:00
|
|
|
.use(express.static(fullURL))
|
2022-04-19 18:21:16 -06:00
|
|
|
.use(helmet())
|
|
|
|
|
.use(helmet.permittedCrossDomainPolicies())
|
|
|
|
|
.use(helmet({
|
|
|
|
|
contentSecurityPolicy: {
|
|
|
|
|
directives: {
|
|
|
|
|
...helmet.contentSecurityPolicy.getDefaultDirectives(),
|
|
|
|
|
'script-src': ['\'self\'', '\'unsafe-inline\''],//"example.com"
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}))
|
|
|
|
|
.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-04-25 17:28:32 -06:00
|
|
|
const mainStyles = manifest ? manifest['frontend.css'] : 'assets/app.css';
|
|
|
|
|
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']}">` : '';
|
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-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) => {
|
|
|
|
|
if(routesUrls.includes(req.url)){
|
|
|
|
|
const store = setStore({ initialState });
|
|
|
|
|
const preloadedState = store.getState();
|
|
|
|
|
const html = renderToString(
|
|
|
|
|
<Provider store={store}>
|
|
|
|
|
<StaticRouter location={req.url}>
|
|
|
|
|
<App />
|
|
|
|
|
</StaticRouter>
|
|
|
|
|
</Provider>
|
|
|
|
|
);
|
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-04-15 09:28:11 -06:00
|
|
|
|
|
|
|
|
app.listen(port, (err) => {
|
2022-04-19 18:21:16 -06:00
|
|
|
if(err) console.error(err);
|
|
|
|
|
else console.log(`Server running on port ${port}`);
|
|
|
|
|
});
|
