How to Add Docker to Create React App(CRA) + Run Unit Tests

In this tutorial, we’ll be learning how to add a docker to Create-React App and run the unit tests.

Before we start please find below important technologies definitions.

1. Docker —

Docker is a popular open-source project written in go and developed by Dotcloud (A PaaS Company).

It is basically a container engine that uses the Linux Kernel features like namespaces and control groups to create containers on top of an operating system.

Docker is an open platform for developing, shipping, and running applications.

Docker enables you to separate your applications from your infrastructure so you can deliver software quickly.

With Docker, you can manage your infrastructure in the same ways you manage your applications

Official links for Docker

https://docs.docker.com/get-started/overview/

2. What is Kubernetes vs Docker?

A fundamental difference between Kubernetes and Docker is that Kubernetes is meant to run across a cluster while Docker runs on a single node.

Kubernetes is more extensive than Docker Swarm and is meant to coordinate clusters of nodes at scale in production in an efficient manner.

3. What is the difference between VM and Docker?

Docker is container-based technology and containers are just the user space of the operating system.

In Docker, the containers running share the host OS kernel.

A Virtual Machine, on the other hand, is not based on container technology. They are made up of user space plus kernel space of an operating system.

Prerequisites :

Download software’s

1. Node.js (Version 8 or newer) — https://nodejs.org/en/download/
2. Chrome — https://www.google.com/chrome/
3. Visual Studio Code (you can use any other editor or IDE)
4. Docker — Please see the latest install steps at https://docs.docker.com/get-docker/

After installing all software’s

Getting Started

Verify Docker has been installed

After installing Docker, run the following command in your terminal to verify Docker has been installed.

docker --version
Docker version 20.10.6, build 370c289

Set up a React App

1 ) Create a new React Application running the following commands in your command terminal

Check out https://create-react-app.dev/docs/getting-started/ if need more info for the below commands

npx create-react-app create-react-app-docker-unit-test
cd create-react-app-docker-unit-test
yarn start

Then open http://localhost:3000/ to see your app and you will see the app in the browser as below

2) Once the application is created, You should have an App.test.js file already generated inside the src/ folder

Open the App.test.js - The content will appear like below 

4) Verify the Test are running with yarn test command

run below command in a separate terminal

yarn test

Tests are running fine :)

Getting started with Docker Setup

Now we will set up the docker to build our dev and for our unit test CRA

Please follow below steps

3) Creating a docker file in your project directory

Create a new Docker file with:

touch Dockerfile

6) Copy and paste the below content as per the node latest version

FROM node:12.18.3

LABEL version="1.0"

LABEL description="This is the base docker image for the react app "

LABEL maintainer = ["kirtikau@gmail.com"]

RUN mkdir /srv/example

WORKDIR /srv/example

COPY package.json yarn.lock ./

RUN yarn && yarn cache clean

COPY . .

7) Create a new file docker-compose.yml with the below content

Add below code for react test in docker-compose.yml

Here you will see two services

a) dev — to run and build the dev environment

b) test — to run the test cases

version: '3'

services:

dev:

build:

context: .

ports:

- 3000:3000

command: yarn start

volumes:

- "./src:/srv/example/src"

test:

build:

context: .

environment:

- CI=true

command: yarn test

The following commands will now build our image, as well as execute yarn test or npm test

8) Final Step

a) Build Command

run below command in a separate terminal

docker-compose build dev

Test Command

docker-compose run test

Dev run Command

docker-compose up dev

Github links to download code —

GitHub Code

Official links for Docker for more details

https://docs.docker.com/get-started/overview/

Conclusion:

This is the explanatory medium story of How to add Docker with create react app(CRA) + run unit tests if you have any doubts, please mail me at [email protected]

Happy learning :)