From 50f5c8ae9678829a5d22595770139660939f8ec9 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Fri, 12 Feb 2021 16:35:50 -0500
Subject: [PATCH 01/13] create a buildwatch script

---
 package.json                |   2 +
 scripts/buildserverwatch.js | 214 ++++++++++++++++++++++++++++++++++++
 2 files changed, 216 insertions(+)
 create mode 100644 scripts/buildserverwatch.js

diff --git a/package.json b/package.json
index 747d6ec..587bde7 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "builds": "node scripts/buildserver.js",
+    "buildsw": "node scripts/buildserverwatch.js",
     "b": "npm run build && npm run builds && npm run dr",
     "test": "node scripts/test.js",
     "d": "node --inspect-brk scripts/build.js",
@@ -177,6 +178,7 @@
     "@types/react-helmet": "^6.1.0",
     "@types/react-router-dom": "^5.1.7",
     "copyfiles": "^2.4.1",
+    "env-cmd": "^10.1.0",
     "patch-package": "^6.2.2"
   }
 }
diff --git a/scripts/buildserverwatch.js b/scripts/buildserverwatch.js
new file mode 100644
index 0000000..8989aa5
--- /dev/null
+++ b/scripts/buildserverwatch.js
@@ -0,0 +1,214 @@
+
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'server';
+process.env.NODE_ENV = 'server';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const path = require('path');
+const chalk = require('react-dev-utils/chalk');
+const fs = require('fs-extra');
+const bfj = require('bfj');
+const webpack = require('webpack');
+const configFactory = require('../config/webpack.config');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+const argv = process.argv.slice(2);
+const writeStatsJson = argv.indexOf('--stats') !== -1;
+
+// Generate configuration
+const config = configFactory('server');
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // First, read the current file sizes in build directory.
+    // This lets us display how much they changed later.
+    return measureFileSizesBeforeBuild(paths.appServerBuild);
+  })
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appServerBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes, warnings }) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appServerBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrlOrPath;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appServerBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(
+          chalk.yellow(
+            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+          )
+        );
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
+    }
+  )
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('watching server:build');
+
+  const compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.watch({
+        aggregateTimeout: 300,
+    },(err, stats) => {
+      let messages;
+      if (err) {
+        if (!err.message) {
+          return reject(err);
+        }
+
+        let errMessage = err.message;
+
+        // Add additional information for postcss errors
+        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+          errMessage +=
+            '\nCompileError: Begins at CSS selector ' +
+            err['postcssNode'].selector;
+        }
+
+        messages = formatWebpackMessages({
+          errors: [errMessage],
+          warnings: [],
+        });
+      } else {
+        messages = formatWebpackMessages(
+          stats.toJson({ all: false, warnings: true, errors: true })
+        );
+      }
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        console.log(
+          chalk.yellow(
+            '\nTreating warnings as errors because process.env.CI = true.\n' +
+              'Most CI servers set it automatically.\n'
+          )
+        );
+        return reject(new Error(messages.warnings.join('\n\n')));
+      }
+
+      const resolveArgs = {
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      };
+
+      if (writeStatsJson) {
+        return bfj
+          .write(paths.appServerBuild + '/bundle-stats.json', stats.toJson())
+          .then(() => resolve(resolveArgs))
+          .catch(error => reject(new Error(error)));
+      }
+
+      return resolve(resolveArgs);
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appServerBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml,
+  });
+}

From b19e01d8dc3e09a7cabafbb6f7cea3424f2a9798 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Fri, 12 Feb 2021 16:45:38 -0500
Subject: [PATCH 02/13] cleaner server watch mode

---
 package-lock.json       | 53 +++++++++++++++++++++++++++++++++++++++++
 package.json            |  1 +
 scripts/buildserver.js  | 14 +++++++++--
 server/.env.serverwatch |  1 +
 4 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 server/.env.serverwatch

diff --git a/package-lock.json b/package-lock.json
index 186f5b1..d410784 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5527,6 +5527,59 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
     },
