Blog Post

Docker 🐳

Oct 20242 min read/docker-guide

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:

Create a Docker Account:

Create an account on Docker Hub and install Docker on your machine.

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.

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.

Build the Docker Image:

Run the command: docker build -t dockerreactimage .

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

Run: docker login in your terminal and log into Docker Hub.

Tag the Docker Image:

docker tag dockerreactimage:latest yourNameHere/dockerreactapp:latest

Tag the image for Docker Hub:
Replace yourNameHere with your actual Docker Hub username.

Push the Docker Image:

docker push yourNameHere/dockerreactapp:latest

Push the image to Docker Hub:

Deploy to DigitalOcean:

ssh root@<DROPLET_IP> (replace <DROPLET_IP> with your Droplet's IP).

docker pull yourNameHere/dockerreactapp:latest

docker run -d -p 8080:3000 yourNameHere/dockerreactapp:latest

SSH into your DigitalOcean Droplet:
Pull the Docker image from Docker Hub:
Run the container on the Droplet:
Your project will now be live in the cloud at: 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.

Back to all posts