WAS IST FLASCHE?
FLASK ist ein leichtes Web-Framework für Python, mit dem Sie schnell und mit minimalem Boilerplate-Code eine Web-App erstellen können. Lass uns Schritt gehen.

LASSEN SIE SCHRITT FÜR SCHRITT BEGINNEN
Beginnen wir mit der Erstellung der notwendigen Einrichtung. Gehen Sie zu Vite und kopieren Sie diesen Befehl:

npm create vite@latest

Ich verwende nur MAC, daher kann die Einrichtung für WINDOWS etwas anders sein. Öffnen Sie als Nächstes das Terminal und fügen Sie den Code ein, den Sie von der Vite-Website kopiert haben. Sobald Sie den Code ausführen, werden Sie zu Folgendem aufgefordert:

? Project name: › vite-project

Ersetzen Sie das Vite-Projekt durch Ihren eigenen Projektnamen. Nachdem Sie ihm einen Namen gegeben haben, werden Sie aufgefordert, das Framework auszuwählen. In meinem Fall wähle ich REACT als mein Framework aus, Sie können aber auch das Framework auswählen, mit dem Sie vertraut sind, und die Eingabetaste drücken:

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

Sobald Sie Ihr Framework ausgewählt haben, können Sie nun die Variante (Sprache) Ihrer Wahl auswählen. Da ich mit JavaScript vertraut bin, werde ich mich dafür entscheiden. Denken Sie daran: Sie müssen die Variante auswählen, die Sie am meisten beherrschen, und auf die Eingabetaste klicken.

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

Nachdem diese Eingabeaufforderungen ausgewählt wurden, stehen Ihnen die folgenden Befehle zur Ausführung zur Verfügung:

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

Wenn Sie die oben genannten Codes erfolgreich ausgeführt haben, gelangen Sie zu Ihrem lokalen Host:

  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

Sie können die http-Adresse kopieren und in Ihren Browser einfügen und Sie sehen die Vite React-Seite, die Sie jetzt für Ihr Projekt verwenden können.

Öffnen Sie nun Ihren Code-Editor. Ich verwende Visual Studio Code als meinen Code-Editor. Auch hier können Sie Ihren Lieblingseditor verwenden. Als Nächstes müssen Sie diese Befehle im integrierten Terminal von VSCode separat ausführen, um Ihre lokale Hostadresse abzurufen, Ihre App zu bearbeiten und mit der Erstellung zu beginnen.

npm install
npm run dev

Lassen Sie uns in src cd hinein und Sie werden die folgenden Dateien sehen

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

In „App.jsx“ können Sie den Code in dieser Datei bearbeiten und/oder löschen und entsprechend Ihren eigenen Code hinzufügen. Diese Datei enthält das Vite- und React-Logo.

Sobald Sie sich mit den von Ihnen erstellten Dateien vertraut gemacht haben, können wir nun die Frontend- und Backend-Verzeichnisse einrichten. Lassen Sie uns dann erstellen, indem wir diesen Code ausführen:

mkdir backend; mkdir server; mkdir frontend

Lassen Sie uns unseren Projektaufbau so gestalten, dass er ungefähr so ​​aussieht:

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

Öffnen Sie zwei Terminals:
Ein Terminal ist für das Backend/Server und das andere für Frontend/src.
Führen Sie im Backend/Server die folgenden Befehle aus:

pipenv install && pipenv shell

um sicherzustellen, dass alle Abhängigkeiten installiert sind und um unsere Pipfile zu erstellen.

Führen Sie in frontend/src die folgenden Befehle aus:

npm install
npm run dev

um sicherzustellen, dass alle erforderlichen Dateien wie unsere package.json-Dateien erstellt werden.

Teil 2 kommt...