Add app info, configs, reset and docker

This commit is contained in:
Sambo Chea 2021-11-10 19:54:56 +07:00
parent 025ff76a20
commit 3d4e0e7664
Signed by untrusted user: sombochea
GPG Key ID: 3C7CF22A05D95490
11 changed files with 146 additions and 19 deletions

View File

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

View File

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

View File

@ -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 = { module.exports = {
webpack: { webpack: {
alias: { alias: {
'@': path.resolve(__dirname, 'src/') '@': path.resolve(__dirname, 'src/'),
} },
}, plugins: {
jest: { add: [
configure: { new webpack.DefinePlugin({
moduleNameMapper: { 'process.env': {
'^@(.*)$': '<rootDir>/src$1' 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',
},
},
},
}

9
run-in-docker.sh Executable file
View File

@ -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

5
src/app.config.ts Normal file
View File

@ -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

View File

25
src/pages/Info/index.tsx Normal file
View File

@ -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>
)
}

23
src/pages/Reset/index.tsx Normal file
View File

@ -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

View File

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

View File

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

View File

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