Create your own Docker environment
Get started with any language without installing the dependencies in your computer
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.
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:
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:
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 runningdocker build
, as you can see we havecontext
and theDockerfile
just like when we were runningdocker 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.0WORKDIR /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.
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:
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!