Docker 🐳

Docker 🐳
Docker simplifies development workflows and ensures that there is consistency across environments. Below is a quick guide for dockerizing a React project, pushing it to Docker Hub, and deploying it on a DigitalOcean Droplet.

Steps to Dockerize and Deploy:

1. Create a Docker Account: 
   - Create an account on Docker Hub and install Docker on your machine.

2. Spin Up a React Project:
   - Use `npx create-react-app dockerProject` to create a React project.
   - Navigate into the project folder: `cd dockerProject`.
   - Install dependencies: `npm install`.

3. Create a Dockerfile:
   - In the root of the project, create a Dockerfile. This file will outline the instructions for Docker on how to build and run your project in the cloud.

4. Build the Docker Image:
   - Run the command: `docker build -t dockerreactimage .`

5. Run the Docker Container:
   - Make sure nothing else is running on port 3000 to avoid conflicts.
   - Use: `docker run -p 3000:3000 dockerreactimage` to run the project.
   - It should now be available in the browser at: [http://localhost:3000](http://localhost:3000)

6. Login to Docker Hub:
   - Run: `docker login` in your terminal and log into Docker Hub.

7. Tag the Docker Image:
   - Tag the image for Docker Hub: 
     `docker tag dockerreactimage:latest yourNameHere/dockerreactapp:latest`
   - Replace `yourNameHere` with your actual Docker Hub username.

8. Push the Docker Image:
   - Push the image to Docker Hub: 
     `docker push yourNameHere/dockerreactapp:latest`

9. Deploy to DigitalOcean:
   - SSH into your DigitalOcean Droplet: 
     `ssh root@<DROPLET_IP>` (replace `<DROPLET_IP>` with your Droplet's IP).
   - Pull the Docker image from Docker Hub: 
     `docker pull yourNameHere/dockerreactapp:latest`
   - Run the container on the Droplet:
     `docker run -d -p 8080:3000 yourNameHere/dockerreactapp:latest`
   - Your project will now be live in the cloud at: [http://<DROPLET_IP>:8080](http://<DROPLET_IP>:8080)

That's it! 🚀 You've successfully dockerized a React app and deployed it to the cloud using Docker Hub and DigitalOcean.

Published: Oct 2024

← Back to Blog