Introduction

Part 2, Lesson 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 ReactJS along with Jest, a JavaScript test runner, and Enzyme, a testing library made specifically for React, to the client-side.

Structure

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

├── docker-compose-dev.yml
├── docker-compose-prod.yml
└── services
    ├── nginx
    │   ├── Dockerfile
    │   └── flask.conf
    └── users
        ├── Dockerfile-dev
        ├── Dockerfile-prod
        ├── entrypoint-prod.sh
        ├── entrypoint.sh
        ├── manage.py
        ├── project
        │   ├── __init__.py
        │   ├── api
        │   │   ├── __init__.py
        │   │   ├── models.py
        │   │   ├── templates
        │   │   │   └── index.html
        │   │   └── users.py
        │   ├── config.py
        │   ├── db
        │   │   ├── Dockerfile
        │   │   └── create.sql
        │   └── tests
        │       ├── __init__.py
        │       ├── base.py
        │       ├── test_config.py
        │       └── test_users.py
        └── 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 mono approach? Review the code from version 1 of this 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

Objectives

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

  1. Manage services housed in multiple git repos from a single Docker Compose file
  2. Utilize a git repo as the “build context” for Docker Compose
  3. Run unit and integration tests with code coverage inside a Docker Container
  4. Check your code for any code quality issues via a linter
  5. Work with each service independently without Docker
  6. Configure Travis CI for continuous integration testing
  7. Explain what React is
  8. Work with React running inside a Docker Container
  9. Unit test React components with Jest and Enzyme
  10. Create a Single Page Application with React components
  11. Use React props and state appropriately
  12. Manage the state of a React component via component lifecycle methods
  13. Pass environment variables to a Docker image at build time
  14. Use React controlled components to handle form submissions
  15. Create a production Dockerfile that uses multistage Docker builds

App

microservice architecture

Check out the live apps, running on EC2 -

  1. Production
  2. Staging

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: https://github.com/testdrivenio/testdriven-app-2.2/releases/tag/part2

Dependencies

You will use the following dependencies in part 2:

  1. Coverage.py v4.4.2
  2. flake8 v3.5.0
  3. Flask Debug Toolbar v0.10.1
  4. Node v9.4.0
  5. npm v5.6.0
  6. Create React App v1.5.1
  7. React v16.2.0
  8. React Scripts v1.1.0
  9. React Dom 16.2.0
  10. Axios v0.17.1
  11. Flask-CORS v3.0.3
  12. Enzyme v3.3.0
  13. enzyme-adapter-react-16 v1.1.1