+    "env-cmd": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
+      "integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==",
+      "dev": true,
+      "requires": {
+        "commander": "^4.0.0",
+        "cross-spawn": "^7.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
diff --git a/package.json b/package.json
index 587bde7..32c8c5a 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "builds": "node scripts/buildserver.js",
+    "buildse": "env-cmd -f ./server/.env.serverwatch node scripts/buildserver.js",
     "buildsw": "node scripts/buildserverwatch.js",
     "b": "npm run build && npm run builds && npm run dr",
     "test": "node scripts/test.js",
diff --git a/scripts/buildserver.js b/scripts/buildserver.js
index 4334d05..5824999 100644
--- a/scripts/buildserver.js
+++ b/scripts/buildserver.js
@@ -3,6 +3,10 @@
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'server';
 process.env.NODE_ENV = 'server';
+const isWatchMode = process.env.WATCHSERVER==="TRUE"
+
+console.log(process.env.WATCHSERVER)
+console.log('isWatchMode', isWatchMode)
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
@@ -138,7 +142,7 @@ function build(previousFileSizes) {
 
   const compiler = webpack(config);
   return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
+    const callback = (err, stats) => {
       let messages;
       if (err) {
         if (!err.message) {
@@ -200,7 +204,13 @@ function build(previousFileSizes) {
       }
 
       return resolve(resolveArgs);
-    });
+    }
+
+    if(isWatchMode){
+      compiler.watch({aggregateTimeout:300}, callback)
+    }else{
+      compiler.run(callback);
+    }
   });
 }
 
diff --git a/server/.env.serverwatch b/server/.env.serverwatch
new file mode 100644
index 0000000..0e38e8f
--- /dev/null
+++ b/server/.env.serverwatch
@@ -0,0 +1 @@
+WATCHSERVER=TRUE
\ No newline at end of file

From 86660236df93d371d969d8ff1722a8e64bec635f Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Fri, 12 Feb 2021 16:49:45 -0500
Subject: [PATCH 03/13] naming fixed

---
 scripts/buildserver.js  | 3 +--
 server/.env.serverwatch | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/scripts/buildserver.js b/scripts/buildserver.js
index 5824999..3aae963 100644
--- a/scripts/buildserver.js
+++ b/scripts/buildserver.js
@@ -3,9 +3,8 @@
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'server';
 process.env.NODE_ENV = 'server';
-const isWatchMode = process.env.WATCHSERVER==="TRUE"
+const isWatchMode = process.env.WATCH_SERVER==="TRUE"
 
-console.log(process.env.WATCHSERVER)
 console.log('isWatchMode', isWatchMode)
 
 // Makes the script crash on unhandled rejections instead of silently
diff --git a/server/.env.serverwatch b/server/.env.serverwatch
index 0e38e8f..d2a9553 100644
--- a/server/.env.serverwatch
+++ b/server/.env.serverwatch
@@ -1 +1 @@
-WATCHSERVER=TRUE
\ No newline at end of file
+WATCH_SERVER=TRUE
\ No newline at end of file

From 5349b5388e3f136995b5287c41c121e6aeb46b89 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Wed, 17 Feb 2021 16:43:45 -0500
Subject: [PATCH 04/13] using material usseStyleButton

---
 package-lock.json | 236 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   2 +
 src/Home.tsx      |  18 ++++
 3 files changed, 256 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index d410784..4b41054 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1136,6 +1136,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@eslint/eslintrc": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz",
@@ -1794,6 +1799,88 @@
         }
       }
     },
