Remix-стартер для любителей кофе

Medusa 2 Starter with Remix Storefront

Официальный монорепозиторий на Turborepo, соединяющий бэкенд Medusa2 с фронтендом на Remix. Демонстрирует динамическую витрину в тематике обжарки кофе: подключён приём платежей через Stripe, поддерживается неограниченное число товаров и категорий, а разработку упрощают TypeScript и Biome. Подходит, чтобы быстро собрать динамичный масштабируемый интернет-магазин.

https://github.com/user-attachments/assets/3c10d2f5-91b8-405c-a47c-c8ae8a4be575

Содержание

• Требования
• Обзор проекта
  • Ключевые возможности
  • Демо
• Начало работы
• Локальная разработка
• Сброс базы данных
• Включение Express Checkout
• Полезные ссылки
• Участники

Требования

Перед началом убедитесь, что установлено следующее:

• ✅ Node.js 20+
• ✅ Yarn 4.5.0
• ✅ Remix
• ✅ Docker и Docker Compose

Обзор проекта

Ключевые возможности

• Динамическая витрина: сочетает headless-коммерцию Medusa2 и быстрый, управляемый данными интерфейс Remix.
• Приём платежей: Stripe подключён по умолчанию, транзакции обрабатываются надёжно и безопасно.
• Масштабируемость: неограниченное число товаров, коллекций, категорий и тегов, так что ассортимент можно наращивать без ограничений.
• Удобство разработки: TypeScript и Biome держат качество кода, единообразие и поддерживаемость.

Демо

Живое демо проекта доступно здесь.

Начало работы

1. Клонируйте этот репозиторий
2. Установите зависимости:
   yarn

3. Проверьте сборку:
   yarn build

Локальная разработка

1. Сгенерируйте файлы .env для бэкенда Medusa и витрины на Remix.

   yarn run generate-env

   Команда создаст файлы apps/medusa/.env и apps/storefront/.env.

2. Замените в файле apps/medusa/.env следующие переменные окружения:

   • STRIPE_API_KEY # Секретный ключ Stripe. Нужен для оформления заказа.

3. Инициализируйте базу данных Medusa:

   yarn run medusa:init

   Команда развернёт базу и заполнит её начальными данными, включая пользователя с почтой admin@medusa-test.com и паролем supersecret.

4. Запустите серверы разработки:

   yarn dev

   Команда запустит в режиме разработки и бэкенд Medusa, и витрину на Remix.

5. Создайте publishable-ключ API для витрины:

   • Войдите в панель администратора Medusa с данными admin@medusa-test.com / supersecret

   • Откройте настройки Publishable API Keys и скопируйте существующий ключ или создайте новый минимум с одним каналом продаж.

6. Замените переменные окружения в файле apps/storefront/.env:

   • MEDUSA_PUBLISHABLE_KEY # Ключ API из предыдущего шага
   • STRIPE_PUBLIC_KEY # начинается с pk_
   • STRIPE_SECRET_KEY # начинается с sk_

7. Перезапустите витрину и бэкенд Medusa:

   yarn dev

Сброс базы данных

Чтобы сбросить базу данных, повторите шаги с 3 по 7 из раздела «Локальная разработка».

Включение Express Checkout

Подробное руководство по включению Express Checkout есть в документации Stripe.

Чтобы включить Express Checkout в витрине Medusa, выполните следующие шаги:

1. Включите нужные способы оплаты для Express Checkout в настройках способов оплаты Stripe.

   • Об интеграции Apple Pay читайте здесь
   • Об интеграции Google Pay читайте здесь.

2. Создайте свой файл привязки домена для подтверждения домена и замените его содержимым файл apps/storefront/app/routes/[.well-known].apple-developer-merchantid-domain-association.tsx.

3. Зарегистрируйте домен для способов оплаты, подробности в этом руководстве Stripe.

   • для разработки подойдёт сервис вроде ngrok.
   • для продакшена нужен домен с https.

Полезные ссылки

• Документация Medusa
• Документация Remix
• Документация Turborepo
• Express Checkout в Stripe

Участники

Сделано с ❤️ командой Lambda Curry.