How to set up a React app with a Flask and MongoDB backend using Docker

Emil Johansson
The Startup
Published in
9 min readApr 13, 2020

--

In this short article I will go through how to set up and containerize a full stack web application with a React frontend, a Flask RESTful API and a MongoDB database using Docker.

If you want, you can clone the code in the article on GitHub right away.

In my work as a researcher in Additive Manufacturing - or 3D printing if you will - I was recently faced with setting up a modern full stack web application in one of our projects. We wanted an API which could easily connect to Python based ML frameworks, modules written in C++ and a database to handle unstructured data. Oh, and it should be easy to deploy too! I am a chemical engineer who have mostly developed websites in PHP and MySQL so you can imagine how daunting this task felt at first.

Eventually, after some research, I decided to use a well proven combination of popular and easy to use technologies with mature user communities:

  1. React. A popular and widely used Javascript framework for building user interfaces.
  2. Flask. A lightweight web application micro-framework built on Python. We will use Flask to build an API which React can consume.
  3. MongoDB. A NoSQL database which stores information using a JSON-style storage format without fixed schemas. It is designed for horizontal scalability and is suitable for handling of the unstructured data in our app.
  4. Docker. A platform which lets us package and deploy applications as containers which can be easily deployed on any system architecture, whether based on Linux, Windows or Mac.

I will not go through each of these technologies in detail but instead dive directly into how to use Docker to set up both a development environment and a production environment based on this particular combination. The basic structure of our set up is shown in the image below.

Basic structure of our containerized full stack web app.

Prerequisites

  1. Install Node.js with Node Package Manager (npm)
  2. Install latest version of Docker

--

--

Emil Johansson
The Startup

Researcher in Additive Manufacturing at Research Institutes of Sweden. Also run a creative web project trying to visualize Tolkien's Middle-Earth in new ways.