Настройка и запуск проекта

Итак, мы начинаем работу с кодом. Для начала склонируйте себе репозиторий проекта

Обзор

Перед тем как начать реализацию, давайте разберёмся с проектом, с которым будем работать. Проект представляет собой монорепозиторий Turborepo.

Turborepo — это простой и мощный инструмент для управления монорепозиториями. Монорепо - довольно распространенный подход? Его ключевая особенность состоит в том: что в одном репозитории лежит несколько взаимосвязанных проектов?

Например, в случае с FoodFleet это может быть 3 разных приложения - клиентское приложение, приложение для курьеров и приложение для ресторанов. При этом, очевидно, есть смысл переиспользовать различные компонненты во всех приложениях, а также иметь одинаковые настройки вспомогательных инструментов - eslint, typescript и т.д.

Монорепозиторий позволяет нам решить эту задачу и легко оркестрировать сразу несколькими приложениями.

---

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

Репозиторий имеет две основные директории:

1. apps/

При использовании turborepo, как првали, эта папка содержит приложения, предоставляемые конечному пользователю или выполняющие конкретные бизнес функции. В репозитории, который вы склонировали, в этой папке лежит три приложения:

• core-api

Это примитивный веб-сервер, который представляет собой упрощённую, моковую версию Core API из контейнерной диаграммы. Мы не будем активно работать с этим API, но он предоставляет тестовые эндпоинты. Их можно посмотреть, открыв файл index.js, который возвращает мок-данные для наших сущностей.

• docs

Это Next.js приложение созданное для демонстрация того, какие дополнительные приложения могут находиться в монорепо. Это может быть внутренняя документация или любое вспомогательное приложение. В этом курсе мы не будем использовать этот проект.

• web

Основное приложение на Next.js, над которым мы будем работать. Это клиентская часть FoodFleet — та самая архитектура, которую мы проектировали в предыдущих модулях.

2. packages/

Вторая основная директория монорепозитория, которая содержит пакеты, переиспользуемые в разных приложениях:

• Конфигурация ESLint (eslint-config)
• Конфигурация TypeScript (tsconfig)
• Общие типы (types)
• Пакет ui — базовая версия дизайн-системы/библиотеки компонентов
  (компоненты не продакшн-реди — это лишь пример структуры)

Эта директория демонстрирует, как можно организовать весь проект и разделить код на отдельные переиспользуемые пакеты.

Запуск проекта

Для запуска всех приложений:

1. Откройте терминал в корне репозитория.
2. Выполните команду:

npm run dev
bash

После запуска этой команды turborepo запустит для нас все три проекта из папки /apps. Также существет возможность запускать проеты по-отдельности. Для этого вы можете выполнить команды запуска из соответсвующей директории или указаывать дополнительный аргумент для turborepo при запуске с корневого уровня.

//сменить рабочую директорию
cd apps/web

//запустить дев скрипт
npm run dev

//или с корневого уровня проекта
npm run dev -w web

// в обоих случаях запуститься только web приложение
bash

После запуска веб-приложение будет доступно по адресу: http://localhost:3000

Что вы увидите

Приложение представляет собой простой клон Uber Eats (скорее стилизованный прототип, а не полноценный клон).

В доступной версии реализованы две страницы:

1. Главная страница (Home) - cтраница без введённого адреса.
2. Страница доставки (Delivery) - доступна при нажатии на кнопку Search here.

Структура кода Next.js

Если вы совсем не знакомы с Next.js рекомендую ознакомиться с официальной документацией фреймворка

Максимально кратко Next.js — это фреймворк для разработки веб‑приложений на базе React, созданный компанией Vercel. Он расширяет возможности React, добавляя инструменты для решения типовых задач и оптимизации производительности.

Одной из ключевых особенностей Next.js является маршрутизация, основанная на структуре проекта. В папке apps/web/app/ находятся маршруты приложения (Next.js App Router): page.tsx — корневой маршрут (/) delivery/page.tsx — маршрут /delivery layout.tsx — общий макет приложения (header/footer)

Обратите внимание: внутри папки app нет компонентов, и это сделано специально.

В следующем уроке мы разберём, где и как будут храниться компоненты проекта — а именно, в специальной директории modules/, чтобы обеспечить чистую архитектуру и управляемый рост кодовой базы.