Initial React test app

This commit is contained in:
Min Zeya Phyo
2026-01-15 12:26:31 +06:30
commit 5bff2047c8
8 changed files with 208 additions and 0 deletions

4
.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
node_modules/
dist/
.env
*.log

23
Dockerfile Normal file
View File

@@ -0,0 +1,23 @@
# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# Production stage
FROM node:20-alpine
WORKDIR /app
RUN npm install -g serve
COPY --from=builder /app/dist ./dist
EXPOSE 3000
CMD ["serve", "-s", "dist", "-l", "3000"]

12
index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Test App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

22
package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "react-test",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"start": "serve -s dist -l 3000"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@vitejs/plugin-react": "^4.2.0",
"serve": "^14.2.0",
"vite": "^5.0.0"
}
}

47
src/App.jsx Normal file
View File

@@ -0,0 +1,47 @@
import { useState, useEffect } from 'react'
function App() {
const [time, setTime] = useState(new Date().toLocaleString())
useEffect(() => {
const timer = setInterval(() => {
setTime(new Date().toLocaleString())
}, 1000)
return () => clearInterval(timer)
}, [])
return (
<div className="container">
<h1>React Test Application</h1>
<p className="subtitle">Unity Platform - Coolify Deployment Test</p>
<div className="card">
<h3>Status</h3>
<div className="status ok">
Application: <strong>Running</strong>
</div>
</div>
<div className="card">
<h3>Environment</h3>
<ul>
<li>React Version: <code>18.2.0</code></li>
<li>Build Tool: <code>Vite 5.0</code></li>
<li>Mode: <code>{import.meta.env.MODE}</code></li>
<li>Server Time: <code>{time}</code></li>
</ul>
</div>
<div className="card">
<h3>Features</h3>
<ul>
<li>Hot Module Replacement (HMR)</li>
<li>Fast Refresh</li>
<li>Production optimized build</li>
</ul>
</div>
</div>
)
}
export default App

76
src/index.css Normal file
View File

@@ -0,0 +1,76 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
h1 {
color: white;
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.subtitle {
color: rgba(255,255,255,0.9);
font-size: 1.1rem;
margin-bottom: 30px;
}
.card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
margin-bottom: 20px;
}
.card h3 {
color: #333;
margin-bottom: 15px;
font-size: 1.2rem;
}
.status {
padding: 12px 20px;
border-radius: 8px;
font-size: 1rem;
}
.status.ok {
background: #d4edda;
color: #155724;
}
ul {
list-style: none;
}
li {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
li:last-child {
border-bottom: none;
}
code {
background: #e9ecef;
padding: 3px 8px;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9em;
}

10
src/main.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

14
vite.config.js Normal file
View File

@@ -0,0 +1,14 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
host: '0.0.0.0',
port: 3000
},
preview: {
host: '0.0.0.0',
port: 3000
}
})