From 98d363197674adfe99a292811808672ef05070d5 Mon Sep 17 00:00:00 2001
From: danzeuss <danvc@zeuss.com>
Date: Sat, 28 Dec 2019 05:11:43 -0300
Subject: [PATCH 1/7] .

---
 packages/react-scripts/config/paths.js        |   9 ++
 .../react-scripts/config/webpack.config.js    | 113 +++++++++++-------
 packages/react-scripts/scripts/build.js       |  16 ++-
 packages/react-scripts/scripts/start.js       |   8 +-
 4 files changed, 92 insertions(+), 54 deletions(-)

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index acaca7f4d48..eebf10cb5c8 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -73,6 +73,15 @@ const resolveModule = (resolveFn, filePath) => {
   return resolveFn(`${filePath}.js`);
 };
 
+const appPages = [
+  {
+    name: 'index',
+    title: 'index',
+    appHtml: resolveApp('public/index.html'),
+    appIndexJs: resolveApp('src/index.js'),
+  },
+];
+
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index bad4290061b..27ccc0f7c58 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -146,18 +146,44 @@ module.exports = function(webpackEnv) {
     return loaders;
   };
 
-  return {
-    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
-    // Stop compilation early in production
-    bail: isEnvProduction,
-    devtool: isEnvProduction
-      ? shouldUseSourceMap
-        ? 'source-map'
-        : false
-      : isEnvDevelopment && 'cheap-module-source-map',
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    entry: [
+  const htmlPlugins = [];
+
+  paths.appPages.forEach(appPage => {
+    htmlPlugins.push(
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: appPage.appHtml,
+            // filename: `${appPage.name}.html`,
+            // title: appPage.title,
+            // chunks: [appPage.name]
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined
+        )
+      )
+    );
+  });
+
+  let entries = {};
+  paths.appPages.forEach(appPage => {
+    entries[appPage.name] = [
       // Include an alternative client for WebpackDevServer. A client's job is to
       // connect to WebpackDevServer by a socket and get notified about changes.
       // When you save a file, the client will either apply hot updates (in case
@@ -171,11 +197,25 @@ module.exports = function(webpackEnv) {
       isEnvDevelopment &&
         require.resolve('react-dev-utils/webpackHotDevClient'),
       // Finally, this is your app's code:
-      paths.appIndexJs,
+      appPage.appIndexJs,
       // We include the app code last so that if there is a runtime error during
       // initialization, it doesn't blow up the WebpackDevServer client, and
       // changing JS code would still trigger a refresh.
-    ].filter(Boolean),
+    ].filter(Boolean);
+  });
+
+  return {
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction
+      ? shouldUseSourceMap
+        ? 'source-map'
+        : false
+      : isEnvDevelopment && 'cheap-module-source-map',
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: entries,
     output: {
       // The build folder.
       path: isEnvProduction ? paths.appBuild : undefined,
@@ -270,8 +310,8 @@ module.exports = function(webpackEnv) {
               : false,
           },
           cssProcessorPluginOptions: {
-              preset: ['default', { minifyFontValues: { removeQuotes: false } }]
-          }
+            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+          },
         }),
       ],
       // Automatically split vendor and commons
@@ -580,32 +620,9 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
-      // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
+      // Generates an `.html` file with the <script> injected.
+      ...htmlPlugins,
+
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
       // https://github.com/facebook/create-react-app/issues/5358
@@ -661,9 +678,15 @@ module.exports = function(webpackEnv) {
             manifest[file.name] = file.path;
             return manifest;
           }, seed);
-          const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
-          );
+
+          let entrypointFiles = [];
+
+          for (let [entryFile, fileName] of Object.entries(entrypoints)) {
+            let notMapFiles = fileName.filter(
+              fileName => !fileName.endsWith('.map')
+            );
+            entrypointFiles = entrypointFiles.concat(notMapFiles);
+          }
 
           return {
             files: manifestFiles,
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index 7a2bb8d0a11..d174c61fa54 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -55,9 +55,11 @@ 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);
-}
+paths.appPages.forEach(appPage => {
+  if (!checkRequiredFiles([appPage.appHtml, appPage.appIndexJs])) {
+    process.exit(1);
+  }
+});
 
 // Generate configuration
 const config = configFactory('production');
@@ -220,8 +222,10 @@ function build(previousFileSizes) {
 }
 
 function copyPublicFolder() {
-  fs.copySync(paths.appPublic, paths.appBuild, {
-    dereference: true,
-    filter: file => file !== paths.appHtml,
+  paths.appPages.forEach(appPage => {
+    fs.copySync(paths.appPublic, paths.appBuild, {
+      dereference: true,
+      filter: file => file !== paths.appHtml,
+    });
   });
 }
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 6c2602f04ff..d67c280c4a8 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -52,9 +52,11 @@ 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);
-}
+paths.appPages.forEach(appPage => {
+  if (!checkRequiredFiles([appPage.appHtml, appPage.appIndexJs])) {
+    process.exit(1);
+  }
+});
 
 // Tools like Cloud9 rely on this.
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

