🚀 Deploying a Dockerized Node.js App on Render

This guide walks you through Dockerizing your app, pushing it to Docker Hub, and deploying it on Render.
1️⃣ Initialize Docker & Build Images
Start by navigating to your project directory:

sh
Copy
Edit
cd ~/Desktop/taskplanner/tasks-app
Then, build the Docker images for the backend and frontend:

🔹 Backend
sh
Copy
Edit
docker build -t vicmaich/tasks-app-backend:v1 ./backend
🔹 Frontend
sh
Copy
Edit
docker build -t vicmaich/tasks-app-frontend:v1 ./frontend
Check if the images were created:

sh
Copy
Edit
docker images
2️⃣ Run Containers Locally (Testing)
Start the containers using Docker Compose:

sh
Copy
Edit
docker-compose up --build
This will:

Start MongoDB (tasks-app-mongo-1)
Start Backend (tasks-app-backend-1)
Start Frontend (tasks-app-frontend-1)
Check running containers:

sh
Copy
Edit
docker ps
Test the backend:

sh
Copy
Edit
curl http://localhost:3001
Test the frontend by opening:
👉 http://localhost:3000

If everything works, proceed to deployment.

3️⃣ Tag & Push Images to Docker Hub
Log in to Docker Hub:

sh
Copy
Edit
docker login
🔹 Tagging
Tag the images before pushing:

sh
Copy
Edit
docker tag vicmaich/tasks-app-backend:v1 vicmaich/tasks-app-backend:latest
docker tag vicmaich/tasks-app-frontend:v1 vicmaich/tasks-app-frontend:latest
🔹 Pushing
Push the images to Docker Hub:

sh
Copy
Edit
docker push vicmaich/tasks-app-backend:latest
docker push vicmaich/tasks-app-frontend:latest
4️⃣ Deploy on Render
Go to Render (https://dashboard.render.com/) and:

🔹 Deploy Backend
Click New Web Service
Choose "Deploy an Existing Image"
Use:
bash
Copy
Edit
docker.io/vicmaich/tasks-app-backend:latest
Set PORT to 3001
Click Deploy
🔹 Deploy Frontend
Repeat the steps for the frontend.
Use:
bash
Copy
Edit
docker.io/vicmaich/tasks-app-frontend:latest
Set PORT to 3000
Click Deploy
5️⃣ Update & Redeploy
If you make changes, rebuild, tag, and push new images:

sh
Copy
Edit
docker build -t vicmaich/tasks-app-backend:v2 ./backend
docker build -t vicmaich/tasks-app-frontend:v2 ./frontend

docker tag vicmaich/tasks-app-backend:v2 vicmaich/tasks-app-backend:latest
docker tag vicmaich/tasks-app-frontend:v2 vicmaich/tasks-app-frontend:latest

docker push vicmaich/tasks-app-backend:latest
docker push vicmaich/tasks-app-frontend:latest
Then, update the Render deployment to use the new image versions.

🎉 Done!
Your app is now fully Dockerized and hosted on Render. 🚀🔥