🐳Docker

Docker is a tool that simplifies running applications in containers, and self-contained packages are created using a Dockerfile.

A Dockerfile is a set of instructions for creating a container. It specifies the base image, commands, and files to include. For example, it can tell Docker to use a web server image, add website files, and start the web server.

1️⃣Copy the code from GitHub Repository

git clone <URL>

2️⃣Start the docker

sudo su
systemctl start docker
service docker start
docker ps
systemctl status docker

3️⃣Create "Dockerfile"

# Use an official Node.js runtime as a parent image
FROM node:20 AS build
# Set the working directory in the container
WORKDIR /app
# Copy the package.json and package-lock.json files to the container
COPY package*.json ./
# Install the dependencies
RUN npm install
# Copy the rest of the application's source code to the container
COPY . .
# Build the React application
RUN npm run build
# Use an official Nginx image to serve the build
FROM nginx:alpine
# Copy the build output to the Nginx HTML directory
COPY --from=build /app/build /usr/share/nginx/html
# Expose the port Nginx runs on
EXPOSE 8383
# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

4️⃣Build Docker Image

docker build -t todo-app .

5️⃣Run the application

docker run -d -p 8383:80 --name todo-list todo-app

sudo docker ps

6️⃣Output: localhost:<port>

7️⃣Stop and Remove the docker container

docker stop <container_id_or_name>
docker rm <container_id_or_name>

💡Conclusion:

In this blog, we created a To-Do list app using React.js and Docker. We covered setting up the app, containerizing it with Docker, addressing build issues, and managing Docker containers. This process showcased Docker's power in ensuring consistent environments and streamlining deployment.