Upgrade craco, craco-less, create react app and typescript and updated configs

.dockerignore

@@ -0,0 +1,7 @@
+.vscode/
+node_modules/
+npm-debug.log
+dist/
+build/
+test/
+yarn-error.log

.vscode/settings.json

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

Dockerfile

@@ -0,0 +1,31 @@
+# Build application
+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
+
+WORKDIR /app
+COPY package.json ./
+# Set custom registry for npm registry (from cubetiq local server)
+RUN yarn config set registry https://r.ctdn.net
+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"
+
+WORKDIR  /usr/share/nginx/html
+COPY --from=builder /app/build/ /usr/share/nginx/html
+COPY --from=builder /app/docker/nginx.conf /etc/nginx/conf.d
+RUN rm /etc/nginx/conf.d/default.conf
+EXPOSE 80

craco.config.js

@@ -1,16 +1,50 @@
-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/')
-    }
+            '@': path.resolve(__dirname, 'src/'),
+        },
+        plugins: {
+            add: [
+                new webpack.DefinePlugin({
+                    'process.env.PACKAGE_NAME': `"${npmPackage.name}"`,
+                    'process.env.PACKAGE_VERSION': `"${dateVersion}"`,
+                    'process.env.BUILD_NUMBER': `"${uuidv4()}"`,
+                    'process.env.BUILD_DATE': `"${today.toLocaleString()}"`,
+                    'process.env.COMMIT_ID': `"${fetchGitCommitId()}"`,
+                }),
+            ],
+        },
     },
     jest: {
         configure: {
             moduleNameMapper: {
-        '^@(.*)$': '<rootDir>/src$1'
+                '^@(.*)$': '<rootDir>/src$1',
+            },
+        },
+    },
 }
-    }
-  }
-};

docker/nginx.conf

@@ -0,0 +1,21 @@
+server {
+    listen 80;
+    # serve static files
+    location ~ ^/(images|javascript|js|css|flash|media|static)/  {
+        root   /usr/share/nginx/html;
+        expires 30d;
+    }
+
+    # serve default location
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

package.json

@@ -43,7 +43,7 @@
     ]
   },
   "devDependencies": {
-    "@craco/craco": "^6.1.2",
+    "@craco/craco": "^6.4.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -52,9 +52,9 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
-    "craco-less": "^1.17.1",
+    "craco-less": "^2.0.0",
     "prettier": "^2.3.1",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2"
+    "react-scripts": "5.0.0",
+    "typescript": "^4.5.4"
   }
 }

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

@@ -5,3 +5,7 @@ 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()
+}