Introduction

This tutorial aims to provide a hands-on tutorial for students with little prior web development
experience. In this example, we chose back-end rendering for its simplicity. Many frameworks support
alternative (and fancier) web development methods. We do not cover these here, but we hope that the
following workshop allows you to explore these options.

The goal of this writeup hopes to deliver:

How to setup Flask

How to do back-end rendering and serve content to a client

How to setup Ajax for the front-end to interact with the back-end

How to connect MySQL GCP to the local flask server

How to deploy the flask application to the GCP app engine.

This tutorial is developed on WSL 2 (Windows Linux subsystem, aka bash on windows). This means that
it should be compatible with Mac and most Linux systems. There could be a slight difference in the
output on the terminal but nothing else.

Objective:

We will complete a Todo WebApp_Project App in this tutorial. The todo WebApp_Project app can
Create, Read, Update, Delete, tasks on this to-do list app. There is no under feature. Everyone on the
same webpage shares the same view. In other words, it's a pretty useless app at this point. But it should
not be hard to extend this app.

Part 1: Setting up Flask

Setting up environment and flask
The first thing is to set up a server locally. A server is a service that listens for requests from
clients and returns a response. First, we want to ensure we are running in a python virtual
environment. This is best practice and also helps us export our packages easily as the app moves
forward.

mkdir WebApp_Project # creating the WebApp_Project folder

cd WebApp_Project # moving into the folder
python -m venv .venv # creating the virtual env placed in the .venv folder
source .venv/bin/activate # activate the virtual env
# you can exit a virtual env by typing "deactivate"

Once this is done, we can install the packages and libraries needed for this application. Feel free
to google the first two packages. They have comprehensive documentation for the development
process.

pip install flask flask_sqlalchemy pymysql pyyaml

Running a barebone Flask application

With the environment completed, we set up the following file structure:

WebApp_Project
├── MyFlaskApp/
│ └──Myapp.py
└── main.py

main.py: This is the app entry point. This means that the application can be invoked by python
main.py.