
MERN EP01: Setting up a development environment with Docker
First, we are going to setup a Docker environment following the architecture of our project, but first, let me introduce a few things about Docker!
What is Docker?
Docker is a software container platform that allows you to create isolated environments (containers) in a very similar way how the virtual machines works, but simpler. Each container is a very small virtual machine that not contains a full OS, but just what it need to make your project work. For example, you can run in your machine (the host) two containers, one for the apache server and another one for the database, one working with linux and the other one with windows.
(Read more on https://www.docker.com/what-docker)
So, you can have one Docker Container for each “piece” of your architecture. The good thing is that Docker has a “Docker Compose”, wich is a Tool that orchestrate the containers. Think about a food recipe that list all that you need to make the food you want to cook. Simple as that!
Solution Architecture
The architecture for the solution is very simple:
Database
We are going to use MongoDB as the Database. This is a NoSQL database that store JSON-like documents that don’t have a fixed structure and is Schema-Less. Flexibility is the key benefit.
Back-End
For the Backend we are going to use NodeJS and Express as the server. We will be running a Javascript server side application (REST API) that will be the middleware between the client and the database.
Front-End
For the client side, we are going to use:
- NodeJS: Javascript Runtime
- ReactJS: Facebook’s Javascript Library for user interface
- Bootstrap 3: HTML, CSS and JS Framework for web development
Installing Docker
We are assuming that you are working in Linux (Ubuntu or some Debian distribution). So, please proceed to install Docker Community Edition on your machine.
Then, install Docker Composer:
sudo apt install docker-composeCreating the folder Structure
Having Docker installed, we need to create the folder structure of the solution:
- We will create the solution root folder “todolist-reactjs-example”. Then, inside create an empty text file named “docker-compose.yml”.
- Create the folders “node-backend” and “react-frontend”, each one with an empty file named Dockerfile.
That’s the basic folder structure for our project.
- docker-compose.yml: This file defines the multiple containers that the solution will need. (Read more)
- Dockerfile: This file have the instructions to build the image for each container. (Read more)
Setting up the Docker Environment
Now, let’s make the Docker magic happen:
File “todolist-reactjs-example/node-backend/Dockerfile”
Here, we are telling to Docker to build a container with the image “node” in the version 6.11.1. Then, Create and set the working directory to “/user/src/app” (here our backend app will live). Finally, it will have to RUN the command “npm install -g nodemon” (a Node JS Module that restart the server automatically and compiles the app every time you modify some file) and exposes the 3000 port.
File “todolist-reactjs-example/react-frontend/Dockerfile”
Here happens the same that the other Dockerfile.
File: “todolist-reactjs-example/docker-compose.yml”
In this file we set what containers we need for our full solution. We are defining the creation of 3 services (containers) “mongodb”, “backend” and “frontend”.
Mongodb: will use the image “mongo” and will expose the container port 27017 as the port 27017 in the host machine.
Backend: will use the image defined in the “Dockerfile” that exists in the dir “./node-backend/” (build option). Also, will expose the port 6200 in the host machine. The app folder (defined in the Dockerfile as the Workdir) will be “./node-backend” in our machine (volume option).
Frontend: will use the image defined in the “Dockerfile” that exists in the dir “./node-frontend/” (build option). Also, will expose the port 3000 in the host machine. The app folder (defined in the Dockerfile as the Workdir) will be “./node-frontend” in our machine (volume option).
The option “depends_on” indicates that the container will be loaded after that service. The execution will be like this:
Mongodb->Backend->Frontend
Execute the services
Now that we have all configured, build the images:
sudo docker-compose buildThis will download the images and will execute the commands of the Dockerfile. It can take a few minutes, be patient :)
When the Build finishes, we can launch our services:
sudo docker-compose upNow you have the services running and ready to code our fascinating Todo List app!
Happy Coding!
Gonzalo.

