.dockerignore

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

.vscode/settings.json

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

Dockerfile

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

docker/nginx.conf

@@ -1,21 +0,0 @@
-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.4.3",
+    "@craco/craco": "^6.1.2",
     "@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": "^2.0.0",
+    "craco-less": "^1.17.1",
     "prettier": "^2.3.1",
-    "react-scripts": "5.0.0",
+    "react-scripts": "4.0.3",
-    "typescript": "^4.5.4"
+    "typescript": "^4.1.2"
   }
 }

run-in-docker.sh

@@ -1,9 +0,0 @@
-#!/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

@@ -1,5 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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,10 +1,8 @@
 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'
 
@@ -26,18 +24,6 @@ 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,8 +2,6 @@ const RouteTypes = {
     HOME: "/",
     ABOUT: "/about",
     PROFILE: "/profile",
-    INFO: "/info",
-    RESET: "/reset",
 
     // Auth
     LOGIN: '/login',

src/utils/ls_util.ts

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