ホーム>プログラミング関連>AI ソースコード
ダウンロード

UI Webを開始します

Start UI [Web]は、BearStudioチームおよびその他の貢献者によって作成および維持されている意見のあるFrontend Starterリポジトリです。これは、クライアント向けのWebアプリを作成するときに使用するチームの最新のスタックを表しています。

ドキュメント

このプロジェクトの使用方法の詳細については、ドキュメントを参照してください。ドキュメントには、インストール、使用法、およびいくつかのガイドに関する必要なすべての情報が含まれています。

デモ

Start UI [Web]でプロジェクトを開始するときにあなたが持っているもののライブ読み取り専用デモンストレーションは、demo.start-ui.comで入手できます。

テクノロジー

スターターのテクノロジーロゴ

？タイプスクリプト、⚛️react、⚫️nextjs、⚡️チャクラui、？ trpc、▲プリスマ、？§タンスタッククエリ、ストーリーブック、？劇作家、？反応フックフォーム、？ 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変数を更新しないでください。
  1. 依存関係をインストールします
pnpm install
  1. 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がキャッチされます。

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}などのプレビューurlに言語を追加します{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アイコンは、 24x24pxサイズのicon- （例： icon-externel-link ）が付いているSVGファイルであり、 1つの形状のみで#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フォルダーもあります。

開発環境に関するヒントを示します

環境の名前でNEXT_PUBLIC_ENV_NAME env変数をセットアップします。 

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

翻訳

I18N Ally拡張機能をセットアップします

翻訳管理には、VSコードにi18n Allyプラグインを使用することをお勧めします。

.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 .
  1. Docker画像を実行します（ start-ui-webプロジェクト名に置き換えます） 
 docker run -p 80:3000 start-ui-web

アプリケーションはポート80（http：// localhost）に公開されます

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて