> ## Documentation Index
> Fetch the complete documentation index at: https://basecamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Packages

> スターターキットでのセットアップ

## 1. インストール手順

以下の手順に従ってフレーム開発に必要なパッケージをインストールしましょう。

<iframe className="w-full aspect-video" src="https://www.loom.com/embed/d70075633d9e4bd1a2120fbd2cbbd414?sid=bdbe5b3c-0418-458c-85fa-8ed47c6b1663&hide_share=true&hideEmbedTopBar=true&hide_title=true&hide_owner=true" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen />

### 1. テンプレートからプロジェクトをブートストラップする

エディタを起動し、キーボードの `Ctrl + Shift + @` でエディタのターミナルを開く、またはターミナルアプリ（PowerShell）を起動して、ターミナルに表示されている現在のディレクトリがフレームのソースを格納する親ディレクトリであるか確認の上、以下のコマンドを実行しましょう。

```bash theme={null}
npm init frames@latest
```

コマンドを実行すると以下のメッセージが表示されるため、任意のプロジェクト名を入力して **Enter** キーを押しましょう。

```
Enter the name of your project
```

次に以下のメッセージが表示されるため、**next-starter-with-examples** を選択して **Enter** キーを押しましょう。

```
Choose a template for the project
```

次に以下のメッセージが表示されるため、**No** を選択して **Enter** キーを押しましょう。

```
Do you want to install the dependencies using npm?
```

インストールが問題なく完了すると以下のメッセージが表示されます。<br />
※**プロジェクト名** は最初に入力したプロジェクト名になります。

```
◆  Initialized a git repository.
│
│  Next steps:
│
◇  1. Go to the project directory by running: cd ./[プロジェクト名]
│
◇  2. Start the development server and run the app in debugger by running: npm dev
│
◇  3. Open your browser and go to http://localhost:3010 to see your app running in the debugger
│
└  Done! Your project has been set up! 🎉
```

### 2. プロジェクトディレクトリに移動

完了メッセージに表示されている通り、ターミナルで以下のコマンドを実行します。

```bash theme={null}
cd ./[プロジェクト名]
```

### 3. パッケージをインストール

ターミナルに表示されている現在のディレクトリがプロジェクトディレクトリであるか確認の上、以下のコマンドを実行します。

```bash theme={null}
npm install
```