+    "@material-ui/core": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz",
+      "integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.3",
+        "@material-ui/system": "^4.11.3",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",
+      "integrity": "sha512-HzVzCG+PpgUGMUYEJ2rTEmQYeonGh41BYfILNFb/1ueqma+p1meSdu4RX6NjxYBMhf7k+jgfHFTTz+L1SXL/Zg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.5.1",
+        "jss-plugin-camel-case": "^10.5.1",
+        "jss-plugin-default-unit": "^10.5.1",
+        "jss-plugin-global": "^10.5.1",
+        "jss-plugin-nested": "^10.5.1",
+        "jss-plugin-props-sort": "^10.5.1",
+        "jss-plugin-rule-value-function": "^10.5.1",
+        "jss-plugin-vendor-prefixer": "^10.5.1",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.15",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.15.tgz",
+          "integrity": "sha512-FNeiVKudquehtR3t9TRRnsHL+lJhuHF5Zn9dt01jpojlurLEPDhhEtUkWmAUJ7/fOLaLG4dCDEnUsR0N1rZSsg=="
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.11.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.3.tgz",
+      "integrity": "sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.15",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.15.tgz",
+          "integrity": "sha512-FNeiVKudquehtR3t9TRRnsHL+lJhuHF5Zn9dt01jpojlurLEPDhhEtUkWmAUJ7/fOLaLG4dCDEnUsR0N1rZSsg=="
+        }
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -2423,6 +2510,14 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -4144,6 +4239,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4756,6 +4856,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -5266,6 +5375,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -7791,6 +7909,11 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7891,6 +8014,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indefinite-observable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
+      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -8141,6 +8272,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -9948,6 +10084,85 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.1.tgz",
+      "integrity": "sha512-hbbO3+FOTqVdd7ZUoTiwpHzKXIo5vGpMNbuXH1a0wubRSWLWSBvwvaq4CiHH/U42CmjOnp6lVNNs/l+Z7ZdDmg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "indefinite-observable": "^2.0.1",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.1.tgz",
+      "integrity": "sha512-9+oymA7wPtswm+zxVti1qiowC5q7bRdCJNORtns2JUj/QHp2QPXYwSNRD8+D2Cy3/CEMtdJzlNnt5aXmpS6NAg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.5.1"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.1.tgz",
+      "integrity": "sha512-D48hJBc9Tj3PusvlillHW8Fz0y/QqA7MNmTYDQaSB/7mTrCZjt7AVRROExoOHEtd2qIYKOYJW3Jc2agnvsXRlQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.1.tgz",
+      "integrity": "sha512-jX4XpNgoaB8yPWw/gA1aPXJEoX0LNpvsROPvxlnYe+SE0JOhuvF7mA6dCkgpXBxfTWKJsno7cDSCgzHTocRjCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.1.tgz",
+      "integrity": "sha512-xXkWKOCljuwHNjSYcXrCxBnjd8eJp90KVFW1rlhvKKRXnEKVD6vdKXYezk2a89uKAHckSvBvBoDGsfZrldWqqQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.1.tgz",
+      "integrity": "sha512-t+2vcevNmMg4U/jAuxlfjKt46D/jHzCPEjsjLRj/J56CvP7Iy03scsUP58Iw8mVnaV36xAUZH2CmAmAdo8994g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.1.tgz",
+      "integrity": "sha512-3gjrSxsy4ka/lGQsTDY8oYYtkt2esBvQiceGBB4PykXxHoGRz14tbCK31Zc6DHEnIeqsjMUGbq+wEly5UViStQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.1",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.5.1",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.1.tgz",
+      "integrity": "sha512-cLkH6RaPZWHa1TqSfd2vszNNgxT1W0omlSjAd6hCFHp3KIocSrW21gaHjlMU26JpTHwkc+tJTCQOmE/O1A4FKQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.5.1"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
@@ -11455,6 +11670,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -12963,6 +13183,17 @@
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
       "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
     },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -14735,6 +14966,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 32c8c5a..d25520b 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
   "dependencies": {
     "@babel/core": "7.12.3",
     "@loadable/component": "^5.14.1",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/styles": "^4.11.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
     "@svgr/webpack": "5.4.0",
     "@testing-library/jest-dom": "^5.11.9",
diff --git a/src/Home.tsx b/src/Home.tsx
index 475ec0a..f3715bf 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -3,9 +3,26 @@ import React from 'react';
 import logo from './logo.svg';
 import Sebas from 'component-sebas'
 import {Helmet} from "react-helmet";
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 
 
+
+const useStyles = makeStyles({
+    root: {
+      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+      border: 0,
+      borderRadius: 3,
+      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+      color: 'white',
+      height: 48,
+      padding: '0 30px',
+    },
+  });
+
 const Home =() =>{
+    const classes = useStyles();
+
     return (
     <div className="App">
         <Helmet>
@@ -25,6 +42,7 @@ const Home =() =>{
         >
             Learn React
         </a>
+        <Button className={classes.root}>Hook</Button>
         </header>
     </div>
     )

From 83aefd048d93c3453e6f4bb24c822ebd0344098e Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Wed, 17 Feb 2021 17:01:37 -0500
Subject: [PATCH 05/13] adding ssr for material UI

---
 config/run.js        |  8 ++++++--
 src/Home.tsx         |  1 +
 src/server/index.tsx | 11 +++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/config/run.js b/config/run.js
index fcaf366..adf9b0d 100644
--- a/config/run.js
+++ b/config/run.js
@@ -35,7 +35,11 @@ const all = (req, res)=>{
           res.writeHead(200, { 'Content-Type': 'text/html' })
           console.log(`SSR of ${req.path}`);
 
-        const [reactDom, helmet] = moduleWithfault.default(extractor,location )
+        const [reactDom, helmet,sheets ] = moduleWithfault.default(extractor,location )
+
+        const css = sheets.toString();
+        const styleTag = `<style id="jss-server-side">${css}</style>`
+
         const helmetTitle= helmet.title.toString()
         const hasHelmetTitle = helmetTitle ? helmetTitle.match(helmetExtractorRegex): null 
          
@@ -59,7 +63,7 @@ const all = (req, res)=>{
           )
           .replace(
             endHeadNode,
-            `${helmet.meta.toString()} ${helmet.link.toString()} ${helmet.style.toString()} ${helmet.script.toString()}` + endHeadNode
+            `${helmet.meta.toString()} ${helmet.link.toString()} ${helmet.style.toString()} ${helmet.script.toString()} ${styleTag}` + endHeadNode
           )
           .replace(
             '<div id="root"></div>',
diff --git a/src/Home.tsx b/src/Home.tsx
index f3715bf..e068e68 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -17,6 +17,7 @@ const useStyles = makeStyles({
       color: 'white',
       height: 48,
       padding: '0 30px',
+      width:'200px'
     },
   });
 
diff --git a/src/server/index.tsx b/src/server/index.tsx
index fc2d6c9..292d65a 100644
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@@ -2,12 +2,19 @@ import  React from 'react'
 import  {renderToString} from 'react-dom/server'
 import  App from '../App' ;
 import Helmet from 'react-helmet'
+import { ServerStyleSheets } from '@material-ui/core/styles';
+
 Helmet.canUseDOM = false
 
 
 const renderK = (extractor: any, location?: string) =>{
+    const sheets = new ServerStyleSheets();
    
-    const reactDom = renderToString(<App extractor={extractor} location={location}/>)
+    const reactDom = renderToString(
+        sheets.collect(
+            <App extractor={extractor} location={location}/>,
+          )
+    )
     const helmet = Helmet.renderStatic();
     console.log("🚀 ------------------------------------------------------------")
     console.log("🚀 ~ file: index.tsx ~ line 10 ~ renderK ~ reactDom", reactDom)
@@ -20,7 +27,7 @@ const renderK = (extractor: any, location?: string) =>{
         // // And you can even collect your style tags (if you use "mini-css-extract-plugin")
         // const styleTags = extractor.getStyleTags() // or extractor.getStyleElements();
 
-    return [reactDom, helmet]
+    return [reactDom, helmet, sheets]
 }
 
 export default renderK
\ No newline at end of file

From f29a19f9370f930f23c28af56635d63ccf54acc3 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Thu, 18 Feb 2021 14:07:35 -0500
Subject: [PATCH 06/13] function on styles does not brake

---
 src/App.tsx  | 5 +++++
 src/Home.tsx | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 781c617..740deab 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,12 +39,17 @@ const Category = () => (
   </div>
 );
 
+function createMarkup() {
+  return {__html: '<h3>First &middot; Second</h3>'};
+}
 const Products = () => (
   <div>
     <Helmet>
         <title>Products title</title>
     </Helmet>
+
     <h2>Products</h2>
+    <div dangerouslySetInnerHTML={createMarkup()}></div>
   </div>
 );
 
diff --git a/src/Home.tsx b/src/Home.tsx
index e068e68..b5c9d52 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -19,10 +19,11 @@ const useStyles = makeStyles({
       padding: '0 30px',
       width:'200px'
     },
+    imageWrapper: props => props
   });
 
 const Home =() =>{
-    const classes = useStyles();
+    const classes = useStyles({backgroundColor:"red"});
 
     return (
     <div className="App">
@@ -30,7 +31,7 @@ const Home =() =>{
             <title>Home title</title>
         </Helmet>
         <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <img src={logo} className={"App-logo" + classes.imageWrapper } alt="logo" />
         <p>
             Edit <code>src/App.tsx</code> and save to reload.
         </p>

From a2ba2cb78903636b54648493a99532609443625c Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Thu, 18 Feb 2021 14:44:07 -0500
Subject: [PATCH 07/13] using functions inside makestyles

---
 src/Home.tsx | 44 ++++++++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index b5c9d52..9079ab6 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -3,24 +3,40 @@ import React from 'react';
 import logo from './logo.svg';
 import Sebas from 'component-sebas'
 import {Helmet} from "react-helmet";
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 
 
-const useStyles = makeStyles({
-    root: {
-      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-      border: 0,
-      borderRadius: 3,
-      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
-      color: 'white',
-      height: 48,
-      padding: '0 30px',
-      width:'200px'
-    },
-    imageWrapper: props => props
-  });
+// const useStyles = makeStyles({
+//     root: {
+//       background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+//       border: 0,
+//       borderRadius: 3,
+//       boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+//       color: 'white',
+//       height: 48,
+//       padding: '0 30px',
+//       width:'200px'
+//     },
+//     imageWrapper: props => props
+//   });
+
+  const useStyles = makeStyles(
+    createStyles({
+        root: {
+            background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+            border: 0,
+            borderRadius: 3,
+            boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+            color: 'white',
+            height: 48,
+            padding: '0 30px',
+            width:'200px'
+        },
+      imageWrapper: props => props
+    })
+  );
 
 const Home =() =>{
     const classes = useStyles({backgroundColor:"red"});

From a201162241eda0800e106b35ffc0625d518a9f49 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Fri, 30 Apr 2021 18:01:35 -0400
Subject: [PATCH 08/13] copy the start script and rename to startServer

---
 scripts/startServer.js | 166 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 scripts/startServer.js

diff --git a/scripts/startServer.js b/scripts/startServer.js
new file mode 100644
index 0000000..92c2671
--- /dev/null
+++ b/scripts/startServer.js
@@ -0,0 +1,166 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const fs = require('fs');
+const chalk = require('react-dev-utils/chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const semver = require('semver');
+const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+const getClientEnvironment = require('../config/env');
+const react = require(require.resolve('react', { paths: [paths.appPath] }));
+
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
+  );
+  console.log();
+}
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+
+    const config = configFactory('development');
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1)
+    );
+    const devSocket = {
+      warnings: warnings =>
+        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
+      errors: errors =>
+        devServer.sockWrite(devServer.sockets, 'errors', errors),
+    };
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler({
+      appName,
+      config,
+      devSocket,
+      urls,
+      useYarn,
+      useTypeScript,
+      tscCompileOnError,
+      webpack,
+    });
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic,
+      paths.publicUrlOrPath
+    );
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = createDevServerConfig(
+      proxyConfig,
+      urls.lanUrlForConfig
+    );
+    const devServer = new WebpackDevServer(compiler, serverConfig);
+    // Launch WebpackDevServer.
+    devServer.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
+        console.log(
+          chalk.yellow(
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
+          )
+        );
+      }
+
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
+        devServer.close();
+        process.exit();
+      });
+    });
+
+    if (process.env.CI !== 'true') {
+      // Gracefully exit when stdin ends
+      process.stdin.on('end', function () {
+        devServer.close();
+        process.exit();
+      });
+    }
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

