ЧТО ТАКОЕ FLASK?
FLASK — это легкая веб-инфраструктура для Python, которая позволяет быстро создавать веб-приложения с минимальным использованием шаблонного кода. Пойдем шаг-.

НАЧНЕМ ШАГ ЗА ШАГОМ
Начнем с создания необходимой настройки. Перейдите в Vite и скопируйте эту команду:

npm create vite@latest

Я использую только MAC, поэтому настройка для WINDOWS может немного отличаться. Затем откройте терминал и вставьте код, скопированный с веб-сайта Vite. После запуска кода вам будет предложено следующее:

? 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, поэтому выберу его. Помните: вам нужно выбрать вариант, над которым вы доминируете больше, и нажать вкладку ввода.

? 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

Давайте запустим cd внутри src и вы увидите следующие файлы

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

Откройте два терминала:
Один терминал будет для бэкэнда/сервера, а другой — для внешнего интерфейса/источника.
Внутри бэкэнда/сервера выполните следующие команды:

pipenv install && pipenv shell

, чтобы убедиться, что все зависимости установлены, и создать наш Pipfile.

Внутри frontend/src выполните следующие команды:

npm install
npm run dev

, чтобы убедиться, что все необходимые файлы, такие как файлы package.json, созданы.

Скоро выйдет вторая часть....