Folder Structure

General project structure

Before starting the project, let’s discuss the overall project folder structure. This is a topic that tends to not have a definitive best practice and is mostly up to personal preference. But for the purpose of this course, the general folder structure of the application will look like this:

    bookapp/
        ├── .git/
        ├── client/
        │   ├── .git/
        │   ├── src/
        │   │   ├── common/
        │   │   ├── main/
        │   │   ├── static/
        │   │   └── views/
        │   │       ├── view1/
        │   │       ├── view2/
        │   │       ├── view3/
        │   │       └── view4/
        │   └── venv/
        └── server/
            ├── database/
            └── venv/

The purpose of each directory

The bookapp/ is the main project directory.

Then the bookapp/server/ is where we’ll have our back-end Flask application and the bookapp/client/ is where our Python React application will reside.

Also, bookapp/server/ and bookapp/client/ will be considered the root folders for their respective applications. It is usually preferred to keep separate Python virtual environments for each of the two applications. While this might complicate the setup a little bit, it serves to maintain a separation of concerns between the two applications and allows them to run independently of one another.

That said, the application will use just one Git repository for the entire project, located at the root of the project under bookapp/. To implement the concept of versioning, we will also have an empty .git/ folder in the bookapp/client/ folder to facilitate the proper functioning of the npm version command in our client application.

The bookapp/client/src/common/ folder will hold shared application modules like pyreact and jsutils that have functions used throughout the application. These modules mostly contain the code for loading JavaScript modules and have the Python-to-JavaScript function mapping.

The bookapp/client/src/main/ folder has components that are global to the application, like the Login and About forms, as well as the Material UI theme and application data. The bookapp/client/src/static/ folder has resources like image files that get embedded into the application.

​​Lastly, the bookapp/client/src/views/ folder has subfolders related to individual views within the application. Each subfolder represents a specific view or page and contains the necessary components to render each view.