|
| 1 | +## Inkubator IT — Vite + React Template |
| 2 | + |
| 3 | +Standardized frontend template for projects in the Inkubator IT GitHub organization. This template is built and maintained by the DevOps team to unify stack choices, local development, containerization, and deployment conventions across client projects. |
| 4 | + |
| 5 | +### Tech stack |
| 6 | +- **Runtime**: Bun (scripts, tooling) |
| 7 | +- **Build tool**: Vite |
| 8 | +- **Framework**: React |
| 9 | +- **Language**: TypeScript |
| 10 | +- **UI**: Tailwind CSS v4 |
| 11 | +- **Icons**: lucide-react |
| 12 | +- **Quality**: Biome (lint & format) |
| 13 | +- **Containerization**: Docker (Nginx static serving) |
| 14 | + |
| 15 | +### Project structure |
| 16 | +``` |
| 17 | +. |
| 18 | +├─ src/ |
| 19 | +│ ├─ assets/ # Static assets (e.g., logos) |
| 20 | +│ ├─ lib/ # Shared utilities |
| 21 | +│ ├─ App.tsx # Root component |
| 22 | +│ ├─ index.css # Global styles (Tailwind v4) |
| 23 | +│ ├─ main.tsx # App bootstrap |
| 24 | +│ └─ vite-env.d.ts # Vite type declarations |
| 25 | +├─ public/ # Public assets copied as-is |
| 26 | +│ └─ vite.svg |
| 27 | +├─ index.html # HTML entry |
| 28 | +├─ vite.config.ts # Vite config (alias `@` → `src`) |
| 29 | +├─ Dockerfile # Multi-stage (Bun build → Nginx serve) |
| 30 | +├─ components.json # UI components registry (if used) |
| 31 | +├─ biome.json # Biome config (lint/format) |
| 32 | +├─ tsconfig.json # TypeScript config |
| 33 | +├─ tsconfig.app.json # TS project references (app) |
| 34 | +├─ tsconfig.node.json # TS project references (node build) |
| 35 | +├─ package.json # Scripts and deps |
| 36 | +└─ bun.lock # Bun lockfile |
| 37 | +``` |
| 38 | + |
| 39 | +### Prerequisites |
| 40 | +- **Bun** installed locally (`bun --version`) |
| 41 | +- **Docker** (optional, for container builds) |
| 42 | + |
| 43 | +### Getting started (local development) |
| 44 | +1) Create a new repository using this template in the Inkubator IT organization. |
| 45 | +2) Clone your new repository. |
| 46 | +3) Copy the `.env.example` file to `.env` and fill in the values. |
| 47 | +4) Install dependencies: |
| 48 | +```sh |
| 49 | +bun install |
| 50 | +``` |
| 51 | +5) Start the dev server (hot reload): |
| 52 | +```sh |
| 53 | +bun run dev |
| 54 | +``` |
| 55 | +6) Open `http://localhost:5173` (default Vite port). |
| 56 | + |
| 57 | +### Environment variables |
| 58 | +Vite reads env files and exposes variables that start with `VITE_` to the client. |
| 59 | + |
| 60 | +- Place env files at the project root: `.env`, `.env.development`, etc. |
| 61 | +- Prefix variables with `VITE_`. |
| 62 | + |
| 63 | +Example `.env`: |
| 64 | +```env |
| 65 | +VITE_API_BASE_URL="http://localhost:3000" |
| 66 | +``` |
| 67 | + |
| 68 | +Use in code: |
| 69 | +```ts |
| 70 | +const apiBaseUrl = import.meta.env.VITE_API_BASE_URL as string | undefined; |
| 71 | +``` |
| 72 | + |
| 73 | +### Scripts |
| 74 | +- **dev**: `vite` |
| 75 | +- **build**: `tsc -b && vite build` |
| 76 | +- **preview**: `vite preview` |
| 77 | +- **lint**: `bunx biome lint` |
| 78 | +- **lint:fix**: `bunx biome lint --write` |
| 79 | +- **format**: `bunx biome format --write` |
| 80 | + |
| 81 | +Run examples: |
| 82 | +```sh |
| 83 | +bun run dev |
| 84 | +bun run build |
| 85 | +bun run preview |
| 86 | +``` |
| 87 | + |
| 88 | +### Aliases |
| 89 | +This template sets an import alias for cleaner paths: |
| 90 | + |
| 91 | +- **Alias**: `@` → `./src` (see `vite.config.ts`) |
| 92 | + |
| 93 | +Example: |
| 94 | +```ts |
| 95 | +import { cn } from "@/lib/utils"; |
| 96 | +``` |
| 97 | + |
| 98 | +### Styling |
| 99 | +- Tailwind CSS v4 is preconfigured via `@import "tailwindcss"` in `src/index.css`. |
| 100 | +- Light/dark theme tokens are included. Apply `.dark` on a parent node to switch. |
| 101 | + |
| 102 | +### Run with Docker |
| 103 | +Build a production image (static site served by Nginx): |
| 104 | +```sh |
| 105 | +docker build -t inkubatorit/vite-react-template . |
| 106 | +``` |
| 107 | +Run the container: |
| 108 | +```sh |
| 109 | +docker run --rm -p 8080:80 inkubatorit/vite-react-template |
| 110 | +``` |
| 111 | +Open `http://localhost:8080`. |
| 112 | + |
| 113 | +### Code quality |
| 114 | +This template uses Biome for linting and formatting. Run locally before commits: |
| 115 | +```sh |
| 116 | +bun run lint |
| 117 | +bun run format |
| 118 | +``` |
| 119 | + |
| 120 | +### Deployment notes |
| 121 | +- The production build outputs static files in `dist/`. |
| 122 | +- The provided `Dockerfile` serves `dist/` with Nginx on port `80`. |
| 123 | +- Vite env variables are injected at build time; ensure correct values during `build`. |
| 124 | +- If hosting behind a sub-path, set Vite `base` accordingly in `vite.config.ts`. |
| 125 | + |
| 126 | +### Contributing |
| 127 | +This template is maintained by the **Inkubator IT DevOps** team. Contributions and improvements are welcome via Pull Requests. For significant changes, please open an Issue for discussion first. |
| 128 | + |
| 129 | +### Support |
| 130 | +For questions or support, contact the Inkubator IT DevOps team. |
| 131 | + |
| 132 | +### License |
| 133 | +Copyright (c) Inkubator IT. All rights reserved. |
| 134 | + |
| 135 | + |
0 commit comments