From 4d05e5b71ef65c422b546c95c0700c8603a6b4a4 Mon Sep 17 00:00:00 2001
From: Abhishek Katiyar <abhishek.katiyar@navi.com>
Date: Wed, 27 May 2020 05:33:27 +0530
Subject: [PATCH] [ch11577] | Abhishek | Add webpack configuration for local
 development environment and add docker-compose.yaml

---
 .gitignore                                |  1 +
 Dockerfile                                |  4 +-
 babel.config.js                           |  7 ---
 config.js                                 |  7 +++
 env-config.js => config.template.js       |  0
 docker-compose.yml => docker-compose.yaml |  4 +-
 entrypoint.sh                             | 10 ++---
 index.html                                | 41 ++++++++++++++++++
 package.json                              |  6 ++-
 public/index.html                         |  5 +--
 webpack.config.js                         | 53 +++++++++++++++++++++++
 11 files changed, 116 insertions(+), 22 deletions(-)
 delete mode 100644 babel.config.js
 create mode 100644 config.js
 rename env-config.js => config.template.js (100%)
 rename docker-compose.yml => docker-compose.yaml (71%)
 create mode 100644 index.html
 create mode 100644 webpack.config.js

diff --git a/.gitignore b/.gitignore
index 0e13bfc..c4b78b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ scripts/flow/*/.flowconfig
 _SpecRunner.html
 __benchmarks__
 build/
+dist/
 remote-repo/
 coverage/
 .module-cache
diff --git a/Dockerfile b/Dockerfile
index f1a2d62..310e4d8 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,7 +6,7 @@ RUN yarn test --forceExit
 RUN yarn build
 
 FROM nginx:1.16.0-alpine
-COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html
 RUN adduser -u 4000 non-root-user -D ''
 RUN chown -R 4000:4000 /var/cache/nginx \
     && chown -R 4000:4000 /usr/share/nginx \
@@ -19,7 +19,7 @@ RUN rm /etc/nginx/conf.d/default.conf
 USER 4000
 COPY nginx/nginx.conf /etc/nginx/conf.d
 COPY entrypoint.sh /
-COPY env-config.js /usr/share/nginx/html
+COPY config.template.js /usr/share/nginx/html/config.js
 USER 0
 
 RUN chmod +x /entrypoint.sh
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index 771eb4b..0000000
--- a/babel.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// babel.config.js
-module.exports = {
-    presets: [
-        ['@babel/preset-env', {targets: {node: 'current'}}],
-        +    '@babel/preset-typescript',
-    ],
-};
\ No newline at end of file
diff --git a/config.js b/config.js
new file mode 100644
index 0000000..a7b5b94
--- /dev/null
+++ b/config.js
@@ -0,0 +1,7 @@
+window.config = {
+    ISSUER: 'https://navi-2020.okta.com',
+    REDIRECT_URI: 'http://localhost:3000/implicit/callback',
+    CLIENT_ID: '0oaa0a9up1F7lQc5A4x6',
+    SCOPE: 'openid groups',
+    RESPONSE_TYPE: 'id_token',
+}
diff --git a/env-config.js b/config.template.js
similarity index 100%
rename from env-config.js
rename to config.template.js
diff --git a/docker-compose.yml b/docker-compose.yaml
similarity index 71%
rename from docker-compose.yml
rename to docker-compose.yaml
index 0df49ba..a6fa6f1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yaml
@@ -6,8 +6,8 @@ services:
     ports:
       - 3000:8080
     environment:
-      - ISSUER=https://navi.okta.com
-      - REDIRECT_URI=https://navi.okta.com/implicit/callback
+      - ISSUER=https://navi-2020.okta.com
+      - REDIRECT_URI=http://localhost:3000/implicit/callback
       - CLIENT_ID=0oaa0a9up1F7lQc5A4x6
       - SCOPE=openid groups
       - RESPONSE_TYPE=id_token
\ No newline at end of file
diff --git a/entrypoint.sh b/entrypoint.sh
index eed59cb..7a2b4c5 100755
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -1,9 +1,9 @@
 #!/bin/sh
 
-sed -i "s~APP_ISSUER~${ISSUER}~g" /usr/share/nginx/html/env-config.js
-sed -i "s~APP_REDIRECT_URI~${REDIRECT_URI}~g" /usr/share/nginx/html/env-config.js
-sed -i "s~APP_CLIENT_ID~${CLIENT_ID}~g" /usr/share/nginx/html/env-config.js
-sed -i "s~APP_SCOPE~${SCOPE}~g" /usr/share/nginx/html/env-config.js
-sed -i "s~APP_RESPONSE_TYPE~${RESPONSE_TYPE}~g" /usr/share/nginx/html/env-config.js
+sed -i "s~APP_ISSUER~${ISSUER}~g" /usr/share/nginx/html/config.js
+sed -i "s~APP_REDIRECT_URI~${REDIRECT_URI}~g" /usr/share/nginx/html/config.js
+sed -i "s~APP_CLIENT_ID~${CLIENT_ID}~g" /usr/share/nginx/html/config.js
+sed -i "s~APP_SCOPE~${SCOPE}~g" /usr/share/nginx/html/config.js
+sed -i "s~APP_RESPONSE_TYPE~${RESPONSE_TYPE}~g" /usr/share/nginx/html/config.js
 
 exec "$@"
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a4ba972
--- /dev/null
+++ b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script type="application/javascript" src="/config.js"></script>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/package.json b/package.json
index bd49d5b..5d8c56f 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,10 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "webpack-build": "webpack --verbose --config webpack.config.js src",
+    "clean": "rm -rf dist",
+    "build": "yarn run clean && yarn run webpack-build",
+    "start": "yarn run clean && webpack-dev-server --mode development --devtool inline-source-map",
     "test": "jest",
     "eject": "react-scripts eject"
   },
diff --git a/public/index.html b/public/index.html
index c565835..a4ba972 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,21 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="application/javascript" src="/env-config.js"></script>
+    <script type="application/javascript" src="/config.js"></script>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..4482aaa
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,53 @@
+const path = require('path');
+const HtmlPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+    entry: {
+        main: './src/index.tsx',
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss'],
+    },
+    devServer: {
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        hot: true,
+        port: 3000,
+    },
+    output: {
+        path: path.join(__dirname, '/dist'),
+        filename: `bundle.js?t=${new Date().getTime()}`,
+        publicPath: '/',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'awesome-typescript-loader',
+            },
+            {
+                test: /\.css$/,
+                loader: ExtractTextPlugin.extract('css-loader'),
+            },
+            {
+                test: /\.(sass|scss)$/,
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader!sass-loader',
+                }),
+            },
+        ],
+    },
+    plugins: [
+        new ExtractTextPlugin(`bundle.css?t=${new Date().getTime()}`),
+        new HtmlPlugin({
+            template: './index.html',
+        }),
+        new CopyPlugin([{ from: 'config.js' }]),
+    ],
+    watchOptions: {
+        ignored: /node_modules/,
+    },
+};
\ No newline at end of file