Added dashboard

Author: InsideAmber

.github/workflows/dashboard.yml

@@ -0,0 +1,34 @@
+name: deploy-dashboard
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'packages/dashboard/**'
+
+defaults:
+  run:
+    working-directory: packages/dashboard
+
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v2
+            - run : npm install
+            - run : npm run build
+
+            - uses: shinyinc/action-aws-cli@v1.2
+            - run: aws s3 sync dist s3://${{secrets.AWS_S3_BUCKET_NAME}}/dashboard/latest
+              env:
+                AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+            - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths "/dashboard/latest/remteEntry.js"
+              env:
+                AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} 
+                AWS_DEFAULT_REGION: us-east-1
+          

packages/container/config/webpack.dev.js

@@ -7,7 +7,7 @@ const packageJson = require('../package.json') // Import package.json to get sha
 const devConfig = {
     mode: 'development', // Set the mode to development
     output:{
-        publicPath: 'http://localhost:8080' // Set public path for development
+        publicPath: 'http://localhost:8080/' // Set public path for development
     },
     devServer:{
         port:8080,
@@ -20,7 +20,8 @@ const devConfig = {
             name: 'container',
             remotes:{
                 marketing: 'marketing@http://localhost:8081/remoteEntry.js', // Remote module from marketing
-                auth: 'auth@http://localhost:8082/remoteEntry.js' // Remote module from auth
+                auth: 'auth@http://localhost:8082/remoteEntry.js', // Remote module from auth
+                dashboard: 'dashboard@http://localhost:8083/remoteEntry.js' // Remote module from dashboard
 
             },
             shared:packageJson.dependencies // Shared dependencies

packages/container/config/webpack.prod.js

@@ -17,7 +17,7 @@ const prodConfig = {
             remotes:{
                 'marketing': `marketing@${domain}/marketing/latest/remoteEntry.js`,
                 'auth': `auth@${domain}/auth/latest/remoteEntry.js`,
-                // 'dashboard': `dashboard@${domain}/dashboard/remoteEntry.js`
+                'dashboard': `dashboard@${domain}/dashboard/latest/remoteEntry.js`
             },
             shared: packageJson.dependencies,
         })

packages/container/src/App.js

@@ -1,25 +1,36 @@
-import React, {lazy, Suspense, useState} from "react";
-import { BrowserRouter,Route,Switch} from "react-router-dom";
+import React, {lazy, Suspense, useState,useEffect} from "react";
+import { Router,Route,Switch,Redirect} from "react-router-dom";
 import {
   StylesProvider,
   createGenerateClassName,
 } from "@material-ui/core/styles";
+import { createBrowserHistory } from "history";
 
 import Progress from "./components/Progress";
 import Header from "./components/Header";
 
 const MarketingLazy = lazy(() => import("./components/MarketingApp"));
 const AuthLazy = lazy(() => import("./components/AuthApp"));
+const DashboardLazy = lazy(() => import("./components/DashboardApp"));
 
 
 const generateClassName = createGenerateClassName({
   productionPrefix: "co", // co for container
 });
 
+const history = createBrowserHistory();
+
 export default () => {
 const [isSignedIn,setIsSignedIn] = useState(false);
+
+useEffect(()=>{
+  if(isSignedIn){
+    history.push('/dashboard');
+  }
+},[isSignedIn]);
+
   return (
-    <BrowserRouter>
+    <Router history={history}>
       <StylesProvider generateClassName={generateClassName}>
         <div>
           <Header onSignOut={()=>setIsSignedIn(false)} isSignedIn={isSignedIn}/>
@@ -30,11 +41,15 @@ const [isSignedIn,setIsSignedIn] = useState(false);
             <Route path ="/auth">
             <AuthLazy onSignIn={()=>setIsSignedIn(true)}/>
             </Route>
+            <Route path ="/dashboard">
+            { !isSignedIn && <Redirect to ="/"/>}
+            <DashboardLazy />
+            </Route>
             <Route path ="/" component ={MarketingLazy}/>
           </Switch>
           </Suspense>
         </div>
       </StylesProvider>
-    </BrowserRouter>
+    </Router>
   );
 };

packages/container/src/components/DashboardApp.js

@@ -0,0 +1,12 @@
+import { mount } from "dashboard/DashboardApp" //dashboard is remote module name and DashboardApp is the exposed module in marketing dev config
+import React, { useRef, useEffect } from "react";
+
+export default () => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+   mount(ref.current)
+  },[]);
+
+  return <div ref={ref} />;
+};

