GAID

Please enter the google analytics ID for appData file.

Gain insights into using Python and Transcrypt to build complete web applications. Delve into refactoring, adding new features, and creating cohesive frontend-backend projects with React.

tarball.tar.gz

Final_App

ReactPythonStep01

ReactPythonStep02

ReactPythonStep03

ReactPythonStep04

ReactPythonStep05

ReactPythonStep06

ReactPythonStep07

ReactPythonStep08

ReactPythonStep09

ReactPythonStep10

ReactPythonStep11

ReactPythonStep12

ReactPythonStep13

FinalWebApp

Gunicorn_run

ReactPythonStep01-copy

Python is already used in the backend of most web applications, but sadly it does not work with web browsers to drive the frontend of those applications. Transcrypt can help by creating more coherent web-based projects, using Python to write both the backend and the frontend.

This course builds on the lessons in Using the Python Transcrypt Transipler for Front-end Coding to implement a complete React and Python web-based project. In each chapter, we will refactor existing code to add new functionality, building up the application as you go. Each chapter ends with a running application that includes all of the features we added up to that specific point.

Using Python and Transcrypt to Build a Complete Web Application

# 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:


```ini
    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.


Understand the details of the application's folder structure in this lesson.


Introduction

Environment Setup

Landing Page

Modal View

REST Service

Books

Menus

User Login

Lookups

User Context

Editing Lookups

Filtering Data

Editing Books

SPA Redirect

Deploying the Application

Conclusion

Folder Structure

General project structure