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

PR-753737: Agregando SSR y React Router.

Browse Source
This commit is contained in:
Alejandro Lembke Barrientos
2022-04-17 22:54:45 +00:00
parent 712564e7ca
commit 7e018e2763
14 changed files with 443 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/server/index.js
View File

@@ -1,3 +1,5 @@
require('ignore-styles');
require('@babel/register')({
"presets": [
"@babel/preset-env",

48
src/server/server.js
View File

@@ -1,16 +1,26 @@
//Dependencies of Server
import express from 'express';
import { config } from '../config';
import webpack from 'webpack';
//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';
import { StaticRouter } from "react-router-dom/server";
import App from '../frontend/components/App';
const { env, port } = config
const app = express();
if(env === 'development'){
console.log('Development Config')
const webpackConfig = require('../webpack.config.dev');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const compiler = webpack(webpackConfig);
const serverConfig = {
serverSideRender: true,
@@ -25,9 +35,35 @@ if(env === 'development'){
}));
}
app.get('*', (req, res) => {
res.send({ hello: 'express'});
})
const setResponse = (html) => {
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>
<script src="assets/app.js" type="text/javascript"></script>
</body>
</html>
`)
}
const renderApp = (req, res) => {
const html = renderToString(
<StaticRouter location={req.url}>
<App />
</StaticRouter>
)
res.send(setResponse(html));
};
app.get('*', renderApp)
app.listen(port, (err) => {
if(err) console.error(err)