From 965f9dc835ee033c7e6123837ad335e69402f42c Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Fri, 30 Apr 2021 18:39:50 -0400
Subject: [PATCH 09/13] double index per build and startServer command

---
 config/run.js                     |  3 +--
 config/webpack.config.js          | 29 ++++++++++++++++++++++++++---
 config/webpackDevServer.config.js |  6 +++---
 nodemon.json                      |  4 ++++
 package.json                      |  6 +++++-
 scripts/startServer.js            | 10 +++++-----
 6 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 nodemon.json

diff --git a/config/run.js b/config/run.js
index adf9b0d..9957994 100644
--- a/config/run.js
+++ b/config/run.js
@@ -8,7 +8,7 @@ const fs = require('fs');
 
 const express = require('express');
 
-const PORT = 3000;
+const PORT = 3002;
 const helmetExtractorRegex = /<title data-react-helmet="true">(.+)<\/title>/
 
 // const routes = ['/', '/page'];
@@ -85,4 +85,3 @@ app.listen(PORT, () => console.log(`Example app listening on port ${PORT}!`));
 
 
 
-debugger;
\ No newline at end of file
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 4eadf9f..5cad34a 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -27,6 +27,9 @@ const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpack
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const LoadablePlugin = require('@loadable/webpack-plugin')
+var HtmlWebpackSkipAssetsPlugin = require('html-webpack-skip-assets-plugin').HtmlWebpackSkipAssetsPlugin;
+const PreloadWebpackPlugin = require("preload-webpack-plugin");
+
 
 const postcssNormalize = require('postcss-normalize');
 
