From f29a19f9370f930f23c28af56635d63ccf54acc3 Mon Sep 17 00:00:00 2001 From: sebastian correa Date: Thu, 18 Feb 2021 14:07:35 -0500 Subject: [PATCH 1/8] 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 = () => ( ); +function createMarkup() { + return {__html: '

First · Second

'}; +} const Products = () => (
Products title +

Products

+
); 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 (
@@ -30,7 +31,7 @@ const Home =() =>{ Home title
- logo + logo

Edit src/App.tsx and save to reload.

From a2ba2cb78903636b54648493a99532609443625c Mon Sep 17 00:00:00 2001 From: sebastian correa Date: Thu, 18 Feb 2021 14:44:07 -0500 Subject: [PATCH 2/8] 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 Date: Fri, 30 Apr 2021 18:01:35 -0400 Subject: [PATCH 3/8] 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 Date: Fri, 30 Apr 2021 18:39:50 -0400 Subject: [PATCH 4/8] 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>/ // 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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": {