REACT x FLASK setup

WHAT IS FLASK?
FLASK is a lightweight web framework for Python that allows you to build a web app quickly and with minimal boilerplate code. Let's go step-.

LETS START STEP-BY-STEP
Let's start by creating the necessary set up. Go to Vite and copy this command:

npm create vite@latest

I use MAC only, so the setup for WINDOWS might be a bit different. Next, open up the terminal and paste the code you copy from Vite website. Once you run the code you will be prompt to the following:

? Project name: › vite-project

Replace the vite-project with your own project name. After you've given it a name, you are prompt to select the framework, in my case I will select REACT as my framework, but you can select your the framework you are familiar with and hit enter:

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

Once you've selected your framework, now you can select your variant (language) of choice. I'm familiar with JavaScript so I will choose that. Remember: you need to choose the variant you dominate more and hit the enter tab.

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

After these prompts have been chosen, there are these following commands that are given to you to run them:

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

if you ran those above codes successfully, you will arrive to your local 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

You can copy the http address and paste it in your browser and you will see the Vite React page, that you can now use for your project.

Now open up your code editor, I'm using Visual Studio Code as my code editor. Once again, you can use your favorite editor. Next, inside VSCode's integrated terminal, you need to run these commands separately to get your local host address, to edit and start building your app.

npm install
npm run dev

Let's cd inside src and you will see the following files

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

Inside 'App.jsx' you can edit and/or erase the code inside that file and add your own code accordingly. These file contains the Vite and React logo.

Once you have become familiar with the files you have created, now we can set up the frontend and backend directories. Let's create then by running this code:

mkdir backend; mkdir server; mkdir frontend

Let's get our project setup to look more or less like this:

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

Open two terminal:
One terminal will be for the backend/server and the other will be for the frontend/src.
Inside backend/server run the following commands:

pipenv install && pipenv shell

to ensure all the dependencies are install and to create our Pipfile.

Inside frontend/src run the following commands:

npm install
npm run dev

to ensure all the necessary files such as our package.json files are created.

Part 2 Coming....

The above is the detailed content of REACT x FLASK setup. For more information, please follow other related articles on the PHP Chinese website!