Build Docker Image from React App

Project Description

We have a web application that is built in React and NodeJS running locally. We need to build a docker image of it so that we can run it on EC2 or ECS depending upon the client’s Requirements.

Build a docker image of our application creating a Dockerfile of it. After creating a Dockerfile, build the image locally and pushed that image to docker Hub so we can pull it inside the EC2 or ECR using its credentials.

Project Source: Techchak

Project Prerequisites

• Must be familiar with Web Applications, their dependencies and how they work.
• Should be familiar with NodeJS and React.
• Should know about Docker and Dockerfile.
• Must be familiar with the commands for creating and building Docker Images.
• Must have an idea of Docker Hub or ECR so that after creating the image we should push images to DockerHUB.
• Code Editor of choice.

What is Docker and why docker?

Docker is a platform designed to help developers build, share, and run modern applications such as the React Application used in this project. Docker packages software into standardized units called containers that have everything the software needs to run including libraries, system tools, code, and runtime. docker.com

Let us itemize our To-do list and work our way to actualizing the project goal.

The repo for the React application can be cloned here. https://github.com/techchak/techchak-sample-react-app-1

• Clone the Repo from here. https://github.com/techchak/techchak-sample-react-app-1
• Create a Docker file inside the Repo and build it locally.
• After that push to Docker Hub or ECR.
• Lastly, test it by either Running it locally or on EC2 or ECS by just pulling the Image from Docker Hub or ECR.
• Expose the port of your server or ECS Cluster if you use the server or ECS option.

To begin, clone the repo from https://github.com/techchak/techchak-sample-react-app-1 to your local workstation.

Using your code editor(I used VS code as my code editor on this project) , navigate to the directory containing the react application and create a Dockerfile inside the repo to build the container locally.( A simple Dockerfile)

lets build the image locally,

Give your built image a name using the -t flag to the earlier created image (I will name mine saidatech)

Run the docker images command to verify the image.

Lets expose the image to port 3000 on our localhost so that we can access the react web application on our browser

Head over to your browser and input localhost:3000 you should be able to access your application landing page

Great Job! We have successfully built our image locally and exposed it to accessible on port 3000.

Now lets is push the image to a registry where the image can be stored and available whenever needed by the team, organization or general public as the case maybe. I will be using Docker hub for this project, you can use a registry of your choice.

You need to have a docker account, if you don't one register a free account via https://hub.docker.com, you will need the credentials (User name and password) used to register the docker hub account to push image(s) to the registry (public or private) depending on you account preference.

Here use the command docker login on your terminal

Once you issue the docker login command it will ask for your docker hub username and password, supply the credentials you created your docker hub account with, After the successful authentication, you will see a message Login Succeeded , use docker images to verify the image name used to tag.

Use docker push to push image to docker hub

Verify the image is in docker hub ready to be pulled at anytime needed.

Finally, try to pull the image from the hub and expose it to be access on port 3000 on you local machine, if you using ECS or server expose it to your server clusters.

First delete the image on your local system using docker rmi <the_image_id_number> (insert the image id number) then run below docker run command with the name of the image pushed to docker hub registry

You will observe the image being pulled and complied successfully into a container. you can use the docker exec -it <the_image_id_number> sh command to see that the content of the react application in your local system is the same contained in the pulled image.

Once more open your browser to the exposed port 3000 and access your react web application.

lookout for the continuation of the project where I will be Deploying the React app into a Web Server.

Thank you for reading.

#KLAP

#Keep #learning #and #practicing