PR-753737: Se empieza a configurar el server side render y el servidor de express.

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "create-react-ssr",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

package.json

@@ -0,0 +1 @@
+{}

src/.env.example

@@ -1,3 +1,7 @@
+#Environment
+ENV= #Default production
+#App Port
+PORT= #Default 80
 #Port of React App
-PORT_DEV= #Default Port 3000
-PORT_RELOAD_DEV= #Default Port PORT_DEV
+#PORT_DEV= #Default Port 3000
+#PORT_RELOAD_DEV= #Default Port PORT_DEV

src/config/index.js

@@ -1,8 +1,10 @@
 require('dotenv').config();
 
 const config = {
-    portDev: process.env.PORT_DEV ? process.env.PORT_DEV : 3000,
-    portReloadDev: process.env.PORT_RELOAD_DEV,
+    env: process.env.ENV ? process.env.ENV : 'production',
+    port: process.env.PORT ? process.env.PORT : 80,
+    // portDev: process.env.PORT_DEV ? process.env.PORT_DEV : 3000,
+    // portReloadDev: process.env.PORT_RELOAD_DEV,
 }
 
 module.exports = { config: config };

src/frontend/index.js

@@ -3,4 +3,8 @@ import ReactDom from 'react-dom';
 import App from './components/App';
 import './styles/global.sass';
 
-ReactDom.render(<App />, document.getElementById('app'));
+ReactDom.render(<App />, document.getElementById('app'));
+
+if (module.hot) {
+    module.hot.accept();
+}

src/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack serve --config webpack.config.dev.js",
+    "start:dev": "nodemon server/index",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --config webpack.config.js"
   },
@@ -23,9 +24,12 @@
   },
   "homepage": "https://github.com/aleleba/create-react-ssr#readme",
   "dependencies": {
+    "@babel/register": "^7.17.7",
     "dotenv": "^16.0.0",
+    "express": "^4.17.3",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "webpack": "^5.72.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
@@ -38,12 +42,14 @@
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.0",
+    "nodemon": "^2.0.15",
     "sass": "^1.50.0",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.1",
-    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1"
+    "webpack-dev-middleware": "^5.3.1",
+    "webpack-dev-server": "^4.8.1",
+    "webpack-hot-middleware": "^2.25.1"
   }
 }

src/server/index.js

@@ -0,0 +1,8 @@
+require('@babel/register')({
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ]
+});
+
+require('./server');

src/server/server.js

@@ -0,0 +1,35 @@
+import express from 'express';
+import { config } from '../config';
+import webpack from 'webpack';
+
+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,
+        publicPath: webpackConfig.output.publicPath,
+    };
+
+    app
+    .use(webpackDevMiddleware(compiler, serverConfig))
+    .use(webpackHotMiddleware(compiler, {
+        path: "/reload_wss",
+        heartbeat: 1000,
+    }));
+}
+
+app.get('*', (req, res) => {
+    res.send({ hello: 'express'});
+})
+
+app.listen(port, (err) => {
+    if(err) console.error(err)
+    else console.log(`Server running on port ${port}`);
+});

src/webpack.config.dev.js

@@ -1,11 +1,12 @@
 const path = require('path');
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { config: { portDev, portReloadDev } } = require('./config')
+// const { config: { portDev, portReloadDev } } = require('./config');
 
 
 module.exports = {
-    entry: './frontend/index.js',
+    entry: ['webpack-hot-middleware/client?path=/reload_wss&timeout=2000&overlay=false&reload=true', './frontend/index.js'],
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'bundle.js',
@@ -40,6 +41,7 @@ module.exports = {
         ]
     },
     plugins: [
+        new webpack.HotModuleReplacementPlugin(),
         new HtmlWebpackPlugin({
             template: './public/index.html',
             filename: './index.html',
@@ -48,7 +50,7 @@ module.exports = {
             filename: '[name].css',
         }),
     ],
-    devServer: {
+    /* devServer: {
         static: {
             directory: path.join(__dirname, 'build')
         },
@@ -62,5 +64,5 @@ module.exports = {
                 port: portReloadDev ? portReloadDev : portDev,
             }
         },
-    },
+    }, */
 }