¿QUÉ ES FLASK?
FLASK es un marco web liviano para Python que le permite crear una aplicación web rápidamente y con un código repetitivo mínimo. Vamos paso-.

COMENCEMOS PASO A PASO
Comencemos creando la configuración necesaria. Vaya a Vite y copie este comando:

npm create vite@latest

Solo uso MAC, por lo que la configuración para WINDOWS puede ser un poco diferente. A continuación, abra la terminal y pegue el código que copió del sitio web de Vite. Una vez que ejecute el código, se le solicitará lo siguiente:

? Project name: › vite-project

Reemplace el proyecto vite con el nombre de su propio proyecto. Después de darle un nombre, se le pedirá que seleccione el marco; en mi caso, seleccionaré REACT como mi marco, pero usted puede seleccionar el marco con el que está familiarizado y presionar Enter:

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

Una vez que haya seleccionado su marco, ahora puede seleccionar la variante (idioma) de su elección. Estoy familiarizado con JavaScript, así que lo elegiré. Recuerda: debes elegir la variante que dominas más y presionar la pestaña de ingresar.

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

Después de elegir estas indicaciones, se le proporcionan los siguientes comandos para ejecutarlas:

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

si ejecutó los códigos anteriores con éxito, llegará a su servidor local:

  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

Puedes copiar la dirección http y pegarla en tu navegador y verás la página de Vite React, que ahora puedes usar para tu proyecto.

Ahora abre tu editor de código. Estoy usando Visual Studio Code como mi editor de código. Una vez más, puedes utilizar tu editor favorito. A continuación, dentro de la terminal integrada de VSCode, debe ejecutar estos comandos por separado para obtener su dirección de host local, editar y comenzar a crear su aplicación.

npm install
npm run dev

Vamos a cd dentro de src y verás los siguientes archivos

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

Dentro de 'App.jsx' puedes editar y/o borrar el código dentro de ese archivo y agregar tu propio código en consecuencia. Este archivo contiene el logotipo de Vite y React.

Una vez que se haya familiarizado con los archivos que ha creado, ahora podemos configurar los directorios frontend y backend. Creemos entonces ejecutando este código:

mkdir backend; mkdir server; mkdir frontend

Hagamos que la configuración de nuestro proyecto se vea más o menos así:

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

Abrir dos terminales:
Un terminal será para el backend/servidor y el otro será para el frontend/src.
Dentro del backend/servidor ejecute los siguientes comandos:

pipenv install && pipenv shell

para garantizar que todas las dependencias estén instaladas y crear nuestro Pipfile.

Dentro de frontend/src ejecuta los siguientes comandos:

npm install
npm run dev

para garantizar que se creen todos los archivos necesarios, como nuestros archivos package.json.

Parte 2 próximamente....