@@ -218,7 +221,7 @@ module.exports = function (webpackEnv) {
           :paths.appIndexJs,
     output:Object.assign({
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : isEnvServer ?  paths.appServerBuild : undefined,
+      path:  isEnvServer ?  paths.appServerBuild : paths.appBuild,
       // Add /* filename */ comments to generated require()s in the output.
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
@@ -575,7 +578,7 @@ module.exports = function (webpackEnv) {
           },
           isEnvProduction
             ? {
-                minify: {
+                minify: false /* {
                   removeComments: true,
                   collapseWhitespace: true,
                   removeRedundantAttributes: true,
@@ -586,11 +589,31 @@ module.exports = function (webpackEnv) {
                   minifyJS: true,
                   minifyCSS: true,
                   minifyURLs: true,
-                },
+                }, */
               }
             : undefined
         )
       ),
+
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appHtml,
+            filename: "index-ssr.html",
+            minify:false,
+            excludeAssets: [/\.js$/i]
+          }
+        )
+      ),
+      new HtmlWebpackSkipAssetsPlugin(),
+
+      // new PreloadWebpackPlugin({
+      //   rel: "preload",
+      //   include: "initial"
+      // }),
+
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
       // https://github.com/facebook/create-react-app/issues/5358
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 6c43a8a..e64e3b7 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -1,4 +1,4 @@
-'use strict';
+
 
 const fs = require('fs');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
