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
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.
- Node.js (Version 8 or newer) — https://nodejs.org/en/download/
- Chrome — https://www.google.com/chrome/
- Visual Studio Code (you can use any other editor or IDE)
- Docker — Please see the latest install steps at https://docs.docker.com/get-docker/
After installing all software’s
Verify Docker has been installed
After installing Docker, run the following command in your terminal to verify Docker has been installed.
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
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
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:
6) Copy and paste the below content as per the node latest version
FROM node:12.18.3LABEL version="1.0"LABEL description="This is the base docker image for the react app "LABEL maintainer = ["firstname.lastname@example.org"]RUN mkdir /srv/exampleWORKDIR /srv/exampleCOPY package.json yarn.lock ./RUN yarn && yarn cache cleanCOPY . .
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:3000command: yarn startvolumes:- "./src:/srv/example/src"test:build:context: .environment:- CI=truecommand: 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
docker-compose run test
Dev run Command
docker-compose up dev
Github links to download code —
Official links for Docker for more details
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@example.com
Happy learning :)
How to add Swagger UI to an existing Node.js and Express.js project
In this tutorial, we’ll be learning how to add swagger to existing Node Js and Express.js. As we already learned in…
Tools: Screen Readers, Browser Extension, Color Contract tools for Website Accessibility
Tools for Website Accessibility -
How to create a REST API with Express.js and Node.js
In this tutorial, we’ll be learning how to build a Rest API in Node.js and Express.js by building a simple crud user…
Quickest Five Way to Center Div with CSS
In this tutorial, we’ll be learning how to Center div with CSS :)