CODEWITHSUNDEEP
pythonreactjsflask
pinnochio
pinnochio

Reputation: 376

How to structure Flask + Reactjs projects

My question is how to structure the directories when you are creating an app that uses both Flask(backend) and Reactjs (frontend). The default structures for each individual infrastructures are below:

In Flask, the structure is:

.
├── app.py
├── static
│   ├── foo.png
│   └── bar.csv
├── templates
│   ├── Predict.html
│   ├── home.html
│   ├── index.html
│   └── something.js
└── utlities.py

In React apps, the structure (when running create-react-app) is:

.
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

Upvotes: 6

Views: 3640

Answers (2)

pacific_sherlock
pacific_sherlock

Reputation: 39

Assuming we want to build a hello template I would first use the standard Flask folder organization : 

.
├── hello_template
    ├── configurations.py
    ├── __init__.py
    ├── README.md
    ├── run.py
    └── templates
        ├── hello
        │   ├── __init__.py
        │   └── views.py
        ├── __init__.py
        ├── public
        │   ├── css
        │   ├── fonts
        │   ├── images
        │   └── js
        └── static
            ├── index.html
            ├── __init__.py
            ├── js
               ├── components
               ├── index.jsx
               └── routes.js

And then add React, by opening terminal in hello_template/templates/static/ and run the command :

$ npm i react react-dom --save-dev

Upvotes: -1

Aryel Alves
Aryel Alves

Reputation: 345

the way it has become standard is to keep the front end and backend separate, if using react they should not have html files in the flask project folders (it would only work for data handling)

Upvotes: 3

Related Questions