tiangolo / flask-frontend-docker

Minimal project generator with a Flask backend, a modern frontend (Vue, React or Angular), a Traefik load balancer with HTTPS, all based on Docker.

🚨 DEPRECATION WARNING 🚨

I'm currently not actively using this generator for any project.

You might still find some internal pieces of code useful for your own use cases, but I won't be able to fix bugs and add features.

If you are starting a new project from scratch, check the alternatives at the FastAPI docs: Project Generation.

You are still free to use this project if you want to, you might still find some internal pieces of code useful for your own use case. And if you already have a project generated with it that's fine as well (and you probably already updated it to suit your needs).

Flask Frontend Docker - project generator

Generate stack with a a Flask backend and a modern (Vue.js, React, Angular) frontend.

Each in its own container, with routes handled by a Traefik proxy.

With automatic HTTPS certificate generation using Let's Encrypt.

Features

• Full Docker integration (Docker based)
• Docker Swarm Mode deployment
• Docker Compose integration and optimization for local development
• Production ready Python web server using Nginx and uWSGI
• Python Flask backend:
  • CORS already configured, to be used by the frontend.
• Vue frontend
  • Easily updated to be Angular or React.
  • Docker server based on Nginx (configured to play nicely with Vue-router)
  • Docker multi-stage building, so you don't need to save or commit compiled code
  • Easily enable frontend tests at build time
• Load balancing between frontend and backend with Traefik:
  • So you can have both backend and frontend under the same domain, separated by path, but served by the two different containers
• Automatic (free) HTTPS certificate generation with Let's Encrypt and Traefik

How to use it

Go to the directoy where you want to create your project and run:

pip install cookiecutter
cookiecutter https://github.com/tiangolo/flask-frontend-docker

Input variables

The generator (cookiecutter) will ask you for some data, you might want to have at hand before generating the project.

To see the variables asked, check the cookiecutter.json file.

How to deploy

This stack can be adjusted and used with several deployment options that are compatible with Docker Compose, but it is designed to be used in a cluster controlled with pure Docker in Swarm Mode with a Traefik main load balancer proxy handling automatic HTTPS certificates, using the ideas from DockerSwarm.rocks.

Please refer to DockerSwarm.rocks to see how to deploy such a cluster in 20 minutes.

More details

After using this generator, your new project (the directory created) will contain an extensive README.md with instructions for development, deployment, etc. You can pre-read the project README.md template here too.

Alternatives

This is a very simple project generator, with just the minimum to have:

• Flask in one Docker container.
• A modern frontend in a separate Docker container:
  • With an example minimal Vue application, that can easily be changed to React, Angular, etc.
• Both backend and frontend being served using a single proxy/load-balancer with Traefik:
  • Generating automatic HTTPS certificates with Let's Encrypt.

This doesn't include many useful tools for building APIs, database integrations, more sophisticate frontend features, etc.

It is just to show the minimum configurations to achieve that.

If you are building a backend that would be used by a modern frontend (like in this minimal project generator) you might benefit from other additional tools made for APIs.

This project generator has several bigger (more complete) sibling project generators that you might want to check and use.

FastAPI

If you are building a backend to be used as an API and a modern frontend that communicates with it (as in this project), you might benefit from using FastAPI instead of Flask, and a corresponding project generator, including a NoSQL database, security, authentication, asynchronous jobs, email notifications, etc:

https://github.com/tiangolo/full-stack-fastapi-couchbase

Flask

If for some reason you can't (or don't want to) use FastAPI and want to keep using Flask, there are also bigger sibling projects:

https://github.com/tiangolo/full-stack

https://github.com/tiangolo/full-stack-flask-couchbase

https://github.com/tiangolo/full-stack-flask-couchdb

License

This project is licensed under the terms of the MIT license.

flask-frontend-docker's Issues

Trouble by using this configuration with Traefik Proxy with HTTPS

Hi @tiangolo, first of all thank you for this awesome boilerplate.

I'm having some problems by trying to merge this example with yours in dockerswarm.rocks, I'm using docker swarm in my DigitalOcean server and creating some replicas of my node api, but I keep receiving some error messages in traefik logs:

10.255.0.2 - - [18/Feb/2019:20:18:55 +0000] "GET / HTTP/1.1" 302 5 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36" 360 "frontend redirect for frontend-servicehttp-prod-webserver-servicehttp" "/" 0ms
10.255.0.2 - marceloavf [18/Feb/2019:20:18:55 +0000] "GET / HTTP/2.0" 302 5 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36" 359 "servicehttps-prod-webserver-servicehttps" "http://10.0.1.81:80"

I'm trying to keep them in the same domain, but access in different ports. My application is being expose in port 7070, it's working normally in development mode, it's almost equal to yours, but not in production.

Do you have any tips?

