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…

--

--

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.