Add app info, configs, reset and docker

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "[dockerfile]": {
+        "editor.defaultFormatter": "ms-azuretools.vscode-docker"
+    }
 }

Dockerfile

@@ -2,11 +2,12 @@
 FROM cubetiq/calpine-node AS builder
 
 RUN apk update && \
+    # For build commit hash in "process.env.COMMIT_ID"
+    apk add git && \
     apk add tzdata && \
     cp /usr/share/zoneinfo/Asia/Phnom_Penh /etc/localtime && \
-    echo "Asia/Phnom_Penh" > /etc/timezone && \
-    apk del tzdata
-    
+    echo "Asia/Phnom_Penh" > /etc/timezone
+
 WORKDIR /app
 COPY package.json ./
 # Set custom registry for npm registry (from cubetiq local server)
@@ -15,6 +16,10 @@ RUN yarn
 COPY . .
 RUN yarn build
 
+# Clean up unused packages
+RUN apk del tzdata && \
+    apk del git
+
 # Build production image
 FROM nginx:alpine
 LABEL maintainer="sombochea@cubetiqs.com"

craco.config.js

@@ -1,16 +1,53 @@
-const path = require('path');
+const path = require('path')
+const webpack = require('webpack')
+const npmPackage = require('./package.json')
+const { v4: uuidv4 } = require('uuid')
+const { execSync } = require('child_process')
+
+// Get the last commit id/log
+const gitFetchCommitIdCommand = 'git rev-parse HEAD'
+
+// Execute the command
+const fetchGitCommitId = () => {
+    try {
+        return execSync(gitFetchCommitIdCommand).toString().trim()
+    } catch (e) {
+        console.error(e)
+        return '-1'
+    }
+}
+
+// get current date (build date time)
+const today = new Date()
+
+// get date as version suffix: 10112021
+const dateVersion = `${today.getDay()}${today.getMonth()}${today.getFullYear()}`
 
 module.exports = {
-  webpack: {
-    alias: {
-      '@': path.resolve(__dirname, 'src/')
-    }
-  },
-  jest: {
-    configure: {
-      moduleNameMapper: {
-        '^@(.*)$': '<rootDir>/src$1'
-      }
-    }
-  }
-};
+    webpack: {
+        alias: {
+            '@': path.resolve(__dirname, 'src/'),
+        },
+        plugins: {
+            add: [
+                new webpack.DefinePlugin({
+                    'process.env': {
+                        PACKAGE_NAME: `"${npmPackage.name}"`,
+                        PACKAGE_VERSION:
+                            '"' + npmPackage.version + '-' + dateVersion + '"',
+                        BUILD_NUMBER: '"' + uuidv4() + '"',
+                        BUILD_DATE: '"' + today.toLocaleString() + '"',
+                        COMMIT_ID: '"' + fetchGitCommitId() + '"',
+                    },
+                }),
+            ],
+        },
+    },
+    jest: {
+        configure: {
+            moduleNameMapper: {
+                '^@(.*)$': '<rootDir>/src$1',
+            },
+        },
+    },
+}

run-in-docker.sh

@@ -0,0 +1,9 @@
+#!/bin/sh -e
+
+echo "Building docker image..."
+docker build . -t myreactapp:latest
+
+echo "Running docker image..."
+docker run --cpus=".1" --memory="5m" --rm -it -p 3003:3000 myreactapp:latest
+
+# Now you can access the app at http://localhost:3003

src/app.config.ts

@@ -0,0 +1,5 @@
+export const APP_NAME = process.env.PACKAGE_NAME
+export const APP_VERSION = process.env.PACKAGE_VERSION
+export const APP_BUILD_NUMBER = process.env.BUILD_NUMBER
+export const APP_BUILD_DATE = process.env.BUILD_DATE
+export const APP_COMMIT_ID = process.env.COMMIT_ID

src/pages/Info/index.tsx

@@ -0,0 +1,25 @@
+import {
+    APP_BUILD_DATE,
+    APP_BUILD_NUMBER,
+    APP_COMMIT_ID,
+    APP_NAME,
+    APP_VERSION,
+} from '@/app.config'
+import { RouteTypes } from '@/routes/types'
+import './index.less'
+
+export default function Info() {
+    return (
+        <div>
+            <h1>App Info</h1>
+            <p>App name: {APP_NAME}</p>
+            <p>App version: {APP_VERSION}</p>
+            <p>App build number: {APP_BUILD_NUMBER}</p>
+            <p>App build date: {APP_BUILD_DATE}</p>
+            <p> App commit id: {APP_COMMIT_ID}</p>
+
+            <br />
+            <a href={RouteTypes.RESET}>Reset</a>
+        </div>
+    )
+}

src/pages/Reset/index.tsx

@@ -0,0 +1,23 @@
+import { RouteTypes } from '@/routes/types'
+import { clearStorage } from '@/utils/ls_util'
+import { useEffect } from 'react'
+import { Redirect } from 'react-router'
+
+const Reset = () => {
+    const clearAllCaches = () => {
+        caches.keys().then((cacheNames) => {
+            cacheNames.forEach((cacheName) => {
+                caches.delete(cacheName).then((r) => console.log('Caches cleared', r))
+            })
+        })
+    }
+    useEffect(() => {
+        clearStorage()
+        sessionStorage.clear()
+        clearAllCaches()
+    }, [])
+
+    return <Redirect to={RouteTypes.HOME} />
+}
+
+export default Reset

src/routes/routes.tsx

@@ -1,8 +1,10 @@
 import About from '@/pages/About'
 import NotFound from '@/pages/Error/404'
 import Home from '@/pages/Home'
+import Info from '@/pages/Info'
 import Login from '@/pages/Login'
 import Profile from '@/pages/Profile'
+import Reset from '@/pages/Reset'
 import { CustomRouteProps } from '@/routes/interfaces'
 import { RouteTypes } from '@/routes/types'
 
@@ -24,6 +26,18 @@ const routes: CustomRouteProps[] = [
         path: RouteTypes.ABOUT,
         component: () => <About />,
     },
+    {
+        exact: true,
+        key: 'info',
+        path: RouteTypes.INFO,
+        component: () => <Info />,
+    },
+    {
+        exact: true,
+        key: 'reset',
+        path: RouteTypes.RESET,
+        component: () => <Reset />,
+    },
     {
         exact: true,
         key: 'profile',

src/routes/types.ts

@@ -2,6 +2,8 @@ const RouteTypes = {
     HOME: "/",
     ABOUT: "/about",
     PROFILE: "/profile",
+    INFO: "/info",
+    RESET: "/reset",
 
     // Auth
     LOGIN: '/login',

src/utils/ls_util.ts

@@ -4,4 +4,8 @@ export const setStorage = (key: string, value?: any) => {
 
 export const getStorage = (key: string, defaultValue?: string): (string | undefined | null) => {
     return localStorage.getItem(key) ?? defaultValue
+}
+
+export const clearStorage = () => {
+    return localStorage.clear()
 }