---

docker-compose-prod.yml

version: '3.7'
services:
  consul-leader:
    image: consul
    command: agent -server -client=0.0.0.0 -bootstrap -ui
    volumes:
      - consul-data-leader:/consul/data
    environment:
      - CONSUL_BIND_INTERFACE=eth0
      - 'CONSUL_LOCAL_CONFIG={"leave_on_terminate": true}'
    networks:
      - app-network
      - default
    deploy:
      labels:
        - traefik.enable=true
        - traefik.port=8500
        - traefik.tags=bluedesk-api
        - traefik.frontend.auth.basic.users=test:$$apr1$$VuFjg6b/$9R75O3hETI92Vo21wsJGLq
  consul-replica:
    image: consul
    command: agent -server -client=0.0.0.0 -retry-join="consul-leader"
    volumes:
      - consul-data-replica:/consul/data
    environment:
      - CONSUL_BIND_INTERFACE=eth0
      - 'CONSUL_LOCAL_CONFIG={"leave_on_terminate": true}'
    networks:
      - app-network
      - default
    deploy:
      replicas: 0
      placement:
        preferences:
          - spread: node.id
  api:
    image: localhost:5000/precisaosistemas/bluedesk:${TAG}
    restart: unless-stopped
    build: .
    environment:
      - VERSION=${TAG}
    command: /bin/bash -c "./wait-for-it.sh -T 0 nc -z couchdb 5984 && yarn start:prod"
    deploy:
      replicas: 2
      update_config:
        parallelism: 1
        delay: 10s
        monitor: 10s
        failure_action: rollback
      rollback_config:
        parallelism: 1
        delay: 10s
        monitor: 10s
      restart_policy:
        condition: on-failure
        max_attempts: 3
        window: 120s
      labels:
        - traefik.frontend.rule=PathPrefix:/
        - traefik.enable=true
        - traefik.port=7070
        - traefik.tags=bluedesk-api
  webserver:
    restart: unless-stopped
    deploy:
      replicas: 1
      placement:
        constraints:
          - node.role == manager
        preferences:
          - spread: node.id
      labels:
        - "traefik.frontend.rule=Host:www.bluedesk-api.precisaosistemas.com.br,bluedesk-api.precisaosistemas.com.br"
        - traefik.enable=true
        - traefik.port=80
        - traefik.tags=bluedesk-api
        - traefik.docker.network=prod_app-network
        - traefik.servicehttp.frontend.entryPoints=http
        - traefik.servicehttp.frontend.redirect.entryPoint=https
        - traefik.servicehttps.frontend.entryPoints=https
        - traefik.frontend.auth.basic.users=test:$$apr1$$VuFjg6b/$9R75O3hETI92Vo21wsJGLq
    command: --docker \
      --docker.swarmmode \
      --docker.watch \
      --docker.exposedbydefault=false \
      --constraints=tag==bluedesk-api \
      --entrypoints='Name:http Address::80'
      --entrypoints='Name:https Address::443 TLS'
      --consul
      --consul.endpoint="consul-leader:8500"
      --acme
      [email protected]
      --acme.storage="traefik/acme/account"
      --acme.entryPoint=https
      --acme.httpChallenge.entryPoint=http
      --acme.onhostrule=true
      --acme.acmelogging=true
      --logLevel=INFO
      --accessLog
      --web
    depends_on:
      - consul-leader
    networks:
      - default
    ports:
      - 80:80
      - 443:443
      - 8080:8080
  couchdb:
    restart: unless-stopped
    labels:
      - traefik.enable=false

volumes:
  consul-data-leader:
  consul-data-replica:

networks:
  app-network:

docker-compose.yml

# https://dockerswarm.rocks/traefik/
version: '3.7'
services:
  #Database
  couchdb:
    image: couchdb:2
    volumes:
      - ./couchdb/data:/opt/couchdb/data
    environment:
      - COUCHDB_USER=test
      - COUCHDB_PASSWORD=test
    networks:
      - db
    labels:
      - traefik.enable=false
  #Application
  api:
    depends_on:
      - couchdb
    networks:
      - app-network
      - db
    volumes:
      - yarn:/home/node/.cache/yarn
      - ./src:/usr/src/app/src
      - ./package.json:/usr/src/app/package.json
      - ./yarn.lock:/usr/src/app/yarn.lock
  #Traefik Service
  webserver:
    image: traefik:v1.7
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    networks:
      - app-network
    links:
      - api

volumes:
  yarn:

networks:
  db:

Cannot connect to Port 80

Thank alot for the stack,
I used this project generator and deployed it in a server as it is without changing any configurations, but after executing the deploy scripts, I see that port 80 cannot be accessed. Can you please help me out?
Attached is the screenshot of "docker ps"

Thanks
Shajid