Ship Your React Side Project to Kubernetes

Why use a formal pipeline for a side project?

Because side projects are exactly where people cut corners and then lose a weekend debugging a cluster that returns no data. The Three-Stage Pipeline — Run Locally → Containerise with Docker → Deploy on Kubernetes — is lightweight enough for a solo build but disciplined enough to save you hours. Each stage validates before the next, so a broken deploy points you at a specific layer instead of a mystery.

A typical example: you built a React dashboard that calls a weather API on your laptop and want it publicly accessible on a cluster. The pattern takes you there without surprises.

How do I get set up quickly?

Grab your API key, install Node.js, start Docker Desktop, and export your registry identity:

```

export DOCKER_USERNAME=

```

Keep this variable alive for the whole session — it keeps your image names consistent so you don't fat-finger a tag at 1am. Make sure you've created a namespace in your target cluster and know your cluster name.

Where do I put my API key and why does it matter?

In the Redux Actions layer — the single correct home for API calls. This follows the Components vs. Containers architecture: Containers hold logic, Components stay presentational. Putting your weather (or movie) API key here instead of in a component means you can rotate it in one place later and it won't leak into reusable UI. Confirm the Actions define start, success, and error types if you want to add a loading spinner.

How do I validate before deploying?

Install dependencies, compile styles, and run locally:

```

npm install

npm run build:css

npm run start

```

Don't skip `build:css` — your Sass won't compile and the app will look broken. Confirm the API returns data at localhost. Then containerise and test:

```

docker build -t $DOCKER_USERNAME/:latest .

docker images

docker run -p : $DOCKER_USERNAME/

```

If `localhost:` works identically to your local run, containerisation is solid.

How do I get a public URL?

Rebuild the image inside your provider's registry (Container Registry Parity means Docker Hub alone won't cut it on managed clusters):

```

ibmcloud cr build -t registry..icr.io//:latest .

kubectl create deployment --image=registry..icr.io//:latest

kubectl expose deployment --type=NodePort --name= --port=

```

Make the `--port` match your Dockerfile EXPOSE port — the Port Consistency Contract is the one thing that silently breaks side-project deploys. Then find your URL:

```

ibmcloud cs workers # Public IP

kubectl describe service # NodePort

```

Share `:` and your side project is live.

What if it deploys but shows nothing?

Check two things: the port match (Dockerfile vs. expose) and the API key in the Actions layer. A wrong port means no response; a bad key means empty data that looks like a bug. Both are quick fixes once you know where to look.

What's my next step?

Pick one small React app, run all ten steps tonight, and get a public URL you can share. Use NodePort now — you can always upgrade to LoadBalancer if the project takes off. Clone your repo, export DOCKER_USERNAME, and start with local validation.