start ui web

Start UI [Web] - это самоуверенный репозиторий стартера, созданный и поддерживаемый командой Bearstudio и другими участниками. Он представляет современный стек нашей команды, который мы используем при создании веб-приложений для наших клиентов.

Документация

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

Демо

В прямом эфире демонстрации того, что вы получите при запуске проекта с началом пользовательского интерфейса [Web], доступна на demo.start-ui.com.

Технологии

? TypeScript, ⚛ React, ⚫ nextjs, ⚡ ui чакры,? TRPC, ▲ Prisma,? ️ Tanstack запрос, сборник рассказов,? Драматург,? Реагировать форму крюка, React i18next

Требования

• Nodejs> = 20
• PNPM
• Docker (или база данных PostgreSQL)

Начиная

pnpm create start-ui --web myApp

Это составит новую папку с последней версией Start UI [Web]?

Установка

1. Дублировать файл .env.example в новый файл .env и обновить переменные среды

cp .env.example .env

Примечание

Быстрые советы по местному развитию

• Не обновляйте переменную email_server , потому что значение по умолчанию будет использоваться для ловли электронных писем во время разработки.

2. Установить зависимости

pnpm install

3. Настройка и запустите DB с Docker

pnpm dk:init

Примечание

Не хотите использовать Docker?

Настройка базы данных PostgreSQL (локально или онлайн) и замените переменную среды DATABASE_URL . Затем вы можете запустить pnpm db:push на обновление схемы базы данных, а затем запустить pnpm db:seed , чтобы заселить базу данных.

Разработка

 # Run the database in Docker (if not already started)
pnpm dk:start
# Run the development server
pnpm dev

Электронные письма в разработке

Maildev, чтобы поймать электронные письма

В разработке электронные письма не будут отправлены и будут поймать MailDev.

Пользовательский интерфейс Maildev доступен по телефону 0,0.0.0:1080.

Предварительный просмотр электронных писем

Шаблоны электронных писем построены с помощью компонентов react-email в папке src/emails .

Вы можете предварительно просмотреть шаблон электронной почты по адресу http://localhost:3000/devtools/email/{template} , где {template} - это имя файла шаблона в папке src/emails/templates .

Пример: код входа в систему

Предварительный просмотр перевода электронной почты

Добавьте язык в URL -адрес предварительного просмотра, например http://localhost:3000/devtools/email/{template}/{language} , где {language} - языковой ключ ( en , fr , ...)

Предварительный просмотр электронной почты

Вы можете добавить параметры поиска в URL -адрес предварительного просмотра в качестве реквизита в шаблон. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

Сборник рассказов

pnpm storybook

Обновление темы печати

При добавлении или обновлении компонентов тем, вариаций компонентов, размеров, цветов и других оснований темы вы можете расширить виды внутренней темы, чтобы обеспечить хорошее автозаполнение.

Просто запустите следующую команду после обновления темы:

pnpm theme:generate-typing

Создать пользовательские компоненты значков из файлов SVG

Поместите пользовательские файлы SVG в папку src/components/Icons/svg-sources , а затем запустите следующую команду:

pnpm theme:generate-icons

Предупреждение

Все значки SVG должны быть файлами SVG, префиксированными icon- (Пример: icon-externel-link ) с размером 24x24px , только одна форма и заполненная цветом #000 (будет заменена на currentColor ).

Обновить клавишу хранения цветового режима

Вы можете обновить ключ хранилища, используемый для обнаружения цветового режима, обновляя эту константу в файле src/theme/config.ts :

 export const COLOR_MODE_STORAGE_KEY = 'start-ui-color-mode' ; // Update the key according to your needs

E2E тесты

Тесты E2E настроены с драматургом.

pnpm e2e     # Run tests in headless mode, this is the command executed in CI
pnpm e2e:ui  # Open a UI which allow you to run specific tests and see test execution

Тесты написаны в папке e2e ; Существует также папка e2e/utils , которая содержит некоторые использования, чтобы помочь записать тесты.

Показать намек на среду разработки

Установите переменную env NEXT_PUBLIC_ENV_NAME с именем среды.

 NEXT_PUBLIC_ENV_NAME="staging"
NEXT_PUBLIC_ENV_EMOJI="?"
NEXT_PUBLIC_ENV_COLOR_SCHEME="teal"

Переводы

Настройка расширения Ally I18N Ally

Мы рекомендовали использовать плагин I18N Ally для кода VS для управления переводами.

Создать или отредактировать файл .vscode/settings.json

{
  "i18n-ally.localesPaths" : [ " src/locales " ],
  "i18n-ally.keystyle" : " nested " ,
  "i18n-ally.enabledFrameworks" : [ " general " , " react " , " i18next " ],
  "i18n-ally.namespace" : true ,
  "i18n-ally.defaultNamespace" : " common " ,
  "i18n-ally.extract.autoDetect" : true ,
  "i18n-ally.keysInUse" : [ " common.languages.* " ]
}

Производство

pnpm install
pnpm storybook:build # Optional: Will expose the Storybook at `/storybook`
pnpm build
pnpm start

Развернуть с Docker

1. Создайте изображение Docker (замените start-ui-web на имя вашего проекта)

 docker build -t start-ui-web .

2. Запустите изображение Docker (замените start-ui-web на имя вашего проекта)

 docker run -p 80:3000 start-ui-web

Заявка будет выявлена на порту 80 (http: // localhost)