How to Make Your Own Docker Environment

Create using any language without a need to install dependencies within your environment

In this article we will go through the procedure for developing your own isolated environment for app creation without installing specific app dependencies onto your computer. To run our ReactJS application, we will be using the program Docker.

Prerequisites

To work through this tutorial you will need both Docker and Docker-Compose installed on your machine. If you don’t already have these programs installed please take a minute to download them before we get started.

Why are we using Docker?

Docker is a great resource for creating a private environment where you can develop applications. If you have ever worked with python in the past, you may be familiar with virtualenv which allows you to store all the dependencies for a new application within an independent virtual environment. In the same way, Docker was created to allow you to have a completely independent “container” which acts as a sort of mini computer that you can use to store or install the dependencies your application needs. The advantage of using a program like Docker is that you are preventing dependency management problems by separating the needs and concerns of one application from the other. Docker can save you time spent on configuration and installation when you are getting started using a new tool or language.

The beginning

The first thing you should know about Docker containers is that they rely on something called Docker images (a snapshot taken of a specific container at a given point in time). Check out Docker Hub, which is a collection of Docker images ranging from Ubuntu to a fully functional Nginx server. There is no telling the number of treasures you will find in the form of images of any kind of tool that may fit your needs. Any of the images you may find in Docker Hub can be adjusted to suit your requirements, whether that means running certain commands through Dockerfile or adding additional files to the existing images. If this sounds intimidating, there is no need to worry, it will become much clearer as we move through how to use Docker!

Dockerize

Now that we have gone through some of the reasons why we need to use Docker and a few of the basic functions of the system, we can learn more about how to Dockerize an application. For this demonstration, we will be using Docker on a ReactJS application. In order to work on ReactJS, you need Node >= 8.10 and npm >= 5.6. If you don’t already have these installed on your computer, you can use npx and the following command to make a single-page ReactJS application:

As I mentioned before, a NodeJS image already exists in Docker that has Node installed. There are several different image variants you will see, but don’t worry, we are going to start using the normal image variant which is node:<version>.

As this is the default image you may want to use this image if you are not entirely sure what your needs are at this point.

Your next step is to make a folder within your normal directory for you to put all your code in; you can give it any name but I will name mine docker-react. Create a file called Dockerfile in the folder you just made. You should then add this line of code on top of the Dockerfile:

This code is simply to let Docker know it should use node:8.16.0 for the base image, but you probably already knew that. We can now go ahead and build a new image from the Dockerfile:

In the above line of code, we are telling Docker to build an image from Dockerfile with the command docker build. Then the -t command names the image docker-react as well as tags it as latest by default. The final . helps Docker to define the context (I will explain context later).

Now, if you go ahead and execute docker images, you should see that there are two images created:

The one that we built is called docker-react, and the one called node was the specified one from our Dockerfile.

The next part of the process is to start an interactive bash session by running a command that will make a container based on the docker-react image.

This command makes a container with the docker run snippet and then executes the command at the end, namely /bin/bash. Adding an -it flag lets the docker run command know that the session is interactive, and the –rm flag makes sure that the container is removed after we have exited the interactive bash shell. The last piece of this code is the docker-react, which is the image we just built.

Now that we have access to the container, let’s make sure that the dependencies we need for building the ReactJS application are available:

Looks like we have everything that we need. Awesome! Now we can attach our current directory to Docker. In order to accomplish this, we will use the docker-compose.yml file:

Compose is a tool used in Docker for defining and running multi-container applications. In Compose, you will use a YAML file for configuring the application services. This allows you to create and start all of the services of your configuration with a single command.

Make a file called docker-compose.yml and then paste in the following content:

• We use version to show which version of docker-compose the system should use.
• You will define your containers under services.
• The name of our first service is web.
• build is the same command as docker build. If you’ll notice, we have also included context and the Dockerfile, which is the same configuration as when we ran the docker build command.
• Finally, we attach the current folder ., to /usr/app directory by using the volumes command.

To show Docker how to find our working directory, we will edit the Dockerfile slightly and add WORKDIR. I always recommend using a working directory. Throughout any part of the process, all commands run will automatically get executed in the directory we have created, even when that command is to give us an interactive shell. The new Dockerfile should look like this:

Make sure you are aware that we have set the work directory to /usr/app. Also, within the docker-compose.yml file, in the volumes section, we attached the current directory, docker-react to /usr/app. We did this because each time you attach a volume, any changes that are made to the /usr/app directory within the container will show up in the docker-react directory, and it works the other way around as well.

Great! We are finally ready to create our first project by running the ReactJS command. We can get an interactive shell in the container by using docker-compose:

This command is relatively simple. By using the -f option we are specifying the docker-compose.yml file. Then we are running /bin/bash on the web service (remember that this is the name we assigned to our service in the docker-compose.yml file) by using the run command.

Finally, we can create a ReactJS application when we run npx create-react-app my-app.

You should see that a my-app folder is now present in the local directory you have been working within. In my example it is the docker-react folder:

We have reached the end of this tutorial. Don’t forget that you are not limited to Dockerizing only ReactJS apps – feel free to use Docker on any application you use. Spend some time testing it out, and seeing all of the unique features available by running the application or using it on your browser. Have fun!

Are you a developer interested in growing your software engineering career? Apply to join the Andela Talent Network today.