Full-stack tutorial: Flask + docker

Part I : Setting up a basic flask server & docker deployment

Flask is a very powerful framework. You can build a vast variety of systems from a very basic web application to a large platform using flask. React is a very popular, easy to use & very powerful front-end development JavaScript library. Docker is an open platform for developers and system administrators to build, ship, and run distributed applications, whether on laptops, data centre VMs, or the cloud.

Throughout this tutorial series, you will be reading about building a full-stack web application using flask + react + docker:

• Part I : Setting up a basic flask server & docker deployment
• Part II : Connecting MongoDB & CRUD operations on database
• Part III : Authentication using JSON Web Tokens

In this tutorial series we will eventually build a to-do application with user login & live update of the data. We will be using react as our front-end JavaScript library & MongoDB as our database.

Github Repository: rikenmehta03/flask-to-do

This tutorial — Part I — is about setting up a basic flask server & test it using docker. Within next 20–30 minutes, you will have a simple flask server up and running which will serve a very basic HTML page like this.

Let’s start with setting up the environment. We will need to setup docker first. Everything else, we will be running & testing inside a docker container. You can either follow this tutorial to install docker & this to install docker-compose. Or if you are running Ubuntu 14.04/16.04 you can directly download this script & run using following commands to get it installed on your system.

$ chmod +x docker_setup.sh
$ ./docker_setup.sh

Now that you have setup your environment, let’s make a directory to work on. Below is the directory structure we will be following throughout this tutorial series.

We will briefly understand what is the requirement of every file & folders.

• index.py : This is the entry point of our flask web-server.
• requirements.txt : This file contains all the required python modules.
• Dockerfile : This file is to build the docker container. (We will learn about this in detail)
• docker-compose.yml & docker-compose.prod.yml : Deployment configuration for both development & production environment.
• modules : This directory will contains all the modules we will be writing including app, logger etc.
• app : This directory will contain all the related controllers and other routes useful for our web application.
• dist : This directory will contain our front-end static files like index.html & other JavaScript files.
• logger : This is wrapper module over python logging module.

Let’s start with “app” module.

modules/app/__init__.py

This will create the app object of Flask. index.py will contain the code that will actually run the flask server.

Line 9 actually add the path of “modules” in sys. So that we can directly import every modules from that directory. There are a few environment variables like PORT & ENV will be defined in docker-compose.yml file. Currently there are only 3 routes. ‘/’ to load index.html & ‘/<path:path>’ to load all other static files. One more is to handle 404 error.

Logger module file.

‘modules/logger/__init__.py’

from .logger import *

‘modules/logger/logger.py’

requirements.txt :

Flask==0.12.2
requests==2.18.1

Dockerfile :

FROM python:2.7
ADD . /app
WORKDIR /app
EXPOSE 4000
RUN pip install -r requirements.txt
ENTRYPOINT ["python","index.py"]

This file have some commands whose reference can be found here. But, briefly this file take python image as a base, and install the required python modules and make a docker container out of it.

docker-compose.yml :

version: '3.5'
services:
 web_dev:
  build: .
  ports:
   - "4000:4000"
  volumes:
   - .:/app
  environment:
   - ENV=development
   - PORT=4000
   - DB=mongodb://mongodb:27017/todoDev
networks:
 default:
  name: web_dev

This file defines some of the environment variables and name of the services & network names.

index.html & 404.html

Put these files in ‘modules/app/dist/’. Now our bare minimum web application with flask server & docker deployment is ready. By running following commands, we will be able to start the server.

$ docker-compose up --build

You should get the output like this :

Building web_dev
Step 1/6 : FROM python:2.7
 ---> 2863c80c418c
Step 2/6 : ADD . /app
 ---> Using cache
 ---> 33352b6d855f
Step 3/6 : WORKDIR /app
 ---> Using cache
 ---> 24b5bc8d0b64
Step 4/6 : EXPOSE 4000
 ---> Using cache
 ---> d880187326eb
Step 5/6 : RUN pip install -r requirements.txt
 ---> Running in 77329798090f
Collecting Flask==0.12.2 (from -r requirements.txt (line 1))
  Downloading Flask-0.12.2-py2.py3-none-any.whl (83kB)
.
.
.
.
Step 6/6 : ENTRYPOINT ["python","index.py"]
 ---> Running in c5ce8be1c83d
Successfully built 6b3552b6c7fc
Successfully tagged pythonflask_web_dev:latest
Creating pythonflask_web_dev_1 ... done
Attaching to pythonflask_web_dev_1
web_dev_1  | 2018-04-13 15:58:12,066 - root - INFO - running environment: development
web_dev_1  |  * Running on http://0.0.0.0:4000/ (Press CTRL+C to quit)
web_dev_1  |  * Restarting with stat
web_dev_1  | 2018-04-13 15:58:12,425 - root - INFO - running environment: development
web_dev_1  |  * Debugger is active!
web_dev_1  |  * Debugger PIN: 170-374-745

Now access http://localhost:4000/ in your browser, and you will be able to see the index.html loaded.

In Part II, we will connect this app with mongoDB using flask_PyMongo. We will also create users database and will add couple of routes to create, read, update, delete user. Eventually, we will develop a full fledged to-do app with auto-save and live update functionality using flask_socketIO.

If you run into issues getting the application working, feel free to add the comments.