updates render middlewares and scripts

Author: alexlobera

config/paths.js

@@ -6,5 +6,6 @@ const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
 module.exports = {
   serverBuild: resolveApp("build-server"),
-  serverIndexJs: resolveApp("src/server.js")
+  serverIndexJs: resolveApp("src/server.js"),
+  customScriptConfig: resolveApp(".react-scripts-ssr.json")
 };

scripts/proxy.js

@@ -2,8 +2,8 @@ const httpProxy = require("http-proxy");
 const http = require("http");
 const fs = require("fs");
 const program = require("commander");
-const pathCustomConfig = "./.react-scripts-ssr.json";
 const openBrowser = require("react-dev-utils/openBrowser");
+const pathsSSRScripts = require("../config/paths");
 
 program
   .version("0.1.0")
@@ -31,10 +31,14 @@ program
 
 let customHttpProxyConfig = { proxy: {} };
 try {
-  if (fs.existsSync(pathCustomConfig)) {
-    customConfig = JSON.parse(fs.readFileSync(pathCustomConfig));
+  if (fs.existsSync(pathsSSRScripts.customScriptConfig)) {
+    customConfig = JSON.parse(
+      fs.readFileSync(pathsSSRScripts.customScriptConfig)
+    );
     if (customConfig.proxy) {
-      customHttpProxyConfig = customConfig;
+      customHttpProxyConfig = customConfig.proxy;
+    } else {
+      throw new Error("customConfig doesn't have a key called proxy");
     }
   }
 } catch (error) {
@@ -44,22 +48,18 @@ try {
 }
 
 const WEB_HOST =
-  program.webHost || customHttpProxyConfig.proxy.webHost || "localhost";
-const WEB_PORT =
-  program.webPort || customHttpProxyConfig.proxy.webPort || "3000";
+  program.webHost || customHttpProxyConfig.webHost || "localhost";
+const WEB_PORT = program.webPort || customHttpProxyConfig.webPort || "3000";
 const WEB_URL = `http://${WEB_HOST}:${WEB_PORT}`;
 const API_URL =
-  program.apiUrl ||
-  customHttpProxyConfig.proxy.apiUrl ||
-  "http://localhost:8080";
-const PROXY_PORT =
-  program.proxyPort || customHttpProxyConfig.proxy.proxyPort || 5050;
+  program.apiUrl || customHttpProxyConfig.apiUrl || "http://localhost:8080";
+const PROXY_PORT = program.proxyPort || customHttpProxyConfig.proxyPort || 5050;
 const PROXY_HOST =
-  program.proxyHost || customHttpProxyConfig.proxy.proxyHost || "localhost";
+  program.proxyHost || customHttpProxyConfig.proxyHost || "localhost";
 
 const proxy = httpProxy.createProxyServer({
   ws: true,
-  ...customHttpProxyConfig.proxy
+  ...customHttpProxyConfig
 });
 
 var server = http.createServer((req, res) => {

scripts/start.js

@@ -68,6 +68,8 @@ choosePort(HOST, DEFAULT_PORT)
       // We have not found a port.
       return;
     }
+
+    process.env.REACT_APP_CLIENT_PORT = port;
     const protocol = process.env.HTTPS === "true" ? "https" : "http";
     const appName = require(paths.appPackageJson).name;
     const urls = prepareUrls(protocol, HOST, port);
@@ -120,15 +122,25 @@ choosePort(HOST, DEFAULT_PORT)
 
           if (!isServerRunning) {
             isServerRunning = true;
-
             const nodemon = exec(
-              "npx nodemon --watch build-server/index.js build-server/index.js"
+              "npx nodemon --watch build-server/index.js build-server/index.js",
+              (err, stdout, stderr) => {
+                if (err) {
+                  console.error(`exec error: ${err}`);
+                  return;
+                }
+
+                console.log(`Number of files ${stdout}`);
+              }
             );
 
             // This is to outpout in the terminal the child process
             nodemon.stdout.on("data", data => {
               console.log(data.toString());
             });
+            nodemon.stderr.on("data", data => {
+              console.error(data);
+            });
             nodemon.on("exit", code => {
               console.log(
                 `nodemon process exited with code ${code.toString()}`

src/middlewares.js

@@ -17,7 +17,7 @@ function createSSRMiddleware(middleware) {
     );
   } else {
     router.use(
-      ["/static", "/sockjs-node"],
+      ["/static", "/sockjs-node", "/api"],
       proxy({
         target: `http://localhost:${process.env.REACT_APP_DEV_SERVER_PORT}`,
         ws: true

src/render.js

@@ -23,7 +23,7 @@ async function render(pageData, req, res) {
     if (process.env.NODE_ENV === "development") {
       const fetch = require("node-fetch").default;
       const pageDevResponse = await fetch(
-        `http://localhost:${process.env.REACT_APP_DEV_SERVER_PORT}`
+        `http://localhost:${process.env.REACT_APP_DEV_SERVER_PORT}${req.path}`
       );
       const pageTemplate = await pageDevResponse.text();
       const page = injectHTML(pageTemplate, pageData);