@@ -15,7 +15,7 @@ const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function (proxy, allowedHost) {
-  return {
+  return Object.assign( {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
     // https://github.com/webpack/webpack-dev-server/issues/887
@@ -126,5 +126,5 @@ module.exports = function (proxy, allowedHost) {
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
       app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
     },
-  };
+  },{hot: false, liveReload: true, writeToDisk: true });
 };
diff --git a/nodemon.json b/nodemon.json
new file mode 100644
index 0000000..8089c97
--- /dev/null
+++ b/nodemon.json
@@ -0,0 +1,4 @@
+{
+    "watch": ["config/run.js", "build/"],
+    "ext": "js, css, html"
+  }
\ No newline at end of file
diff --git a/package.json b/package.json
index d25520b..640712a 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,8 @@
   },
   "scripts": {
     "start": "node scripts/start.js",
+    "startServer": "PORT=3001 node scripts/startServer.js",
+    "double": " npm run start & npm run startServer & wait",
     "build": "node scripts/build.js",
     "builds": "node scripts/buildserver.js",
     "buildse": "env-cmd -f ./server/.env.serverwatch node scripts/buildserver.js",
@@ -182,6 +184,8 @@
     "@types/react-router-dom": "^5.1.7",
     "copyfiles": "^2.4.1",
     "env-cmd": "^10.1.0",
-    "patch-package": "^6.2.2"
+    "html-webpack-skip-assets-plugin": "^1.0.1",
+    "patch-package": "^6.2.2",
+    "preload-webpack-plugin": "^2.3.0"
   }
 }
