About :

Quick reminder :

Photo by AbsolutVision on Unsplash

First of all, let’s have a quick briefing about docker; docker is simply an open source tool to launch apps on Linux containers and it’s considered the best substitute of VMs since it used less system memory and resources with a full resources and accesses management with more performance, so smooth and doesn’t require a performant laptop as a VMs does. With docker you just build specify your app’s configuration dependencies then create an image which is a set of layers created for your app to be able to launch an instance of your app on a container zipping all your configuration, you can find more comparison between these two with more described figures here . Docker is available on Linux, MacOS and Windows you can get it from here or you can try it out on the cloud with “Play with Docker” solution from here.

Things in action :

Photo by Mika Baumeister on Unsplash

As a first example we’ll take a simple app with React.js in the front-end, Express.js and MongoDB in the backend, so let’s set it up.

Front-end

npx create-reate-app hello-world

Now open it in VSCode (for example) and edit the code to make a simple call for the backend, so let’s install Axios to manage our http/https calls :

npm install axios

Go and create a folder and call it services, inside that folder create an index file as follows :

Once we installed and configured Axios, let’s discover our frontend app briefly : We’ll build a simple React app that shows movies trending in a public access page but to access a movie details like description and videos the user will have to sign in, remember that the idea isn’t to build a huge set of functionalities but just to show how dockerizing works (if you’re interested in the full version of the movies app, you’ll find it as a mobile app that I built in React-Native on my GitHub), you’ll find later the link to the code on GitHub so just focus on the infrastructure :)

Now to go fast we’ll use Material-UI design library, let’s start by creating a simple form to log-in just simple as possible, so install Material-UI icons and core :

npm i @material-ui/icons @material-ui/core

Then to manage our data, we’ll use redux , so be sure to install redux and react-redux for the redux integration in react.js :

npm i redux react-redux

Our frontend repository tree looks like this :

Backend :

npm init

Now we need to add “mongo” and “express” so just install them with :

npm i express mongodb

So now we can create our routes smoothly and fast, but don’t forget we need the movies trending and descriptions so I’ve chosen for that one of the most famous movies database it’s “TMDb”. Just for more better work management, create a file and name it “access.json” to store there our api_key and mongo database information

Now just set routes, below you can find a snippet of the source code :

Don’t worry the complete source code will be available on my GitHub with links just blow 😉.

Infrastructure :

Frontend :

For “Dockerfile” : Here telling Docker that first create a layer from the “node” docker image, create a work directory and name it “/app” , copy package.json and package-lock.json in that directory, run “npm install” to generate all the node_modules for our dependecies, copy all the generated folders in our work directory, the image will be listening on the port 3000 (you can set any port), then we specify the command to be run within the container, that’s it 😊.

Backend :

Now in the root folder create a file and name it “docker-compose.yml” :

Here Docker will create for us three services (images); app for the backend, client for the frontend and mongo for mongo image, as you can see after the “Dockerfile” files the “.yml” file becomes more readable and clear; the service app will be run on “app” container, uses the “app” docker image built with the backend dockerfile and depends on the mongo docker image which means that it has to create the mongo image before starting the “app” container. Quite the same for the second service; the client image is linked (depends on) the backend image so the system will start the backend image before the frontend image. Another thing maybe you might notice about the port it’s 3000:3000 , well actually the first “3000” means that the container will be run on the docker virtual machine with the port 3000 and for the external machine (our standard localhost) on the second “3000” (sure the port 3000 is the default port of React.js apps), this will be clearer when we start generated the images and starting them.

Now run the command below to build our images with the defined configurations above :

docker-compose build

Don’t worry about the lines in red they’re just npm warnings not that big deal😏.

Once the build is done, go and check if the images are created by running :

docker images

So now let’s start them, the best way to do that is to start them separatory, so first start mongo then the backend and the frontend :

docker-compose up -d mongo

docker-compose up -d server

docker-compose up -d client

Now it depends on your Docker installation config, normally you can access the app on http:localhost:3000 but it would be better to run :

docker-machine ip

This will give you the Docker machine IP address so just open in your browser <given_address>:3000 to load the app :

If the user click on a movie to see the description and videos or wanna check the bookmarked list, will be redirected to login first

Now after a correct inputs match try, he can access the bookmarked list and check the all information about a specific movie

Movie description :

And to stop your app either you can stop a specific container or if you want you can stop them all by typing :

docker-compose down

Bonus 😊:

Source code : https://github.com/BLemine/medium-article-dockerize-mern-app

— — — — — — — — — — — — -“Best of luck😊” — — — — — — — — — — — —

an IT lover , a curious full-stack developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store