Getting started with Flask and Docker

Flask

If you are new to python and trying to build a webapp using python - keep reading

Most modern IDEs have python & flask support like :-

1. Visual Studio

2. Jet brains PyCharm professional

3. Visual Studio Code

I am using VS Code for this setup. Get Latest VS code from here if you already don’t have one.

Get latest python 3.x from here. Optionally can use pyenv if you want to use multiple python versions locally.

Install few VS Code extensions like:-

1. Python — Helps you configure python virtual env via VENV or CONDA
2. Docker — Optional if you want to learn how to package the Python Flask webapp into a docker container

Make sure python|pip is available from command line

Create a project env for Flask

1. Create a folder for your project — FlaskSample
2. Open VS code inside a folder where you want to store the project

D:\git\FlaskSample> code .

2. Open VS code command palette (Ctrl+Shift+P) then select Python: Create Environment and go though the steps to create a venv environment

VS Code Command Palette

3. Open a terminal (if you have git bash installed you can make it default terminal for VS Code by selecting it from Command Palette Terminal: Select Default Profile) and install flask

python -m pip install flask

4. Automatically the new terminal will activate the new python virtual env created before in #2 but in case you open a new terminal you can activate the virtual env by running —

source .venv/bin/activate

Create and run a flask app

1. When you created the venv environment above in your project folder you should see the .venv folder like this getting created

2. From the below image we first get started with creating a folder named app inside the project

3. Inside the app we add 3 python files __inti__.py, views.py and webpage.py, we also keep two folder for html templates and CSS/JSON static files.

The __inti__.py is to initialize the main app and and also can have other global initializations like I have initialized logging.

The views.py mainly handles the routing logic

The webpage.py serves as the web app entry point

The index.html in templates folder uses flask render_templates to do some server side scripting

url_for dynamically generated the final static URL for the CSS

Python files

html css json files

4. From the project root folder try running the app now

# FLASK expects the default file app.py under the project root folder
# from where the flask run command is executed. Since our python files are
# in different location and also has different name hence the below export
# statememt to tell flask where to look for the entry code
export FLASK_APP=app.webapp
(.venv)D:/git/FlaskSample:python -m flask run
* Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

5. Open http://127.0.0.1:5000/hello/Indra in your browser and check if it works

Browser output

6. You can add a Debugger by creating the launch.json and selecting Python: Flask from the configuration. You can add breakpoints, watch and inspect variables.

debugger

7. Add a python requirements.txt file to capture external library dependencies. Useful when dockerising this code.

pip freeze > requirements.txt

8. Create a Dockerfile using Docker Extension Command (Ctrl+Shift+P) Docker: Add Docker Files to Workspace. More details here

Add Docker file

Dockerfile

9. Build and run the app from docker

docker image build -t FlaskSample:latest .
docker run -it -p 5002:5002 -e "FLASK_APP=app.webapp" FlaskSample:latest

10. Again test from browser if http://127.0.0.1:5000/hello/Indra is working.