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

# What is NGINX?

Now that we have the back-end taken care of, we have to have something that can serve up the static files of the front-end application.  **NGINX** is a highly efficient web server that is both very configurable and easy to implement.

# Installing NGINX

Unlike Gunicorn, NGINX is not PIP installable and needs to be installed as a standalone application on your computer. The installation of Nginx will depend on what platform we are running it on and what package manager is required, but for a Linux distribution that uses APT, we can install it with this:
```txt
apt-get update
```
```txt
apt-get install nginx
```
If we have a Linux distribution that uses Yum for package management, we can use this:
```txt
yum update
```
```txt
yum install nginx
```
The installation for NGINX will configure it as a system service. 

# The NGINX configuration file

Once NGINX is installed, we have a configuration file to tell it how to handle web requests.  Configuration files are stored in the **/etc/nginx/sites-available/** folder by default. We have a sample NGINX configuration file that is available inside **bookapp/** folder.

In the configuration file, at line 2, the first thing it specifies is the port to listen on with the `listen` option. This is set to `80`, which is the standard HTTP port for most production applications. 

At line 3, the `root` option is set to the file path where the bundled files that parcel produced are located.  Here we can point it to where our bundled production JavaScript files are.  On some servers, they might be located in a folder called `public` or `static`.

At line 4, the `index` option tells NGINX what file to serve if none is specified.  In this case, it serves our main application `index.html` file.

At line 6, the `location` entries in the configuration file are like the route entries in Flask. We can handle requests in different ways based on the URL pattern.  For our application, the requirement is to send any URLs that start with `/api` to the Flask server.  

At line 7, this is done with a `proxy_pass` entry that passes the request through to the specified host.  

At line 8, the `include` `proxy_params` entry adds additional headers so that the forwarded request is handled properly by the Flask server.

At line 11, the `location` entry for the default URL is set to serve static files from the provided `root` location.  

At line 12, NGINX will try to serve up any file that was requested. However, if the file doesn't exist, it will serve up our `index.html` file instead.  This is an important setting that allows us to use internal SPA URLs like `/books`.  Without the `/index.html` failover for the default location route, NGINX would respond with a `404 Not Found` error if it received a request for `/books`.

In lines 15 and 16, the last part of the configuration specifies where to keep the error and access logs.

# Enabling NGINX on the platform

Before NGINX can start using the configuration file, there is a way to enable it by putting a symbolic link or shortcut to the configuration file in the `/etc/nginx/sites-enabled/` folder:
```txt
ln -s /etc/nginx/sites-available/bookapp /etc/nginx/sites-enabled/bookapp
```
NGINX normally comes with an enabled default site running on port `80`.  If there is a symbolic link file called `default` in the `/etc/nginx/sites-enabled/` folder, it's better to delete it to ensure that it doesn't interfere with our application, which also wants to run on port `80`:

```txt
rm /etc/nginx/sites-enabled/default
```

Once the configuration is enabled and we have Gunicorn serving up the REST service, we should be able to open the application in a web browser using the standard HTTP port.  

# Power of NGINX

NGINX is capable of handling large scale deployments and is highly configurable.  While we've barely scratched the surface of what it can do, what we have here should give us a good starting point.

# Up-and-running application

This is what the application looks like:
> **Note:** To log in, use the username `admin` and password `123`.

Learn how to configure and enable NGINX to server static files of our application.

NGINX

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

NGINX

What is NGINX?

Installing NGINX