2022-04-17 16:54:45 -06:00
|
|
|
//Dependencies of Server
|
2022-04-15 09:28:11 -06:00
|
|
|
import express from 'express';
|
|
|
|
|
import { config } from '../config';
|
|
|
|
|
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
|
|
|
|
|
import webpackConfig from '../webpack.config.dev';
|
|
|
|
|
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-17 16:54:45 -06:00
|
|
|
import { StaticRouter } from "react-router-dom/server";
|
2022-04-17 21:59:56 -06:00
|
|
|
//Redux
|
|
|
|
|
import { createStore } from 'redux'; //, applyMiddleware
|
|
|
|
|
import { Provider } from 'react-redux';
|
|
|
|
|
import reducer from '../frontend/reducers';
|
|
|
|
|
import initialState from '../frontend/reducers/initialState';
|
|
|
|
|
//App
|
2022-04-17 16:54:45 -06:00
|
|
|
import App from '../frontend/components/App';
|
|
|
|
|
|
2022-04-15 09:28:11 -06:00
|
|
|
const { env, port } = config
|
|
|
|
|
|
|
|
|
|
const app = express();
|
|
|
|
|
|
|
|
|
|
if(env === 'development'){
|
|
|
|
|
const compiler = webpack(webpackConfig);
|
|
|
|
|
const serverConfig = {
|
|
|
|
|
serverSideRender: true,
|
|
|
|
|
publicPath: webpackConfig.output.publicPath,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
app
|
|
|
|
|
.use(webpackDevMiddleware(compiler, serverConfig))
|
|
|
|
|
.use(webpackHotMiddleware(compiler, {
|
|
|
|
|
path: "/reload_wss",
|
|
|
|
|
heartbeat: 1000,
|
|
|
|
|
}));
|
2022-04-19 09:26:24 -06:00
|
|
|
}else{
|
|
|
|
|
app
|
|
|
|
|
.use(express.static(`${__dirname}/../build`))
|
|
|
|
|
.use(helmet())
|
|
|
|
|
.use(helmet.permittedCrossDomainPolicies())
|
|
|
|
|
.disable('x-powered-by');
|
2022-04-15 09:28:11 -06:00
|
|
|
}
|
|
|
|
|
|
2022-04-17 23:35:25 -06:00
|
|
|
const setResponse = (html, preloadedState) => {
|
2022-04-17 16:54:45 -06:00
|
|
|
return(`
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="es">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<link href="assets/app.css" rel="stylesheet" type="text/css"></link>
|
|
|
|
|
<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-17 16:54:45 -06:00
|
|
|
<script src="assets/app.js" type="text/javascript"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const renderApp = (req, res) => {
|
2022-04-17 21:59:56 -06:00
|
|
|
const store = createStore(reducer, initialState)
|
2022-04-17 23:35:25 -06:00
|
|
|
const preloadedState = store.getState();
|
2022-04-17 16:54:45 -06:00
|
|
|
const html = renderToString(
|
2022-04-17 21:59:56 -06:00
|
|
|
<Provider store={store}>
|
|
|
|
|
<StaticRouter location={req.url}>
|
|
|
|
|
<App />
|
|
|
|
|
</StaticRouter>
|
|
|
|
|
</Provider>
|
2022-04-17 16:54:45 -06:00
|
|
|
)
|
2022-04-17 23:35:25 -06:00
|
|
|
res.send(setResponse(html, preloadedState));
|
2022-04-17 16:54:45 -06:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
app.get('*', renderApp)
|
2022-04-15 09:28:11 -06:00
|
|
|
|
|
|
|
|
app.listen(port, (err) => {
|
|
|
|
|
if(err) console.error(err)
|
|
|
|
|
else console.log(`Server running on port ${port}`);
|
|
|
|
|
});
|
