Docker for Front-end developers

As a Front-end developer, you may encounter situations where you need to work with Docker, particularly on projects with modern stacks, which are common in today's industry. There are numerous resources available online to learn Docker, but they often contain technical jargon and terminology that can be confusing, especially for self-taught developers or Boot-camp graduates. This post aims to provide the necessary knowledge to make using Docker less frustrating and help you focus on writing CSS happily. knowledge to be less frustrated when using docker to enjoy writing CSS.

What problems does Docker solve?

Most courses will start explaining how Docker works, but who cares at the beginning? We first want to know the problems Docker help us to fix.

Do you remember when you deliver your application and you find out that it doesn't work in production but it does in your machine? and you had to investigate the production environment and set it up to match your local environment for your application to work?, Or when you update the development environment and you have to do the same thing to the production environment?

Well maybe you don't, and other people are doing it for you (devops), but the one thing you should know is that synchronizing the development and production environment is painful and time-consuming but docker helps us fix these problems.

Of course, docker solves so many other complex problems, I just want to make things simple and look at it from a Front-end developer perspective.

Docker comes to the rescue

We humans always find solutions to our problems. It's just a matter of time until a lazy person or a group who doesn't want to repeat doing something invent a quick way to do it.

What if we have a container that can package up code and all its dependencies so the application runs reliably regardless of where it will be deployed?

This is what docker does, In simpler words, Docker is a tool that allows developers, sys-admins, etc. to easily deploy their applications in a sandbox (called containers) to run on the host operating system i.e. Linux. The key benefit of Docker is that it allows users to package an application with all of its dependencies into a standardized unit for software development.

We can do the same thing with Virtual machines, but Docker has its own advantages over VMs. I'll not talk about this in this post.

What you should know at the beginning

To tell Docker what to do, we use a file called Dockerfile which is a text document that contains all the commands a user could call on the command line to assemble an image. The image is the blueprints of your application, which form the basis of containers. It is a lightweight, standalone, executable package of software that includes everything needed to run an application, i.e., code, runtime, system tools, system libraries, and settings. The container simply is just an instance of the docker image.

Think of the image as the Class in OOP, and the container as the Object of that Class, we can use one image to create multiple containers as we can create multiple Object with one Class.

Let's put this into practice

First you will need to have Docker installed on your machine, Once you have it installed let's try to put w
at we have learned so far into practice.
We will begin by creating an image for our Front-end app to be able to deploy it anywhere Docker is running.

You can use your already created personal project if you want. To keep things simple i will start from scratch with a basic React app created using create-react-app.

~ npx create-react-app frontend
~ cd frontend
~ npm start

This will create a new project and run it on your local machine. So let's Dockerize it.

To do that, we will tell Docker what to do by using the Dockerfile. In the root of the project create a file and name it Dockerfile and write the following.

# Select the image to use
FROM node

## Install dependencies in the root of the Container
COPY package.json yarn.lock ./
ENV NODE_PATH=/node_modules
ENV PATH=$PATH:/node_modules/.bin
RUN npm

# Add project files to /app route in Container
ADD . /app

# Set working dir to /app
WORKDIR /app

# expose port 3000
EXPOSE 3000

Simply, it tells Docker how to build the image by defining.

• Which image I want to use,
• Which files will be inside
• Environment variables
• The commands that i want to be executed.
• The exposed port

Now that we have our Dockerfile, we will tell docker to build an image based on it.

~ docker image build -t frontend

This simply will create an image from the Dockerfile we created with the name frontend.

To see the image you created, Run the following command.

~ docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
frontend latest b530cde7abk1 10 minutes ago 1.18GB

Now that i have the image of my project, it's time to run the container.

~ docker run -p 3000:3000 frontend

Go to http://localhost:3000, and you will find that the application is up and running. Congratulations.

I'll let you figure out by yourself how to stop the container 😉 and delete it.

Final words

There are so many resources out there that can help you dive deep into Docker, and I'm sure you now have the foundation to build more knowledge on it, and the best way to start is the docker official documentation https://docs.docker.com/ duh.