How to structure Flask + Reactjs projects

Question

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

Aryel Alves · Accepted Answer · 2019-12-27 14:26:16Z

3

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)

answered Dec 27, 2019 at 14:26

Aryel Alves

3451 gold badge2 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pinnochio Over a year ago

When you run the flask app doesn't it automatically look for the html files in the templates directory? How do you get it to look for the js files in the src directory instead? Thanks

Aryel Alves Over a year ago

its better your backend server dont serve the frontend files, you can use the serve package to run the frontend using npm run build and serve -s build

pacific_sherlock · Accepted Answer · 2019-12-27 14:35:46Z

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

Collectives™ on Stack Overflow

How to structure Flask + Reactjs projects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related