aleleba/create-react-ssr
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-ssr.git synced 2025-07-12 15:48:31 -06:00
Code Issues Actions Packages Projects 1 Releases Wiki Activity

PR-753737: Cambiando la carpeta src a client y moviendo todo a una carpeta dentro de client llamada src.

Browse Source
This commit is contained in:
Alejandro Lembke Barrientos
2022-04-25 15:12:43 +00:00
parent e12e752a55
commit ed62a71551
30 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/server/getHashManifest.js
View File

@ -1,11 +0,0 @@
import fs from 'fs';
const getHashManifest = () => {
try {
return JSON.parse(fs.readFileSync(`${__dirname}/../build/assets/manifest-hash.json`));
}catch(err){
console.error(err);
}
};
export default getHashManifest;

36
src/server/index.js
View File

@ -1,36 +0,0 @@
require('dotenv').config();
require('ignore-styles');
//require('webpack-node-externals')();
require('@babel/register')({
'presets': [
'@babel/preset-env',
'@babel/preset-react',
"@babel/preset-typescript",
// '@babel/preset-flow',
]
});
require('asset-require-hook')({
extensions: [
// images
'jpg',
'png',
'svg',
'gif',
// videos
'mp4',
'avi',
// typography
'ttf',
'otf',
'eot',
// files
'pdf'
],
name: '/assets/[hash].[ext]',
});
require('./server');

119
src/server/server.js
View File

@ -1,119 +0,0 @@
//Dependencies of Server
import express from 'express';
import { config } from '../config';
import webpack from 'webpack';
import helmet from 'helmet';
//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';
//Router
import { StaticRouter } from 'react-router-dom/server';
import routes from '../routes';
//Redux
import { Provider } from 'react-redux';
import setStore from '../frontend/setStore.js';
import initialState from '../frontend/reducers/initialState';
//Get Hashes
import getHashManifest from './getHashManifest';
//App
import App from '../frontend/components/App';
const { env, port } = config;
const routesUrls = routes.map( route => route.path);
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,
}));
}else{
app
.use((req, res, next) => {
if(!req.hashManifest) req.hashManifest = getHashManifest();
next();
})
.use(express.static(`${__dirname}/../build`))
.use(helmet())
.use(helmet.permittedCrossDomainPolicies())
.use(helmet({
contentSecurityPolicy: {
directives: {
...helmet.contentSecurityPolicy.getDefaultDirectives(),
'script-src': ['\'self\'', '\'unsafe-inline\''],//"example.com"
},
},
}))
.disable('x-powered-by');
}
const setResponse = (html, preloadedState, manifest) => {
const mainStyles = manifest ? manifest['main.css'] : 'assets/app.css';
const mainBuild = manifest ? manifest['main.js'] : 'assets/app.js';
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
return(`
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<!-- <link rel="shortcut icon" href="favicon.ico"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="manifest.json">
<link href="${mainStyles}" rel="stylesheet" type="text/css"></link>
<title>App</title>
</head>
<body>
<div id="app">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
<script src="${mainBuild}" type="text/javascript"></script>
<script src="${vendorBuild}" type="text/javascript"></script>
</body>
</html>
`);
};
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>
);
res.send(setResponse(html, preloadedState, req.hashManifest));
}
next();
};
app
.get('*', renderApp);
app.listen(port, (err) => {
if(err) console.error(err);
else console.log(`Server running on port ${port}`);
});