update webpack config

ForgeRock · Dec 5, 2023 · 87ab05f · 87ab05f
1 parent a69283f
commit 87ab05f
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 149 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,6 @@ node_modules
 .angular
 todo-api/todos/*
 todo-api/users/*
+!reactjs-todo/public/index.html
+!reactjs-todo/public/README.md
+!reactjs-todo/public/callback/*
diff --git a/reactjs-todo/client/styles/index.scss b/reactjs-todo/client/styles/index.scss
@@ -1,33 +1,33 @@
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
 @import 'bootstrap/scss/mixins';
 
 @import 'custom-variables';
 
 @import 'bootstrap/scss/maps';
-@import "bootstrap/scss/utilities";
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/containers';
+@import 'bootstrap/scss/grid';
 
+@import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/popover';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/transitions';
 
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/transitions";
+@import 'bootstrap/scss/helpers';
+@import 'bootstrap/scss/utilities/api';
 
-@import "bootstrap/scss/helpers";
-@import "bootstrap/scss/utilities/api";
-
-@import 'custom-styles';
+@import 'custom-styles';
diff --git a/reactjs-todo/public/index.html b/reactjs-todo/public/index.html
@@ -7,135 +7,67 @@
 This software may be modified and distributed under the terms
 of the MIT license. See the LICENSE file for details.
 -->
-
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="57x57"
-      href="https://www.forgerock.com/ico/apple-touch-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="114x114"
-      href="https://www.forgerock.com/ico/apple-touch-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="72x72"
-      href="https://www.forgerock.com/ico/apple-touch-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="144x144"
-      href="https://www.forgerock.com/ico/apple-touch-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="60x60"
-      href="https://www.forgerock.com/ico/apple-touch-icon-60x60.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="120x120"
-      href="https://www.forgerock.com/ico/apple-touch-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="76x76"
-      href="https://www.forgerock.com/ico/apple-touch-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      sizes="152x152"
-      href="https://www.forgerock.com/ico/apple-touch-icon-152x152.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="https://www.forgerock.com/ico/favicon-196x196.png"
-      sizes="196x196"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="https://www.forgerock.com/ico/favicon-96x96.png"
-      sizes="96x96"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="https://www.forgerock.com/ico/favicon-32x32.png"
-      sizes="32x32"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="https://www.forgerock.com/ico/favicon-16x16.png"
-      sizes="16x16"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="https://www.forgerock.com/ico/favicon-128.png"
-      sizes="128x128"
-    />
+<head>
+  <meta charset="utf-8" />
+  <meta name="description" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="apple-touch-icon-precomposed" sizes="57x57"
+    href="https://www.forgerock.com/ico/apple-touch-icon-57x57.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="114x114"
+    href="https://www.forgerock.com/ico/apple-touch-icon-114x114.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="72x72"
+    href="https://www.forgerock.com/ico/apple-touch-icon-72x72.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="144x144"
+    href="https://www.forgerock.com/ico/apple-touch-icon-144x144.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="60x60"
+    href="https://www.forgerock.com/ico/apple-touch-icon-60x60.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="120x120"
+    href="https://www.forgerock.com/ico/apple-touch-icon-120x120.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="76x76"
+    href="https://www.forgerock.com/ico/apple-touch-icon-76x76.png" />
+  <link rel="apple-touch-icon-precomposed" sizes="152x152"
+    href="https://www.forgerock.com/ico/apple-touch-icon-152x152.png" />
+  <link rel="icon" type="image/png" href="https://www.forgerock.com/ico/favicon-196x196.png" sizes="196x196" />
+  <link rel="icon" type="image/png" href="https://www.forgerock.com/ico/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/png" href="https://www.forgerock.com/ico/favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="https://www.forgerock.com/ico/favicon-16x16.png" sizes="16x16" />
+  <link rel="icon" type="image/png" href="https://www.forgerock.com/ico/favicon-128.png" sizes="128x128" />
+
+  <title>ForgeRock: A Sample React (Web) Todo App</title>
+
+  <link href="app.css" rel="stylesheet" crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap"
+    rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+</head>
 
-    <title>ForgeRock: A Sample React (Web) Todo App</title>
+<body>
+  <div id="root" class="cstm_root"></div>
+  <script src="./app.js"></script>
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap"
-      rel="stylesheet"
-    />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-  </head>
+  <!-- Import Bootstrap scripts -->
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dom/data.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dom/event-handler.js"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dom/manipulator.js"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dom/selector-engine.js"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/base-component.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dropdown.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/collapse.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/modal.js" crossorigin="anonymous"></script>
 
-  <body>
-    <div id="root" class="cstm_root"></div>
+  <!-- Import application script -->
+  <script src="app.js"></script>
+</body>
 
-    <!-- Import Bootstrap scripts -->
-    <script
-      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dom/data.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dom/event-handler.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dom/manipulator.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dom/selector-engine.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/base-component.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/dropdown.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/collapse.js"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/js/dist/modal.js"
-      crossorigin="anonymous"
-    ></script>
-  </body>
-</html>
+</html>
diff --git a/reactjs-todo/webpack.config.js b/reactjs-todo/webpack.config.js
@@ -32,6 +32,7 @@ module.exports = () => {
     output: {
       path: path.resolve(__dirname, 'public'),
       filename: '[name].js',
+      publicPath: '/',
     },
     // Dictates some behavior in Webpack, "development" is a bit quicker
     mode: DEVELOPMENT === 'true' ? 'development' : 'production',
@@ -88,10 +89,12 @@ module.exports = () => {
       ],
     },
     devServer: {
+      allowedHosts: ['localhost', 'react.example.com', '.example.com'],
+      https: true,
       client: {
         overlay: false,
       },
-      port: process.env.PORT || 8443,
+      port: 8443,
     },
     plugins: [
       new MiniCssExtractPlugin(),