Skip to content
Klutch.sh Docs

Deploying a React App

React is a popular JavaScript library for building user interfaces, developed and maintained by Facebook. It enables developers to create fast, interactive, and reusable UI components for web applications and SPAs.

This guide explains how to deploy a React application to Klutch.sh, both with and without a Dockerfile. It covers installation, sample code, and deployment steps.

Prerequisites

  • Node.js & npm installed (Download)
  • Git and GitHub account
  • Klutch.sh account

Getting Started: Create a React App

  1. Create a new React app using Create React App:
    Terminal window
    npx create-react-app my-react-app
    cd my-react-app
  2. Start the development server:
    Terminal window
    npm start
    Your app should be running at http://localhost:3000.

Sample Code (src/App.js)

Replace the contents of src/App.js with:

function App() {
  return (
    <div>
      <h1>Hello from React on Klutch.sh!</h1>
    </div>
  );
}
export default App;

Deploying Without a Dockerfile

React apps are static sites after build. Klutch.sh can deploy static sites directly.

  1. Push your React app to a GitHub repository.
  2. Log in to Klutch.sh.
  3. Create a new project.
  4. Create a new app:
    • Select your React GitHub repository and branch
    • Choose “Static Site” as the app type
    • Set build command: npm run build
    • Set output directory: build
    • Configure region, compute, and environment variables as needed
  5. Click “Create” to deploy. Klutch.sh will build and serve your static React app.

Deploying With a Dockerfile

If you need custom server logic or want to use a Dockerfile:

  1. Add a Dockerfile to your project root. Example: 
    # Build stage
    FROM node:20-alpine AS builder
    WORKDIR /app
    COPY package*.json ./
    RUN npm install
    COPY . .
    RUN npm run build
    

    # Production stage
    FROM nginx:alpine
    COPY --from=builder /app/build /usr/share/nginx/html
    EXPOSE 80
    CMD ["nginx", "-g", "daemon off;"]
  2. Push your code (with Dockerfile) to GitHub.
  3. In Klutch.sh, create a new app and select the Dockerfile option when prompted.
  4. Set service details and environment variables as needed.
  5. Click “Create” to deploy. Klutch.sh will build your Docker image and serve your React app via Nginx.

Resources

Deploying React to Klutch.sh is fast and flexible. Use static site deployment for most cases, or Dockerfile for custom setups.