Part 2, Chapter 1

In part 2, we'll add code coverage and continuous integration testing to ensure that each service can be run and tested independently from the whole. Finally, we'll add React along with Jest (a JavaScript test runner) and Enzyme (a testing library designed specifically for React) to the client-side.


Before diving in, take a quick look at the current project structure:

├── docker-compose-prod.yml
├── docker-compose.yml
└── services
    ├── nginx
    │   ├── Dockerfile
    │   ├── Dockerfile-prod
    │   ├── dev.conf
    │   └── prod.conf
    └── users
        ├── Dockerfile
        ├── Dockerfile-prod
        ├── project
        │   ├──
        │   ├── api
        │   │   ├──
        │   │   ├──
        │   │   ├── templates
        │   │   │   └── index.html
        │   │   └──
        │   ├──
        │   ├── db
        │   │   ├── Dockerfile
        │   │   └── create.sql
        │   └── tests
        │       ├──
        │       ├──
        │       ├──
        │       └──
        └── requirements.txt

Notice how we are managing each microservice in a single project, with a single git repo. It's important to note that you can also break each service into a separate project, each with its own git repo. There are pros and cons to each approach, mono repo vs multiple repo. Do your research.

Interested in the multiple repo approach? Review the code from version 1 of the Microservices with Docker, Flask, and React course:

  1. flask-microservices-main - Docker Compose files, Nginx, admin scripts
  2. flask-microservices-users - Flask app for managing users and auth
  3. flask-microservices-client - client-side, React app
  4. flask-microservices-swagger - Swagger API docs
  5. flask-microservices-eval - Flask app for managing user scores and exercises


By the end of this part, you will be able to...

  1. Run unit and integration tests with code coverage inside a Docker container
  2. Check your code for any code quality issues via a linter
  3. Configure Travis CI for continuous integration testing
  4. Explain what React is and how it compares to Angular and Vue
  5. Work with React running inside a Docker Container
  6. Unit test React components with Jest and Enzyme
  7. Create a Single Page Application (SPA) with React components
  8. Use React props and state appropriately
  9. Manage the state of a React component via component lifecycle methods
  10. Pass environment variables to a Docker image at build time
  11. Use React controlled components to handle form submissions
  12. Create a production Dockerfile that uses multistage Docker builds


microservice architecture

Check out the live app, running on a cluster of EC2 instances:

You can also test out the following endpoints:

Endpoint HTTP Method CRUD Method Result
/ GET READ Load React app
/users GET READ get all users
/users/:id GET READ get single user
/users POST CREATE add a user
/users/ping GET READ sanity check

The /users POST endpoint is restricted as of part 3.

Finished code for part 2:


You will use the following dependencies in part 2:

  1. v4.5.3
  2. flake8 v3.7.7
  3. Flask Debug Toolbar v0.10.1
  4. Node v11.12.0
  5. npm v6.7.0
  6. Create React App v2.1.8
  7. React v16.8.4
  8. React Scripts v2.1.8
  9. React Dom 16.8.4
  10. Axios v0.18.0
  11. Flask-CORS v3.0.7
  12. Enzyme v3.9.0
  13. enzyme-adapter-react-16 v1.11.2

Mark as Completed