フラスクとは何ですか?
FLASK は Python 用の軽量 Web フレームワークで、最小限の定型コードで Web アプリを迅速に構築できます。さあ、ステップを踏みましょう～。

ステップバイステップで始めましょう
必要なセットアップを作成することから始めましょう。 Vite に移動し、次のコマンドをコピーします:

npm create vite@latest

私はMACのみを使用しているため、WINDOWSのセットアップは少し異なる可能性があります。次に、ターミナルを開いて、Vite Web サイトからコピーしたコードを貼り付けます。コードを実行すると、次のプロンプトが表示されます:

? Project name: › vite-project

vite-project を独自のプロジェクト名に置き換えます。名前を付けた後、フレームワークを選択するように求められます。私の場合はフレームワークとして REACT を選択しますが、使い慣れたフレームワークを選択して Enter:
を押すこともできます。

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

フレームワークを選択したら、選択したバリアント (言語) を選択できます。私は JavaScript に精通しているので、それを選択します。覚えておいてください: あなたがより支配的なバリアントを選択し、Enter タブを押す必要があります。

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript   SWC
❯   JavaScript
    JavaScript   SWC
    Remix ↗

これらのプロンプトを選択した後、それらを実行するために次のコマンドが提供されます:

Scaffolding project in /Users/Marlon/Development/code/practice-phase-4/flask_app_dev/my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

上記のコードが正常に実行された場合は、ローカル ホストに到達します:

  VITE v5.4.8  ready in 1455 ms

  ➜  Local:   http://127.0.0.1:5555/
  ➜  Network: use --host to expose
  ➜  press h   enter to show help

http アドレスをコピーしてブラウザに貼り付けると、Vite React ページが表示され、プロジェクトに使用できるようになります。

ここでコード エディターを開きます。私はコード エディターとして Visual Studio Code を使用しています。もう一度、お気に入りのエディタを使用できます。次に、VSCode の統合ターミナル内で、これらのコマンドを個別に実行してローカル ホスト アドレスを取得し、アプリを編集してビルドを開始する必要があります。

npm install
npm run dev

src 内を cd してみましょう。次のファイルが表示されます

src % tree
.
├── App.css
├── App.jsx
├── assets
│   └── react.svg
├── index.css
└── main.jsx

「App.jsx」内で、そのファイル内のコードを編集および/または削除し、それに応じて独自のコードを追加できます。これらのファイルには Vite と React のロゴが含まれています。

作成したファイルに慣れたら、フロントエンド ディレクトリとバックエンド ディレクトリをセットアップできます。次のコードを実行して作成しましょう:

mkdir backend; mkdir server; mkdir frontend

プロジェクトのセットアップをほぼ次のようにしましょう:

my-app/
├── backend/
|       server/
│       ├── app.py
│       ├── models.py
│       ├── requirements.txt
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json

2 つのターミナルを開きます:
1 つのターミナルはバックエンド/サーバー用であり、もう 1 つはフロントエンド/ソース用です。
バックエンド/サーバー内で次のコマンドを実行します:

pipenv install && pipenv shell

すべての依存関係がインストールされていることを確認し、Pipfile を作成します。

フロントエンド/src 内で次のコマンドを実行します:

npm install
npm run dev

package.json ファイルなどの必要なファイルがすべて作成されていることを確認します。

パート 2 が登場します....