フロントエンド開発セットアップ¶

このページでは、フロントエンド開発を始めるために必要な手順を説明します。

前提条件¶

推奨される開発セットアップは、devcontainersを使用したVisual Studio Codeです。このアプローチでは、必要なすべてのツールを備えた事前構成された開発環境が作成されます。

必要な前提条件については、バックエンド開発セットアップを参照してください。

Gramps Webフロントエンドリポジトリを開き、「fork」をクリックします。
Gitを使用して、フォークしたリポジトリをローカルマシンにクローンします。
クローンしたリポジトリをVisual Studio Codeで開きます。プロンプトが表示されたら、「コンテナで再オープン」を選択するか、コマンドパレットを手動で開き（Ctrl+Shift+PまたはCmd+Shift+P）、「Dev Containers: Rebuild and Reopen in Container」を選択します。
devコンテナのビルドと起動を待ちます。特に初回は数分かかる場合があります。

フロントエンド開発サーバーを実行し、ブラウザで変更の影響をプレビューするには、devコンテナ内の事前定義されたタスクを使用できます。

これを機能させるには、まずGramps Web APIバックエンドのインスタンスを立ち上げる必要があります。これを行う最も簡単な方法は、バックエンドdevコンテナを使用し、別のVS Codeウィンドウで「Web APIを提供」タスクを実行することです。

バックエンドが実行されている状態になったら、コマンドパレットから「タスク: タスクを実行」を選択し（Ctrl+Shift+PまたはCmd+Shift+P）、次に「Gramps Webフロントエンドを提供」を選択することで、フロントエンド開発サーバーを実行できます。

これにより、フロントエンド開発サーバーがポート8001で起動し、ブラウザでhttp://localhost:8001にアクセスできます。フロントエンドコードに変更を加えると、ブラウザが自動的にリロードされ、変更の影響を即座に確認できます。