Dockerise Your React.js Portfolio Website.

Introduction

If you’ve built a sleek, blazing-fast application with Vite + TypeScript + Tailwind CSS, the next big step is to make it deployable anywhere. In this tutorial, I’ll show you how to Dockerize your React.js app — making it easy to run your project in a containerised environment with just two commands.

I’ll walk you through the full process using my open-source portfolio project on GitHub.

What We’ll Cover

• Project Overview

• Writing the Dockerfile

• Building the Docker Image

• Running the Container

• Final Testing

1. Project Overview

Here’s what my project uses:

• React.js for lightning-fast development

• TypeScript for type-safe coding

• Tailwind CSS for modern UI styling

• Docker for consistent containerised deployment

You can find the source code here:
👉 GitHub Repository (https://github.com/laoluafolami/portfolio-olaolu.git)

2. Creating the Dockerfile

At the root of your project, create a file named Dockerfile (no extension):

# Use an official Node.js runtime as the base image
FROM node:18-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the app for production
RUN npm run build

# Install a lightweight static file server
RUN npm install -g serve

# Expose the port the app will run on
EXPOSE 4173

# Command to run the app
CMD ["serve", "-s", "dist", "-l", "4173"]

This Dockerfile does three key things:

• Installs dependencies

• Builds your static app

• Serves it from the dist folder using serve

3. Build the Docker Image

Open your terminal in the project directory and run:

docker build -t portfolio .

This will package your app into a Docker image named portfolio.

To view the image you just created, use:

docker image ls

4. Run the Docker Container

Now, let’s run the container and map the internal port to a local one (host machine):

docker run -d -p 4173:4173 --name portfolio- portfolio

• -d: Runs in detached mode

• -p 4173:4173: Maps local port 4173 to the container

• --name: Gives your container a name

To check the running container:

docker ps

Open your browser and visit:

http://localhost:4173

Boom! 🎉 Your portfolio is running in Docker!

---

✅ 5. Docker Cleanup (Optional)

To stop and remove your container:

docker stop portfolio
docker rm portfolio

To remove the image:

docker rmi portfolio

Final Thoughts

Dockerising your Vite app helps you ship it anywhere with confidence, whether you're deploying to cloud platforms like AWS, Azure, or just testing locally.

---

Let’s Connect

If you found this helpful, share it and follow me here on Hashnode for more DevOps and frontend content.