Compare commits

..

4 Commits
master ... main

14 changed files with 198 additions and 20 deletions

7
.dockerignore Normal file
View File

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

View File

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

31
Dockerfile Normal file
View File

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

View File

@ -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',
},
},
},
}
}
}
};

21
docker/nginx.conf Normal file
View File

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

View File

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

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