Dockerize React Project - handson

Alright, buckle up, buttercup, because we're about to dive headfirst into the wild, wacky world of Dockerizing React! Prepare for launch! 🚀

Step 1: The Ancient Scrolls (aka Links)

First, we consult the sacred texts:

• React for Dummies (aka Basics): https://dockerhandson25.blogspot.com/2025/02/react-basics.html
• Dockerizing React for Mortals (aka the Real Deal): https://www.docker.com/blog/how-to-dockerize-react-app/

Step 2: Birth of a Project (aka Making a Folder)

Bash

Follow : https://dockerhandson25.blogspot.com/2025/02/react-basics.html

Step 3: Docker Dance (aka Checks and Balances)

Make sure your trusty Docker Desktop is doing its thing (for Windows users, obviously). Then, unleash these commands in your VS Code terminal (because terminals are cool):

Bash

docker --version  # Is Docker alive? *Dun dun DUN* (Hopefully, yes)
docker images   # What images are chilling in the Docker fridge?
docker ps -al   # Are any containers partying hard?
npm             # Is npm in the house?  (Should look something like npm@8.19.2 C:\Program Files\nodejs\node_modules\npm)

Step 4: The Dockerfile Recipe (aka the Magic Formula)

Create a file named Dockerfile (no extension, just like your cool friend) and paste this magical incantation inside:

Dockerfile

# Build Stage (Where the magic happens)
FROM node:18-alpine AS build  # We're using a tiny Node.js image, 'cause we're efficient!
WORKDIR /app               # We're setting up shop in the /app directory
COPY package*.json ./      # Copy the package files, so npm knows what to install
RUN npm install            # Install those dependencies!  (Gotta have 'em!)
COPY . .                   # Copy everything else, the whole shebang!
RUN npm run build          # Build the React app!  (Like baking a cake... but with code)

# Production Stage (Where the magic gets deployed)
FROM nginx:stable-alpine AS production  # Nginx is our server, sleek and stable
COPY --from=build /app/build /usr/share/nginx/html  # Copy the built app into Nginx's territory
EXPOSE 80                 # Open port 80 for the world to see (or at least your local machine)
CMD ["nginx", "-g", "daemon off;"]  # Start Nginx!  Let the serving commence!

Step 5: The Error Hunt (aka Debugging)

If you see any grumpy errors in Message.tsx, make sure there are no rogue # symbols lurking in your name="..." attributes. They're sneaky like that.

Step 6: Image Creation (aka Building the Beast)

Bash

docker build -t my-react-app-dev --target build .  # Build the image!  Give it a name: my-react-app-dev
docker images  # Check if your image is born! It should be there, all proud and shiny.

Step 7: Running the Show (aka Launching the Container)

• Development Mode: docker run -p 3000:3000 my-react-app-dev (Open your browser to localhost:3000)
• Production Mode: docker run -p 80:80 my-react-app (Open your browser to localhost)

Step 8: Docker Hub Dreams (aka Sharing with the World)

1. Create an account on hub.docker.com. (Gmail is your friend!)
2. Create a repository (give it a cool name, like i-sample-react-docker). Your namespace will be something like yourusername.
3. Login to Docker Hub: docker login -u yourusername (Enter your password when prompted)
4. Tag your image: docker tag my-react-app-dev yourusername/i-sample-react-docker:v1 (Replace with your actual username and repo name)
5. Push it to the cloud! docker push yourusername/i-sample-react-docker:v1

Step 9: The Grand Finale (aka Someone Else's Turn)

Now, someone else can pull your awesome image and run it! More on that in another thrilling episode! Stay tuned! 🍿