Initial commit from react-vite boilerplate

This commit is contained in:
Min Zeya Phyo
2026-01-20 12:14:35 +06:30
commit 92f4d037b1
19 changed files with 420 additions and 0 deletions

5
.env.example Normal file
View File

@@ -0,0 +1,5 @@
# API Configuration
VITE_API_URL=https://api.example.com
# Feature Flags
VITE_ENABLE_ANALYTICS=false

27
.gitignore vendored Normal file
View File

@@ -0,0 +1,27 @@
# Dependencies
node_modules/
# Build output
dist/
# Environment
.env
.env.local
.env.*.local
# IDE
.idea/
.vscode/
*.swp
*.swo
# OS
.DS_Store
Thumbs.db
# Logs
*.log
npm-debug.log*
# Testing
coverage/

31
Dockerfile Normal file
View File

@@ -0,0 +1,31 @@
# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
# Copy package files
COPY package*.json ./
# Install dependencies
RUN npm ci
# Copy source code
COPY . .
# Build the application
RUN npm run build
# Production stage
FROM nginx:alpine
# Copy custom nginx config
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Copy built assets from builder
COPY --from=builder /app/dist /usr/share/nginx/html
# Expose port
EXPOSE 3000
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

89
README.md Normal file
View File

@@ -0,0 +1,89 @@
# bp-rect
React + Vite + TypeScript + TailwindCSS application.
## Quick Start
```bash
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
```
## Deploy to Unity Infrastructure
### Prerequisites
1. DNS record pointing to Gateway (3.0.22.121)
2. Git repository on Gitea (git.qikbite.asia)
### Deployment Steps
1. **Push to Gitea:**
```bash
git remote add origin https://git.qikbite.asia/git_admin/bp-rect.git
git push -u origin main
```
2. **Create app in Coolify:**
```bash
curl -sk -X POST 'https://coolify.qikbite.asia/api/v1/applications/dockerfile' \
--header 'Authorization: Bearer <COOLIFY_TOKEN>' \
--header 'Content-Type: application/json' \
--data '{
"project_uuid": "r8so044sg4cgcko84o8kgcks",
"server_uuid": "v8s4kw84o00gcocwcwos4k4s",
"destination_uuid": "tg80co08408s04oo80cg80ok",
"environment_name": "production",
"git_repository": "https://git.qikbite.asia/git_admin/bp-rect.git",
"git_branch": "main",
"build_pack": "dockerfile",
"ports_exposes": "3000",
"name": "bp-rect"
}'
```
3. **Add Gateway route** (SSH to 3.0.22.121):
```yaml
# /home/ubuntu/traefik/config/dynamic/services.yml
http:
routers:
bp-rect:
rule: "Host(`bp-rect.qikbite.asia`)"
service: coolify-apps
tls:
certResolver: letsencrypt
entryPoints:
- websecure
```
4. **Verify:** https://bp-rect.qikbite.asia
## Project Structure
```
src/
├── components/ # Reusable UI components
├── pages/ # Route pages
├── hooks/ # Custom React hooks
├── lib/ # Utilities and API clients
└── styles/ # Global styles
```
## Tech Stack
- React 18
- TypeScript
- Vite 5
- TailwindCSS 3
- React Router 6
- TanStack Query
- Zustand (state management)

11
docker-compose.yml Normal file
View File

@@ -0,0 +1,11 @@
# Local development
services:
app:
build: .
ports:
- "3000:3000"
volumes:
- ./src:/app/src
- ./public:/app/public
environment:
- NODE_ENV=development

13
index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bp-rect</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

26
nginx.conf Normal file
View File

@@ -0,0 +1,26 @@
server {
listen 3000;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Gzip compression
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# Handle React Router (SPA)
location / {
try_files $uri $uri/ /index.html;
}
# Cache static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
}

35
package.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "bp-rect",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.0",
"@tanstack/react-query": "^5.8.0",
"axios": "^1.6.0",
"zustand": "^4.4.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.53.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
"typescript": "^5.2.2",
"vite": "^5.0.0"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

14
src/App.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import NotFound from './pages/NotFound'
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<NotFound />} />
</Routes>
)
}
export default App

25
src/main.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import App from './App'
import './styles/index.css'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 1000 * 60 * 5, // 5 minutes
retry: 1,
},
},
})
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<App />
</BrowserRouter>
</QueryClientProvider>
</React.StrictMode>,
)

32
src/pages/Home.tsx Normal file
View File

@@ -0,0 +1,32 @@
export default function Home() {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
<div className="text-center">
<h1 className="text-4xl font-bold text-gray-900 mb-4">
Welcome to bp-rect
</h1>
<p className="text-lg text-gray-600 mb-8">
Your React + Vite application is running!
</p>
<div className="space-x-4">
<a
href="https://vitejs.dev"
target="_blank"
rel="noopener noreferrer"
className="inline-block px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"
>
Vite Docs
</a>
<a
href="https://react.dev"
target="_blank"
rel="noopener noreferrer"
className="inline-block px-6 py-3 bg-white text-indigo-600 border border-indigo-600 rounded-lg hover:bg-indigo-50 transition"
>
React Docs
</a>
</div>
</div>
</div>
)
}

18
src/pages/NotFound.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { Link } from 'react-router-dom'
export default function NotFound() {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
<p className="text-xl text-gray-600 mb-8">Page not found</p>
<Link
to="/"
className="inline-block px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"
>
Go Home
</Link>
</div>
</div>
)
}

15
src/styles/index.css Normal file
View File

@@ -0,0 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
}

9
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,9 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_URL: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

25
tsconfig.json Normal file
View File

@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
tsconfig.node.json Normal file
View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

18
vite.config.ts Normal file
View File

@@ -0,0 +1,18 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
host: true,
},
preview: {
port: 3000,
host: true,
},
build: {
outDir: 'dist',
sourcemap: false,
},
})