Docker for end to end (React + Mongo + Python)

Introduction

When I started working on the web application, I started realising that the biggest challenge is in the end after code completion.

I came across a challenge to create end to end application that has React as frontend, mongo as DB and Flask (Python 3.6) as Full stack.

The biggest question is how to maintain the 3 services and do easy deployment. Then i came across this tool called docker. Docker helps to containerise your application and give configuration for seamless deployment anywhere.

Following are the steps:

1. Create Mongo as a server (In Docker-compose)
2. Create React Application (Using Dockerfile)
3. Create Flask (Python 3.6) as backend Service (Using Dockerfile)
4. Integrate Mongo Services with Backend
5. Integrate frontend with Backend
6. Club all services in Docker-compose
7. Production Ready Docker Configuration

Code:

kmeeraj/reactpythonmongodocker

Steps:

1. Create Mongo as a server (In Docker-compose)

Docker mongo image is available in https://hub.docker.com/_/mongo. This image can deploy DB instance in our docker container as a service. It is very simple, add following lines in docker-compose.yml and you will get MongoDB service.

One can build and run using following commands:

docker-compose up -d

After running the command one can check the MongoDB as follows:

docker exec -it mongo bash

/# mongo -u admin -p admin

Important things to note here:

1. restart

This is docker container policy for restart the container when necessary. One can check for the different options is this link.

2. command

Sometimes one need to start the MongoDB server differently, so basing on the condition one can set flags like — auth to start the server

3. MONGODB_DATA_DIR

This is an important folder where mongo data is stored, this needs to be set for backup of data.

4. mongo-init.js

This is important script where we will initialise DB and put initial data for app (or seed data).

2. Create React Application (Using Dockerfile)

In the same folder of docker-compose.yml file, create angular project (in my sample code, I have to create react application using npx (or yarn) and the name of the application is frontend). Once you create angular application, create a Dockerfile as below:

3. Create Flask (Python 3.6) as backend Service (Using Dockerfile)

Create a Python 3.6 (Flask) project in the same folder of docker-compose.yml file and create Dockerfile as below:

4. Integrate Mongo Services with Backend

To integrate Backend with MongoDB, we use network attribute in docker-compose.yml file

In Python, connect to MongoDB using MongoClient instance of PyMongo with help os.getEnv() method to get user id and password from the docker-compose.yml file which is set in the environment as MONGODB_USERNAME and others.

5. Integrate frontend with Backend

Integrate frontend with Backend using network attribute in docker-compose.yml

provide proxy for backend in frontend in environment file.

call the backend service from frontend using proxy url

In package.json provide proxy url “proxy:http://localhost:5000”

6. Club all services in Docker-compose

Provide complete services in docker-compose.yml file and do following commands:

docker-compose build

docker-compose up

Test the application in a browser by accessing http://localhost:3000

7. Production Ready Docker Configuration

Once testing is done, we are now ready to deploy our code to deploy in production. But frontend is not expected deployed using a node. So frontend build needs to be deployed in nginx. For this we will use another set of configuration files for production deployment.

When we use nginx for the production environment, we need to provide nginx configuration file for frontend. For backend we can configure as web-app_api, which needs further configuration as given below:

To build and deploy in production (as given in Deploy-production.sh) run this command:

docker-compose -f docker-compose-prod.yml up — build

To shutdown (as given in Shutdown-production.sh) run this command:

docker-compose -f docker-compose-prod.yml down

Video: