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

# Parcel setup


> **Important**: Node.js must be installed as we are required to install some important Javascript needed in the project.

## Initializing project

While in the `bookapp/client/ folder`, we first need to initialize npm:

```txt
npm init
```
This will ask a series of questions, mostly related to general information about the project. Just using the defaults is OK, but feel free to update the information.

## Installing JavaScript libraries

Let's install the required JavaScript libraries we’ll use as part of our development toolchain:
```txt
npm install parcel-bundler parcel-plugin-transcrypt --save-dev
```
```txt
npm install parcel-plugin-bundle-visualiser --save-dev
```
```txt
npm install express http-proxy-middleware --save-dev
```
Before we can use the Transcrypt plug-in, we need to manually update one of the plug-in’s JavaScript files as a workaround for a Parcel version incompatibility.



## Updating the parcel-plugin-transcrypt module
The file that needs to be updated is located at:
```txt
./node_modules/parcel-plugin-transcrypt/asset.js
```

In that file, we’ll change line 2, which loads the Parcel Logger module, from the following: 
```js
const logger = require('parcel-bundler/src/Logger');
```
We’ll change it to this:
```js
const logger = require('@parcel/logger/src/Logger');
```
Once this modification is made, the Transcrypt plug-in for Parcel should be working.

## Installing more JavaScript libraries

Now, we’ll install some of the JavaScript libraries that we know we’ll be using in the application itself:
```txt
npm install react@16 react-dom@16 react-ga
```
```txt
npm install @material-ui/core @material-ui/icons
```
```txt
npm install @babel/polyfill deepcopy
```

## Modifying package.json

Next, we need to add our build scripts. We can add these scripts to the existing `“scripts”` section in `package.json` file (once again, mind where the commas go):

Setup front end of the project with Nodejs, Material UI and Parcel.

Setting Up Project Frontend

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

Setting Up Project Frontend

Parcel setup

Initializing