packages/dashboard/config/webpack.common.js

@@ -0,0 +1,45 @@
+const { VueLoaderPlugin } = require("vue-loader");
+
+module.exports = {
+  entry: "./src/index.js", // Entry point of the application
+  output: {
+    filename: "[name].[contenthash].js", // Output bundle file name
+  },
+  resolve: {
+    extensions: [".js", ".vue"], // Resolve these file extensions
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|gif|woff|svg|eot|ttf)$/i, // Match image files
+        use: [
+          {
+            loader: "file-loader", // Use file-loader to handle image files
+          },
+        ],
+      },
+      {
+        test: /\.vue$/, // Match Vue single-file components
+        use: "vue-loader", // Use Vue loader to process .vue files
+      },
+      {
+        test: /\.scss|\.css$/,
+        use: ['vue-style-loader', 'style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.js$/, // Match JavaScript files
+        exclude: /node_modules/, // Exclude node_modules directory with babel-loader
+        use: {
+          loader: "babel-loader", // Use Babel loader to transpile JavaScript files
+          options: {
+            presets: ["@babel/preset-env"], // Use presets for modern JavaScript and React
+            plugins: ["@babel/plugin-transform-runtime"], // Use plugin to optimize runtime code
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new VueLoaderPlugin(), //Plugin to handle Vue files
+  ],
+};

packages/dashboard/config/webpack.dev.js

@@ -0,0 +1,36 @@
+const {merge} = require('webpack-merge');    //To merge the common and development configurations
+const htmlWebpackPlugin = require('html-webpack-plugin');
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+const commonConfig = require('./webpack.common'); // Import common configuration
+const packageJson = require('../package.json') // Import package.json to get shared dependencies
+
+const devConfig = {
+    mode: 'development', // Set the mode to development
+    output:{
+        publicPath: 'http://localhost:8083/' // Set public path for development
+    },
+    devServer:{
+        port:8083,
+        historyApiFallback: {
+            index: '/index.html' // Fallback to index.html for SPA routing
+        },
+        headers:{
+            'Access-Control-Allow-Origin':'*', // Allow cross-origin requests
+        }
+    },
+    plugins:[
+        new ModuleFederationPlugin({
+            name: 'dashboard',
+            filename:'remoteEntry.js',
+            exposes:{
+                './DashboardApp':'./src/bootstrap'
+            },
+            shared:packageJson.dependencies // Shared dependencies
+        }),
+        new htmlWebpackPlugin({
+            template: './public/index.html', // Template HTML file
+        })
+    ]
+}
+
+module.exports = merge(commonConfig, devConfig); // Merge common and development configurations

packages/dashboard/config/webpack.prod.js

@@ -0,0 +1,25 @@
+const {merge} = require('webpack-merge');
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+const commonConfig = require('./webpack.common.js');
+const packageJson = require('../package.json');
+
+const prodConfig = {
+    mode: 'production',
+    output: { 
+        filename: '[name].[contenthash].js', // Use contenthash for better caching
+        publicPath: '/dashboard/latest/'  // Set public path for production
+    },
+    plugins: [
+        new ModuleFederationPlugin({        
+            name: 'dashboard',
+            filename: 'remoteEntry.js',
+            exposes:{
+                './DashboardApp':'./src/bootstrap'
+            },
+            shared:packageJson.dependencies, // Shared dependencies
+        }),
+    ]
+}
+
+
+module.exports = merge(commonConfig, prodConfig); // Merge common and production configurations