From e565a08c51227ce01a8ef057b45105f6e0c51621 Mon Sep 17 00:00:00 2001
From: danzeuss <danvc@zeuss.com>
Date: Sat, 28 Dec 2019 05:17:48 -0300
Subject: [PATCH 2/7] Adding the apppages into the paths

---
 packages/react-scripts/config/paths.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index eebf10cb5c8..53a0a89f314 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -88,6 +88,7 @@ module.exports = {
   appPath: resolveApp('.'),
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
+  appPages,
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
   appPackageJson: resolveApp('package.json'),
@@ -111,6 +112,7 @@ module.exports = {
   appPath: resolveApp('.'),
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
+  appPages,
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
   appPackageJson: resolveApp('package.json'),

From 06dfb7311e99a26c3e139f7e823df7f972245c97 Mon Sep 17 00:00:00 2001
From: danzeuss <danvc@zeuss.com>
Date: Sat, 28 Dec 2019 05:25:01 -0300
Subject: [PATCH 3/7] Allowing add multiple entry points from the .json file

---
 packages/create-react-app/createReactApp.js |  9 ++++++++
 packages/react-scripts/config/paths.js      | 25 ++++++++++++++-------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
index bd60bed0d76..ee04dd734c9 100755
--- a/packages/create-react-app/createReactApp.js
+++ b/packages/create-react-app/createReactApp.js
@@ -240,6 +240,15 @@ function createApp(
     name: appName,
     version: '0.1.0',
     private: true,
+    // entry points
+    appPages: [
+      {
+        name: 'index',
+        title: 'index',
+        appHtml: 'public/index.html',
+        appIndexJs: 'src/index',
+      },
+    ],
   };
   fs.writeFileSync(
     path.join(root, 'package.json'),
diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index 53a0a89f314..e9e8615dc4b 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -73,14 +73,23 @@ const resolveModule = (resolveFn, filePath) => {
   return resolveFn(`${filePath}.js`);
 };
 
-const appPages = [
-  {
-    name: 'index',
-    title: 'index',
-    appHtml: resolveApp('public/index.html'),
-    appIndexJs: resolveApp('src/index.js'),
-  },
-];
+// Resolve appPages (aka entry points)
+var appPages = require(resolveApp('package.json')).appPages;
+// checks if there is at least one entry point specified
+if (appPages === undefined || appPages === null || appPages.length === 0) {
+  console.log(
+    "You must defined the entry points in your package.json using the parameter 'appPages'."
+  );
+  process.exit(1);
+} else
+  appPages = appPages.map(ep => {
+    // maps each element by resolving the right path
+    return {
+      ...ep,
+      appHtml: resolveApp(ep.appHtml),
+      appIndexJs: resolveModule(resolveApp, ep.appIndexJs),
+    };
+  });
 
 // config after eject: we're in ./config/
 module.exports = {

From c17a19c6492b1ff958e66032901375499863f7e2 Mon Sep 17 00:00:00 2001
From: danzeuss <danvc@zeuss.com>
Date: Sat, 28 Dec 2019 05:40:28 -0300
Subject: [PATCH 4/7] Adding a filename for each .js file

---
 packages/react-scripts/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 27ccc0f7c58..676e355d070 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -225,7 +225,7 @@ module.exports = function(webpackEnv) {
       // In development, it does not produce real files.
       filename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/bundle.js',
+        : isEnvDevelopment && 'static/js/[name].bundle.js',
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.

From 9959ddddb92ebfeade9ad58264a5482d19b128a7 Mon Sep 17 00:00:00 2001
From: danzeuss <danvc@zeuss.com>
Date: Sat, 28 Dec 2019 06:20:53 -0300
Subject: [PATCH 5/7] Testing

---
 packages/react-scripts/config/paths.js        |  2 --
 .../react-scripts/config/webpack.config.js    | 24 -------------------
 packages/react-scripts/scripts/build.js       |  2 +-
 3 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index e9e8615dc4b..b82314677c8 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -98,7 +98,6 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appPages,
-  appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
@@ -158,7 +157,6 @@ if (
     appPath: resolveApp('.'),
     appBuild: resolveOwn('../../build'),
     appPublic: resolveOwn(`${templatePath}/public`),
-    appHtml: resolveOwn(`${templatePath}/public/index.html`),
     appIndexJs: resolveModule(resolveOwn, `${templatePath}/src/index`),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn(`${templatePath}/src`),
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 676e355d070..803974688b5 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -393,30 +393,6 @@ module.exports = function(webpackEnv) {
                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
                 eslintPath: require.resolve('eslint'),
                 resolvePluginsRelativeTo: __dirname,
-                // @remove-on-eject-begin
-                ignore: process.env.EXTEND_ESLINT === 'true',
-                baseConfig: (() => {
-                  // We allow overriding the config only if the env variable is set
-                  if (process.env.EXTEND_ESLINT === 'true') {
-                    const eslintCli = new eslint.CLIEngine();
-                    let eslintConfig;
-                    try {
-                      eslintConfig = eslintCli.getConfigForFile(
-                        paths.appIndexJs
-                      );
-                    } catch (e) {
-                      console.error(e);
-                      process.exit(1);
-                    }
-                    return eslintConfig;
-                  } else {
-                    return {
-                      extends: [require.resolve('eslint-config-react-app')],
-                    };
-                  }
-                })(),
-                useEslintrc: false,
-                // @remove-on-eject-end
               },
               loader: require.resolve('eslint-loader'),
             },
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index d174c61fa54..0af2d554da6 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -225,7 +225,7 @@ function copyPublicFolder() {
   paths.appPages.forEach(appPage => {
     fs.copySync(paths.appPublic, paths.appBuild, {
       dereference: true,
-      filter: file => file !== paths.appHtml,
+      filter: file => file !== appPage.appHtml,
     });
   });
 }

From 5680091eb7e1685a232e08609019b9673c9a195c Mon Sep 17 00:00:00 2001
From: danzeuss <danvc@zeuss.com>
Date: Sat, 28 Dec 2019 07:02:42 -0300
Subject: [PATCH 6/7] .

---
 .../react-scripts/config/webpack.config.js    | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 803974688b5..677c84b73be 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -156,9 +156,9 @@ module.exports = function(webpackEnv) {
           {
             inject: true,
             template: appPage.appHtml,
-            // filename: `${appPage.name}.html`,
-            // title: appPage.title,
-            // chunks: [appPage.name]
+            filename: `${appPage.name}.html`,
+            title: appPage.title,
+            chunks: [appPage.name],
           },
           isEnvProduction
             ? {
@@ -393,6 +393,30 @@ module.exports = function(webpackEnv) {
                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
                 eslintPath: require.resolve('eslint'),
                 resolvePluginsRelativeTo: __dirname,
+                // @remove-on-eject-begin
+                ignore: process.env.EXTEND_ESLINT === 'true',
+                baseConfig: (() => {
+                  // We allow overriding the config only if the env variable is set
+                  if (process.env.EXTEND_ESLINT === 'true') {
+                    const eslintCli = new eslint.CLIEngine();
+                    let eslintConfig;
+                    try {
+                      eslintConfig = eslintCli.getConfigForFile(
+                        paths.appIndexJs
+                      );
+                    } catch (e) {
+                      console.error(e);
+                      process.exit(1);
+                    }
+                    return eslintConfig;
+                  } else {
+                    return {
+                      extends: [require.resolve('eslint-config-react-app')],
+                    };
+                  }
+                })(),
+                useEslintrc: false,
+                // @remove-on-eject-end
               },
               loader: require.resolve('eslint-loader'),
             },

From 306533f6cfeb44271062691e3c194a57af4d9cdb Mon Sep 17 00:00:00 2001
From: danzeuss <danvc@zeuss.com>
Date: Sat, 28 Dec 2019 19:24:35 -0300
Subject: [PATCH 7/7] Adding documentation

---
 .../docs/adding-multiple-entry-points.md      | 27 +++++++++++++++++++
 docusaurus/website/sidebars.json              |  3 ++-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 docusaurus/docs/adding-multiple-entry-points.md

diff --git a/docusaurus/docs/adding-multiple-entry-points.md b/docusaurus/docs/adding-multiple-entry-points.md
new file mode 100644
index 00000000000..260831adba8
--- /dev/null
+++ b/docusaurus/docs/adding-multiple-entry-points.md
@@ -0,0 +1,27 @@
+---
+id: adding-multiple-entry-points
+title: Adding multiple entry points
+---
+
+Create React App comes with an embedded `index.html` and `index.js` which is shown when you're running the `app` at `http://localhost:3000`. In case you decided to add new `apps` (pages/entry point), please, follow the steps:
+
+## Creating files
+
+Please, create your `.html` and `.js` (Or TypeScript file). The embedded files come inside `public` and `src` folder.
+
+## Add the new app in package.json
+
+After creating the `app` files, you must specify it into the `appPages` inside the `package.json`. It should shape the following structure:
+
+```json
+{
+  "name": "login",
+  "title": "login",
+  "appHtml": "public/login.html",
+  "appIndexJs": "src/login"
+}
+```
+
+## Accessing the new app
+
+Run `npm start` or `yarn start` and change the URL by referencing the new page, like `http://localhost:3000/login.html`
diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json
index f51541db097..edb45d18d51 100644
--- a/docusaurus/website/sidebars.json
+++ b/docusaurus/website/sidebars.json
@@ -47,6 +47,7 @@
     ],
     "Deployment": ["deployment"],
     "Advanced Usage": [
+      "adding-multiple-entry-points",
       "custom-templates",
       "can-i-use-decorators",
       "pre-rendering-into-static-html-files",
@@ -55,4 +56,4 @@
     ],
     "Support": ["troubleshooting"]
   }
-}
+}
\ No newline at end of file