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.formatOnSave": true
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[dockerfile]": {
"editor.defaultFormatter": "ms-azuretools.vscode-docker"
}
}

View File

@ -2,10 +2,11 @@
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 ./
@ -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"

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 = {
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',
},
},
},
}

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 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',

View File

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

View File

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