Deploy a React Static App

Step-by-Step Guide

Deploying React + Vite / CRA to Kubeletto is done by configuring a Dockerfile, connecting your GitHub repository, and setting environment variables. Follow this step-by-step checklist to deploy your code:

1. 1

   Create a Dockerfile for the static build

   Build your React app and serve it with nginx in a single multi-stage Dockerfile.

   dockerfile

   FROM node:20-alpine AS builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm ci
   COPY . .
   RUN npm run build
   
   FROM nginx:alpine
   COPY --from=builder /app/dist /usr/share/nginx/html
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]

2. 2

   Add an nginx.conf for SPA routing

   React Router requires all paths to serve index.html.

   nginx

   server {
     listen 80;
     root /usr/share/nginx/html;
     index index.html;
   
     location / {
       try_files $uri $uri/ /index.html;
     }
   }

3. 3

   Deploy

   Push to GitHub or deploy from CLI. Kubeletto builds the container and serves your app.

   bash

   kubeletto deploy --source github --repo your-org/react-app --branch main

Related Kubeletto Features

Kubeletto offers automatic SSL certificate provisioning, zero-downtime rollbacks, and scale-to-zero autoscaling for React + Vite / CRA container workloads:

Frequently Asked Questions

Find direct answers to common questions about hosting, building, scaling, and managing React + Vite / CRA containerized apps on Kubeletto: