Development Environments using Docker

Through my development journey, I eventually came across concept of containers. If you don’t know, they are like isolated environments running on top of a host machine. Host can configure resources for containers but containers can’t configure or access resources it’s not allowed to. In addition to it (the best part), we can save state of containers (as image) and can run any number of copies of these containers anywhere.

The containers are mostly used in production to host applications with isolated and varied environments on same host machine (either on a local machine or on cloud). But as you might have guessed, these environments can also be shared among people, and to run it user don’t need to configure anything on their machine, JUST RUN IT!

Putting it in context, this means anyone new to a project don’t need to go through hassle of setting up the development environment and can just start developing on it. For JavaScript projects, it means no need to install Node on host, no need to install Prettier, Yarn, etc. Just run container with everything pre-configured and start developing!

To illustrate it, we would be creating a node project that uses container for its development environment. I would be splitting the work into two perspective:

• Project creator: Developer who would create project and container image for it.
• Project Developer: Developer who would develop inside container.

Requirements

• Docker (from docker website)

Project Creator Perspective

Step 1: Create project

For this we would be using a empty next project. I have already made one for you :). Just run following clone command:

$ git clone https://github.com/rishabh3112/docker-next.git

Step 2: Create Docker Image

An image is saved state which can be run as container later. One may use a prebuilt images from Docker Hub. One may use Dockerfile to create custom image. Go ahead and create a empty file named Dockerfile and fill it with content below.

FROM node:12
RUN npm install -g prettier eslint
WORKDIR /my-app

This file will differ from project to project and one may use prebuilt images from Docker Hub as their base. I used one from docker hub too with everything node already setup.

Step 3: Document Commands for build and run

Create a README.md to document commands for building and running the containers. Copy content below into a README.md:

build: `docker build -t my-app:latest`
running: `docker run -it --rm --init --tty -p 3000:3000 --mount type=bind,source="$(pwd)",target=/my-app my-app:latest bash`

Project Developer Perspective

Now assume you are a new developer and want to work on this project, what you need to do is just build image (one time) and then run container! That too you can just copy paste into terminal from README,md! Go on run those commands. You would be dropped in a bash shell where you can run any command that project needs. For us, we can install dependencies and start development server:

$ yarn install
$ yarn dev

Open localhost:3000 in your browser. Make changes to pages/index.js and see changes being reflected to browser in realtime ;). For this didn’t need to install node, yarn, prettier, eslint, etc.

Hope you enjoyed the experience this offers as much as I did. This is specially helpful for projects involving python and java, were setting up development environment could be troublesome.

BONUS: Dev Containers on vscode

On same principle as shown above, but works out of the box! Read more about it here