diff --git a/scripts/startServer.js b/scripts/startServer.js
index 92c2671..dd8ce66 100644
--- a/scripts/startServer.js
+++ b/scripts/startServer.js
@@ -1,8 +1,8 @@
-'use strict';
+
 
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = 'server';
+process.env.NODE_ENV = 'server';
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
@@ -80,7 +80,7 @@ checkBrowsers(paths.appPath, isInteractive)
       return;
     }
 
-    const config = configFactory('development');
+    const config = configFactory('server');
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
 
@@ -139,7 +139,7 @@ checkBrowsers(paths.appPath, isInteractive)
         );
       }
 
-      console.log(chalk.cyan('Starting the development server...\n'));
+      console.log(chalk.cyan('Starting the server server...\n'));
       openBrowser(urls.localUrlForBrowser);
     });
 

From 609262108f7253cb49d744b59c8ac19300a13762 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Fri, 30 Apr 2021 18:50:09 -0400
Subject: [PATCH 10/13] i cannot activate some of the things because a window
 error

---
 config/webpack.config.js | 14 ++++++++------
 package.json             |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 5cad34a..c0ecce5 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -84,6 +84,8 @@ module.exports = function (webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production' ;
   const isEnvServer = webpackEnv === 'server';
+  const isServerDEV =process.env.SERVER_DEV === "true" 
+  console.info(isServerDEV)
 
   const isProdOrServer = isEnvProduction || isEnvServer
   const iDevOrServer = isEnvDevelopment || isEnvServer
@@ -182,7 +184,7 @@ module.exports = function (webpackEnv) {
   ].filter(Boolean)
 
   const config =  Object.assign({
-    mode: isEnvProduction ? 'production' : isEnvDevelopment ? 'development' : isEnvServer && 'none',
+    mode: isEnvProduction ? 'production' : (isEnvDevelopment || isServerDEV) ? 'development' : isEnvServer && 'none',
     // Stop compilation early in production
     bail: isProdOrServer,
     devtool: isProdOrServer
@@ -193,7 +195,7 @@ module.exports = function (webpackEnv) {
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
     entry:
-      isEnvDevelopment && !shouldUseReactRefresh
+      (isEnvDevelopment ) && !shouldUseReactRefresh
         ? [
             // Include an alternative client for WebpackDevServer. A client's job is to
             // connect to WebpackDevServer by a socket and get notified about changes.
@@ -636,10 +638,10 @@ module.exports = function (webpackEnv) {
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin(env.stringified),
       // This is necessary to emit hot updates (CSS and Fast Refresh):
-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      (isEnvDevelopment ) && new webpack.HotModuleReplacementPlugin(),
       // Experimental hot reloading for React .
       // https://github.com/facebook/react/tree/master/packages/react-refresh
-      isEnvDevelopment &&
+      (isEnvDevelopment ) &&
         shouldUseReactRefresh &&
         new ReactRefreshWebpackPlugin({
           overlay: {
@@ -655,12 +657,12 @@ module.exports = function (webpackEnv) {
       // Watcher doesn't work well if you mistype casing in a path so we use
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240
-      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+      (isEnvDevelopment || isServerDEV) && new CaseSensitivePathsPlugin(),
       // If you require a missing module and then `npm install` it, you still have
       // to restart the development server for webpack to discover it. This plugin
       // makes the discovery automatic so you don't have to restart.
       // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
+      (isEnvDevelopment || isServerDEV) &&
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       isEnvProduction &&
         new MiniCssExtractPlugin({
diff --git a/package.json b/package.json
index 640712a..2712b83 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
   },
   "scripts": {
     "start": "node scripts/start.js",
-    "startServer": "PORT=3001 node scripts/startServer.js",
+    "startServer": "PORT=3001 SERVER_DEV=true node scripts/startServer.js",
     "double": " npm run start & npm run startServer & wait",
     "build": "node scripts/build.js",
     "builds": "node scripts/buildserver.js",

From 6018fa8f92c9c2a47c96500d77b99298ef0561b3 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Mon, 3 May 2021 23:12:51 -0400
Subject: [PATCH 11/13] open conditionaly

---
 config/run.js                     | 2 +-
 config/webpackDevServer.config.js | 2 +-
 package.json                      | 2 +-
 scripts/start.js                  | 5 +++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/config/run.js b/config/run.js
index 9957994..2eeb2fc 100644
--- a/config/run.js
+++ b/config/run.js
@@ -8,7 +8,7 @@ const fs = require('fs');
 
 const express = require('express');
 
-const PORT = 3002;
+const PORT = 3000;
 const helmetExtractorRegex = /<title data-react-helmet="true">(.+)<\/title>/
 
 // const routes = ['/', '/page'];
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index e64e3b7..fbbdae7 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -126,5 +126,5 @@ module.exports = function (proxy, allowedHost) {
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
       app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
     },
-  },{hot: false, liveReload: true, writeToDisk: true });
+  },{hot: false, liveReload: true, writeToDisk: true, open : false /* process.env.NODE_ENV === "server" ? false : true */ });
 };
diff --git a/package.json b/package.json
index 2712b83..1bd02aa 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "workbox-webpack-plugin": "5.1.4"
   },
   "scripts": {
-    "start": "node scripts/start.js",
+    "start": "PORT=3002 WDS_SOCKET_PORT=3002 node scripts/start.js",
     "startServer": "PORT=3001 SERVER_DEV=true node scripts/startServer.js",
     "double": " npm run start & npm run startServer & wait",
     "build": "node scripts/build.js",
diff --git a/scripts/start.js b/scripts/start.js
index 92c2671..3bbe337 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -1,4 +1,4 @@
-'use strict';
+
 
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.BABEL_ENV = 'development';
@@ -140,7 +140,8 @@ checkBrowsers(paths.appPath, isInteractive)
       }
 
       console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
+      if (serverConfig.open)openBrowser(urls.localUrlForBrowser);
+      
     });
 
     ['SIGINT', 'SIGTERM'].forEach(function (sig) {

From c0b46f616224feb215796e735650612543ac1803 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Tue, 4 May 2021 09:56:25 -0400
Subject: [PATCH 12/13] conditional open

---
 scripts/start.js       | 2 +-
 scripts/startServer.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/start.js b/scripts/start.js
index 3bbe337..aaa1993 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -140,7 +140,7 @@ checkBrowsers(paths.appPath, isInteractive)
       }
 
       console.log(chalk.cyan('Starting the development server...\n'));
-      if (serverConfig.open)openBrowser(urls.localUrlForBrowser);
+      if (serverConfig.open) openBrowser(urls.localUrlForBrowser);
       
     });
 
diff --git a/scripts/startServer.js b/scripts/startServer.js
index dd8ce66..102a010 100644
--- a/scripts/startServer.js
+++ b/scripts/startServer.js
@@ -140,7 +140,7 @@ checkBrowsers(paths.appPath, isInteractive)
       }
 
       console.log(chalk.cyan('Starting the server server...\n'));
-      openBrowser(urls.localUrlForBrowser);
+      if (serverConfig.open) openBrowser(urls.localUrlForBrowser);
     });
 
     ['SIGINT', 'SIGTERM'].forEach(function (sig) {

From 146b08a5727115cd53da1d218ddc66773ec0a3e4 Mon Sep 17 00:00:00 2001
From: sebastian correa <sebastian@sawyereffect.com>
Date: Tue, 4 May 2021 10:05:26 -0400
Subject: [PATCH 13/13] add watch:express

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 1bd02aa..8aad918 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "d": "node --inspect-brk scripts/build.js",
     "ds": "node --inspect-brk scripts/buildserver.js",
     "dr": "node config/run.js",
+    "watch:express": "nodemon config/run.js",
     "postinstall": "patch-package"
   },
   "eslintConfig": {