This README provides a step-by-step guide for containerizing a React frontend and a .NET backend, creating Helm charts for Kubernetes deployment, and deploying them in minikube environment and access the front-end application using port-forward.

1. Prerequisites
2. Dockerization
   • React Frontend
   • Backend (.NET)
3. Helm Chart Creation
4. Deployment
5. Post-Deployment
6. Troubleshooting

• Docker installed on your machine.
• Minikube cluster set up.
• Helm installed.

1. Dockerfile for React Frontend

   Dockerfile created for frontend React app:

    FROM node:14
   
    WORKDIR /app
    
    COPY package*.json ./
    
    RUN npm install
    
    COPY . .
    
    EXPOSE 80
    
    CMD ["npm", "start"]

2. Build Docker Image

   cd front-end

   docker build -t front-end:v1.0.0 .

3. Push Docker Image to Registry

   Tag and push the image to your Docker registry (e.g., Docker Hub, Azure Container Registry).

   docker tag front-end:v1.0.0 <your-registry>/front-end:v1.0.0
   docker push <your-registry>/front-end:v1.0.0

1. Dockerfile for .NET Backend

   Dockerfile created for Backend PaymentApi App:

    # Stage 1: Build the application
    FROM mcr.microsoft.com/dotnet/sdk:7.0 AS build
    
    WORKDIR /app
    
    COPY *.csproj ./
    RUN dotnet restore
    
    COPY . .
    
    RUN dotnet publish -c Release -o out
    
    # Stage 2: Run the application
    FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS runtime
    
    WORKDIR /app
    
    COPY --from=build /app/out ./
    
    EXPOSE 80
    
    ENTRYPOINT ["dotnet", "payments-api.dll"]
   

2. Build Docker Image

   docker build -t payments-api:v1.0.0 .

3. Push Docker Image to Registry

   docker tag payments-api:v1.0.0 <your-registry>/payments-api:v1.0.0
   docker push <your-registry>/payments-api:v1.0.0

HelmChart created for frontend React app:

replace <your-registry> with docker registry

image:
  repository: <your-registry>/front-end
  pullPolicy: IfNotPresent
  tag: "v1.0.0"

HelmChart created for frontend React app:

replace <your-registry> with docker registry

image:
  repository: <your-registry>/payments-api
  pullPolicy: IfNotPresent
  tag: "v1.0.0"

1. Install Helm Chart

   Navigate to the directory containing your Helm chart and run:

   helm install front-end front-end-chart -n front-end

2. Verify Deployment

   Check the status of the deployments and services:

   kubectl get deployments -n front-end
   kubectl get services -n front-end

1. Install Helm Chart

   Navigate to the directory containing your Helm chart and run:

   helm install payments-api payments-api-chart -n payments-api

2. Verify Deployment

   Check the status of the deployments and services:

   kubectl get deployments -n payments-api
   kubectl get services -n payments-api

• Access the Applications: port-forward the front-end and payments-api service to access the frontend and backend applications.

  kubectl port-forward svc/payments-api 8080:80 -n payments-api
  kubectl port-forward svc/front-end 5039:5039 -n front-end

  access front-end app in the browser using http://localhost:8080

  

• Scaling: You can scale your applications by updating the replicas field in the values.yaml file and running helm upgrade.

• Logs: Check the logs of the pods using kubectl logs.