26. Remix Stacks

Remix Stacks — это официальные шаблоны для быстрого старта проектов. Они включают аутентификацию, базу данных, тесты, стилизацию и CI/CD. Можно использовать официальные или создать свои.

Официальные стеки

Blues Stack

Для масштабных приложений. Fly.io + PostgreSQL + Tailwind.

npx create-remix@latest --template remix-run/blues-stack

• База данных: PostgreSQL (Fly.io Postgres)
• Деплой: Fly.io
• Аутентификация: Session-based
• Стилизация: Tailwind CSS
• Тесты: Vitest + Playwright
• CI: GitHub Actions

Grunge Stack

Для небольших проектов. Fly.io + SQLite.

npx create-remix@latest --template remix-run/grunge-stack

• База данных: SQLite (LiteFS)
• Деплой: Fly.io
• ORM: Prisma
• Стилизация: Tailwind CSS

Indie Stack

Для стартапов и пет-проектов. Fly.io + SQLite.

npx create-remix@latest --template remix-run/indie-stack

• База данных: SQLite (Prisma)
• Деплой: Fly.io
• Аутентификация: Готовая auth система
• Стилизация: Tailwind CSS
• Тесты: Vitest + Playwright + MSW

Что включает Indie Stack из коробки

├── app/
│   ├── models/           # Prisma модели
│   │   ├── user.server.ts
│   │   └── note.server.ts
│   ├── routes/
│   │   ├── _index.tsx    # Лендинг
│   │   ├── login.tsx     # Вход
│   │   ├── join.tsx      # Регистрация
│   │   └── notes.tsx     # Пример CRUD
│   ├── session.server.ts # Готовые функции сессий
│   └── utils.ts
├── prisma/
│   ├── schema.prisma     # User + Note модели
│   └── seed.ts           # Тестовые данные
├── tests/                # Cypress E2E тесты
└── .github/workflows/    # CI/CD пайплайн

Кастомные стеки

# Из GitHub репозитория
npx create-remix@latest --template username/my-custom-stack

# Из локальной папки
npx create-remix@latest --template ./path/to/template

Создать свой стек:

# Структура кастомного стека
my-stack/
├── app/                  # Remix приложение
├── remix.init/
│   └── index.js          # Скрипт инициализации
├── package.json
└── README.md

remix.init/index.js

const { execSync } = require("child_process");

async function main({ rootDirectory }) {
  // Переименовать файлы
  // Установить зависимости
  // Инициализировать БД
  execSync("npx prisma db push", { cwd: rootDirectory });
  console.log("Stack initialized successfully!");
}

module.exports = main;