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.
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 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!
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
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
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
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
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
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
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
versionto show which version of docker-compose the system should use.
- You will define your containers under
- The name of our first service is web.
buildis the same command as
docker build. If you’ll notice, we have also included
Dockerfile, which is the same configuration as when we ran the
- Finally, we attach the current folder
/usr/appdirectory by using the
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,
/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
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
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
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!