bun-react-template

Шаблон для React-приложений. Статический SPA без бэкенда, разворачивается на GitHub Pages.

---

Создание нового проекта

Быстрый способ — скрипт new-project.sh

new-project.sh хранится рядом с папками проектов (в 018_TS/), не внутри репозитория шаблона.

Первоначальная настройка — один раз:

# Находясь в 018_TS/
chmod +x new-project.sh

Запуск для каждого нового проекта:

./new-project.sh

Скрипт запросит параметры и выполнит все шаги автоматически:

┌──────────────────────────────────────────┐
│   Новый проект из bun-react-template     │
└──────────────────────────────────────────┘

  Имя репозитория  (slug, напр. my-app):              my-app
  Номер директории (NNN) [003]:                        ↵  (подставляется автоматически)
  Название проекта (display name) [my-app]:            My App
  Описание репозитория (необязательно):                Описание

  ┌─ Параметры ──────────────────────────────────────────────────┐
  │ Репозиторий:  ssh://git@forgejo.butorov.cc:222/bap/my-app.git
  │ Директория:   003_my-app
  │ Путь:         /…/018_TS/003_my-app
  │ Название:     My App
  └──────────────────────────────────────────────────────────────┘

  Продолжить? [y/N]:

Нотация директорий: NNN_repo-name, где NNN — трёхзначный порядковый номер.
Скрипт автоматически определяет следующий свободный номер из существующих папок.
Номер можно ввести вручную — например, 005 для вставки между проектами.

Шаги скрипта:

#	Действие
1	Создание репозитория на Forgejo (авто при наличии FORGEJO_TOKEN, иначе пауза)
2	Клонирование bun-react-template в папку NNN_repo-name
3	Обновление devcontainer.json — name и postCreateCommand с новым remote
4	Первый коммит и git push --force в новый репозиторий

Автоматическое создание репозитория (опционально):

# Создать API-токен: forgejo.butorov.cc → Settings → Applications → Generate Token
export FORGEJO_TOKEN=your_api_token
./new-project.sh

---

Ручной способ

1. Создать репозиторий на Forgejo

forgejo.butorov.cc → + → New Repository → пустой (без README, .gitignore).

2. Клонировать шаблон в директорию с нужным номером

git clone ssh://git@forgejo.butorov.cc:222/bap/bun-react-template.git 003_MY_PROJECT
cd 003_MY_PROJECT
git remote set-url origin ssh://git@forgejo.butorov.cc:222/bap/MY_PROJECT.git
git push --force -u origin main

3. Обновить .devcontainer/devcontainer.json

{
  "name": "MY_PROJECT",
  "postCreateCommand": "git remote set-url origin ssh://git@forgejo.butorov.cc:222/bap/MY_PROJECT.git && bun install && git config --global user.name 'AButorov' && git config --global user.email 'butorov.ap@gmail.com'"
}

4. Открыть в контейнере

Command Palette → Dev Containers: Reopen in Container

---

Разработка

bun run dev      # Dev-сервер → http://localhost:5173
bun run build    # Сборка в dist/
bun run lint     # ESLint
bun run preview  # Предпросмотр сборки

Добавление shadcn/ui компонентов

bunx --bun shadcn@latest add button
bunx --bun shadcn@latest add dialog

Компоненты появятся в src/components/ui/.

Переменные окружения

Скопировать .env.example в .env. Vite видит только переменные с префиксом VITE_.

---

Стек

Инструмент	Версия	Назначение
Bun	1.x	Runtime, пакетный менеджер, сборка
React	19	UI
TypeScript	~5.9	Типизация
Vite	7	Dev-сервер и бандлер
Tailwind CSS	v4	Стили
shadcn/ui	latest	UI-компоненты (Neutral theme)
Zustand	5	Управление состоянием
lucide-react	latest	Иконки

---

Deploy pipeline

Forgejo (self-hosted) → GitHub (mirror) → GitHub Pages

Push в main запускает GitHub Actions: bun install → bun run build → deploy dist/.

Base URL подставляется автоматически из имени репозитория через VITE_BASE_URL. При необходимости прописать в vite.config.ts:

base: process.env.VITE_BASE_URL ?? '/',

---

Структура проекта

src/
├── components/
│   └── ui/          # shadcn/ui (генерируется через CLI)
├── store/
│   └── appStore.ts  # Zustand store с persist middleware
├── services/        # API-клиенты
├── lib/
│   └── utils.ts     # cn() утилита
├── hooks/           # Кастомные хуки
├── App.tsx
├── main.tsx
└── index.css        # Tailwind v4 + shadcn CSS-переменные (light/dark)

---

Лицензия

MIT