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）上暴露