start ui web

Start UI [Web]是由Bearstudio团队和其他贡献者创建和维护的自以为是的前端启动存储库。它代表了我们在为客户创建Web应用程序时使用的团队的最新堆栈。

文档

有关如何使用此项目的详细信息，请参考文档。该文档包含有关安装，用法和某些指南的所有必要信息。

演示

仅在demo.start-ui.com上可用启动ui [web]启动项目时将有什么实时读取的演示。

技术

？打字稿，⚛️反应，⚫️nextjs，⚡️脉轮UI，？ trpc，▲prisma，？tanstack查询，故事书，？剧作家，？反应钩形式，？反应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. 设置并使用Docker启动DB

pnpm dk:init

笔记

不想使用Docker？

设置PostgreSQL数据库（本地或在线），然后替换数据库_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 UI的供应为0.0.0.0:1080。

预览电子邮件

电子邮件模板是由src/emails文件夹中的react-email组件构建的。

您可以在http://localhost:3000/devtools/email/{template}上预览电子邮件模板，其中{template}是src/emails/templates文件夹中模板文件的名称。

示例：登录代码

电子邮件翻译预览

像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图标都应由icon- （例如： icon-externel-link ）的SVG文件具有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文件夹，其中包含一些utils来帮助编写测试。

显示开发环境的提示

设置NEXT_PUBLIC_ENV_NAME ENV变量，带有环境名称。

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

翻译

设置I18N盟友扩展

我们建议将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 Image（用您的项目名称替换start-ui-web ）

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

申请将在端口80（http：// localhost）上暴露