D ocker is used to containerizing the Application and use anywhere, simply pull the container from docker hub. In this post, we are going to...
1.Install the docker: The previous blog we have installed the docker on Linux machine. 2.Create the application using react.js: Install the react and create the react application for testing. Command : npx create-react-app my-react-docker-app Once the React Application configured with the default configuration need to go inside the directory. Command: cd my-react-docker-app React application need to check the working status, so start the npm using the below command: Command: npm start 
3. Dockerizing the Image:
Before creating the docker image need to create the Docker file, Inside the docker file need to mention the commands to build the docker image.
Step 1: Adding a base image
Here “ From node: current-alpine “ command used to add the base image.
To run any application need one operating system. Here react application using, so need to node installed on it, In the docker, we have an option called the alpine base image, which is a lightweight operating system base image used for to containerized the docker.
Current-alpine means an updated version of the alpine image, "from node : current-alpine" it along with node, we can select the particular image version also.
Step 2: Adding a working directory
Now we have the base image with node installed alpine OS. Next need to add the working directory.
We can create the new directory or use an existing directory to copy the react application on it.
“ WORKDIR /app ”
In our project, We are creating the new directory name as an app and copy the files on it.
Step 3: Copying application and installed all dependencies
Copying the react files into the ./
“COPY package*.json ./” --> The package.json file which denotes the required dependencies.
“ RUN npm install “ --> Run the npm install command is used to install the dependencies mentioned in the package.json file.
“COPY . .” --> Copy the all files from local react folder to the docker image.
Step 4: Adding and run the startup command:
“ CMD ["npm", "run", "start"] “
All the files are copied now need to check the react application working status, we need to run the npm start command to start the react application, so run the above command to start the react application.
In docker file, npm start command pass as an array format.
4.Creating the Docker Image:
Docker file getting ready, now need to create the docker image using the existing Dockerfile.
The command to creating the docker file:
Command: docker build -t techiev/react-app .
The above command used to create the docker image
Here dot represents the building context.
Now successfully created the docker image called techieview/react-app.
If we want to enable the autoload functionality to run the below command for the same.
Command: docker run -it -p 3000:3000 -v /app/node_modules -v $(pwd):/app techieview/react-app
where -v /app/nodemodules --> It defines keep use the node_modules inside the containers.
where -v $(pwd):/app --> Assign the current working directory to the app folder inside the container.
When we change the code in the present working react directory means it will affect to app folder inside the container.
Example:
Now change the code as “Hello world testing!”, run the above command and see the result in the browser
