Create your own Docker environment

Get started with any language without installing the dependencies in your computer

Photo by Erwan Hesry on Unsplash

In this guide, I will be demonstrating how to create an isolated environment for developing your application without the need to install the app dependencies on your computer. We will be using Docker to isolate ReactJS application.

Pre-requisite

Make sure that you have Docker and Docker-Compose installed.

Docker

Why Docker?

Docker enables you to create your own private little environment for developing your applications. If you have worked with python, you are familiar with virtualenv, that enables you to create a virtual environment where all the dependencies of your application are stored. Likewise, Docker creates a “container”, think of it as a virtual mini-computer on which you can install any kind of dependency your application needs, entirely in isolation. By using Docker, you are separating the concerns and needs of one application from another, hence preventing problems with dependency management. When you are getting started using a new language or tool, Docker saves you time that otherwise, you would have spent on installation and configuration.

The Basics

Before you start creating Docker containers, you need to know something about Docker images. An image is a snapshot of a container at a specific point in time. Docker Hub is a treasure when it comes to Docker images, you will find all kinds of images in there with all kinds of tools to fit your needs; from having just Ubuntu to a fully working Nginx server. You can also adjust the image as you need; from adding additional files to running some commands through Dockerfile. Don’t worry, you will get an idea once we start getting our hands dirty with Docker!

Dockerize!

Now that we know why we need Docker and some of its basics, we can jump into Dockerizing an application. For this demo, we will be Dockerizing a React JS application. ReactJS needs Node >= 8.10 and npm >= 5.6, assuming that we do not have these installed on our computer, we will be using npx to create a new single-page application in React using the following command:

npx create-react-app my-app

As I had said, Docker Hub already contains NodeJS image that has Node installed. Don’t get intimidated by all those image variants in there, we will just get started using the normal image variant, that is; node:<version>

This is the defacto image. If you are unsure about what your needs are, you probably want to use this one.

Create a folder in your usual directory where you place all of your code and name it as you like, I will name mine docker-react. In this folder, create a file and name it Dockerfile. Now, add this line on top of the Dockerfile:

FROM node:8.16.0

As you might have already guessed, this line simply tells Docker to use node:8.16.0 as the base image. Now that we have already configured our Dockerfile to use version 8.16 of Nodejs, we will go ahead and build an image from the Dockerfile:

docker build -t docker-react .

docker build commands docker to build an image from Dockerfile, the -t option gives the image a name of docker-react and a tag of latest by default, and the . you see at the end, defines a context for Docker (you will soon know what context means).

If you now execute docker images, you will see that you have two images:

List of Docker images

docker-react is the one that we built and node is the one that we had specified in our Dockerfile.

Next, we will run a command that will create a container based off docker-react image and it will start an interactive bash session:

docker run -it --rm docker-react /bin/bash

docker run creates a container and executes a command that you specify at the end, in our case /bin/bash. -it flag tells the docker run command that this is an interactive session and the --rm flag will remove the container once we exit the interactive bash shell. docker-react, as you know, is the image that we just built.

Once we are inside the container, let us make sure that we have the dependencies that we need to build Reactjs application:

Starting an interactive shell and making sure it has all the dependencies

GREAT! We have all that we need. Let us now attach the directory that we are currently working in, to Docker. We will do this via the docker-compose.yml file:

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration.

Create docker-compose.yml file and paste in the following content:

version: '2.1'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/app

• version defines the version of docker-compose we will be using.
• Under services you define containers.
• web is the name of our first service, underneath we have various steps we will take.
• build, this is the same as running docker build, as you can see we have context and the Dockerfile just like when we were running docker build command.
• volumes; this is the step where we are attaching the current folder, . to /usr/app directory in the container.

We will edit our Dockerfile a bit, we will only addWORKDIR which will tell Docker where our working directory is. To set a working directory is useful, whenever we will run any command, it will get executed into the working directory that we have specified, so even when running a command to give us an interactive shell, it will take us directly into that working directory. Our Dockerfile will now look like:

FROM node:8.16.0
WORKDIR /usr/app

Notice that we are setting our work directory to /usr/app and then in docker-compose.yml file, under volumes section, we are attaching the current directory, docker-react to /usr/app in the container. Attaching a volume means that if we make any kind of changes to the /usr/app directory in the container, it will get reflected in our docker-react directory, and vice-versa.

Alright! Now we are ready to run the Reactjs command to create our first project. Let us get an interactive shell into the container, this time using docker-compose:

docker-compose -f docker-compose.yml run web /bin/bash

The command is pretty straightforward, we are specifying docker-compose.yml file using the -f option, and thereafter running /bin/bash command on the web service (this is the name we had given our service in the docker-compose.yml file) by using run command.

You will notice that docker-compose built the image and gave it a different name based on the name of the service. You will also notice that we have been taken directly into the /usr/app directory because of the working directory we had specified in theDockerfile.

Finally, if we run npx create-react-app my-app, it will create Reactjs application.

Creating React app via Docker

You will notice that my-app folder has been created in your local directory from where you had been working from, in my case docker-react folder:

React application folder

This marks the end of my article. Of course, you are not only withheld by Dockerizing Reactjs app, but you can also Dockerize any application you need. You can also go ahead and explore the boundaries of running the application and accessing it via your browser! Good Luck!