Docker for web developers
Docker is in existence for almost 7 years now and got very popular as a containerization solution that has helped to isolate infrastructure challenges with development tasks and as a result proved to be a pretty good tool for faster deliveries. Recently as I got a chance to explore some features of it and I found it really helpful as part of the development process as well. This write up is to extend my learnings with those who wish to start with docker and get going quickly with understanding some basic steps.
The use case
I took on one of my sample react application created with CRA (create-react-app) and build a custom docker image for it. This image is also being pushed to the docker hub so that it can be pulled easily for a faster on-boarding for anyone who wishes to start with it.
Getting started
Let’s start by understanding some tangible benefits of docker for web developers. I think this would set the stage as to why we as a developer should even get into it as it seems more of a devops stuff. Here are some quick real life cases and how it is benefitting us.
Faster on-boarding
A baked in docker image is helpful for someone just starting in the team and alleviate him to install various softwares with specific versions and also to gain access to various libraries to get started. He/She could simply pull a docket image and run the container to make the development environment up and running.
Save from app conflicts
A typical developer problem is “my piece of code is working on my machine perfectly however it breaks on other developers box” and many a times when we need help from someone else to do a pair programming or debug session, such issues are a real pain. Docker ensures that everyone has the exact same replica of environment even when working on different platforms and save off from those conflicts.
Faster shipping
As the infrastructure is being taken care of with docker containers, it is quite easy and fast to deploy softwares from one environment to other. Docker allows you to pass specific environment specifications when building images and hence the releases can be easily tested and rolled out with those specific configurations.
Lightweight solution
It is quite suitable for development as well due to it’s layered file system architecture, it allows developers to run multiple containers on their box versus managing the similar setup via a virtual machine solution which is quite resource intensive.
Quick look at Docker architecture
In the basic terms, Docker is a client server application.
Registry/hub: Store of different discoverable images.
Docker daemon: This is the server side piece to manage the images and containers on the host machine.
Docker client: docker client is the CLI/script based interface to execute different commands to pull/build images, run containers and monitor them on the host machine.
Images and containers
Images are read-only template of instructions to create a docker container. Such baked-in images can be stored on docker registry and can be easily pulled by multiple users to run it on their docker host.
Containers are nothing but runnable instance of an image. A container is relatively well isolated from other containers and its host machine. This is where it is very useful for developers dealing with multiple versions of softwares for different projects as running containers did not pollute host system configurations. Containers also keep a read-write layer on the host system to be able to read and write from your local folders.
How to create a custom docker image for development ?
As I mentioned earlier, we are going to setup a custom image for our application that can be used by your other team members to setup the development environment on their respective boxes.
It’s very easy to setup a docker image for the development. You can get started with installing docker desktop.
We are using the Dockerfile to setup the custom image. Its very simple to write. As the react app that’s in question here, is being built on top of CRA, we need node platform to build and run the development server. The node image can be pulled from Docker hub as a baseline image and rest of the instructions can be built on top of it.
Here is how the Dockerfile looks like in it’s simplest format. This custom image is building the platform along with source so anyone who is going to use this image can directly run the server and play with the application.
FROM node:10.13-alpineENV NODE_ENV devWORKDIR /usr/src/appCOPY [“package.json”, “package-lock.json”]RUN npm install — productionCOPY . .EXPOSE 3000CMD npm start
As depicted above, there are instructions to set environment variables that would be available to your scripts. A WORKDIR command is used to set the current directory on the container and all further instructions would be executed relative to it. The EXPOSE command is to tell the client where this current image is listening to in order to attach any instruction coming from clients.
Once the Dockerfile is ready, following is the command to build and push it to the docker registry:
docker build -f Dockerfile -t miteshneema/reactapp
docker push miteshneema/reactapp:latestUsing Docker image for development
Now the question is - how the image built above is useful for other team members for development purposes as we said. Again, this is super quick and super easy.
A developer needs to pull the image using pull command and he/she can simply run it using the run command
docker pull miteshneema/reactapp:latest
docker run --rm -d -p 3000:3000/tcp miteshneema/reactapp:latestThat’s it! Now you can browse the app @ http://localhost:3000/
Isn’t that great!
And to hook this up with your local source code, you need to use the volumes. Volume is a great feature that allows us to point to a local directory from our host machine. A developer can hook up his/her local source code with the baked in infrastructure of image to continue with the development. Here is the command to hook up with the local source using volumes.
docker run -v $(pwd)/src:/usr/app/src -p 3000:3000/tcp miteshneema/reactapp:latestBingo! You’re ready to do your changes in the source and what’s more, it’s been picked up instantly by the hot reload feature of CRA and you can see the updates without a manual refresh.
At the end
So, this is a quick guide with the steps that I followed to setup development environment for one of my app. As you see, this is very handy for a development team to quickly get started and focus on the real business logic instead of looking around for various infrastructure related stuff and setting up those dependencies. What’s more is that it is highly scalable to setup different projects like back-end services, databases etc. that can talk to each other to complete an entire end to end development project.
It’s good for developers as they get an entire setup running on your local (by pulling different images and running multiple containers) plus get a hang of how the deployment of various pieces of their software looks like and work together. Also for devops, it allows them to configure and scale these pieces as different services and create an entire devops infrastructure using kubernetes and similar technologies.
Hope this helps with basic understanding of docker and for a quick start!
