---
title: "Deploy Create React App"
description: "A starter Create React App that uses Caddy"
category: "Starters"
url: https://railway.com/deploy/create-react-app
---

# Deploy Create React App

A starter Create React App that uses Caddy

**[Deploy Create React App on Railway](https://railway.com/template/create-react-app)**

- **Creator:** Brody's Projects
- **Category:** Starters
- **Total deploys:** 853

## Template content

### Create React App Site https://devicons.railway.app/Create%20React%20App?variant=light

- **Source:** https://github.com/brody192/create-react-app-starter
- **Public domain:** Yes

## Documentation

# Deploy and Host React on Railway

React is a JavaScript library for building user interfaces through reusable components and declarative programming patterns. This template provides a React app starter that uses Caddy for production serving.

## About Hosting React

React applications require building static assets for production and serving them through a web server. Caddy is far better suited to serve websites than react-scripts, resulting in much lower memory and CPU usage compared to serving with react-scripts. The development server is unsuitable for production due to performance limitations and resource overhead. Production deployments require optimized static file serving, SPA routing, and compressed asset delivery.

## Common Use Cases

- **Frontend Developers**: Build interactive web applications with component-based architecture and modern JavaScript features
- **Full-stack Teams**: Create client-side applications that consume APIs and integrate with backend services
- **UI/UX Engineers**: Develop responsive user interfaces with real-time updates and complex user interactions

## Dependencies for React Hosting

- **Node.js Environment**: Runtime for building React applications and managing dependencies
- **Build Tools**: Create React App or custom webpack configuration for production builds
- **Web Server**: Static file server optimized for single-page application routing and compression

### Deployment Dependencies

- [React Official Documentation](https://react.dev/)
- [Create React App Documentation](https://create-react-app.dev/)
- [Caddy Documentation](https://caddyserver.com/docs/)
- [React Production Build Guide](https://create-react-app.dev/docs/production-build/)

### Implementation Details

**Features:**
- Create React App
- Caddy

**How to Use:**
- Install required dependencies with `npm install`
- Start the server for development `npm run dev`

(The original `start` command has been more appropriately renamed to `dev`)

**Why use Caddy when deploying to Railway:**

Caddy is a powerful, enterprise-ready, open source web server, and therefore Caddy is far better suited to serve websites than react-scripts is. Using Caddy will result in much less memory and CPU usage compared to serving with react-scripts (much lower running costs too).

To see how this is achieved with nixpacks, check out the fully documented nixpacks.toml file in this repository.

The configuration for Caddy is called a Caddyfile, and you can edit that file to further suit your needs. By default it comes configured to serve a single page app for React, and to also gzip the responses.

**Basic Development Workflow:**

```
# Install dependencies
npm install

# Start development server
npm run dev

# Create production build (handled automatically in deployment)
npm run build
```

**Production Build Process:**

```
# React build generates optimized static files
npm run build

# Creates build/ directory with:
# - Minified JavaScript bundles
# - Optimized CSS files
# - Static assets with content hashing
# - HTML files with proper asset references
```

**Caddyfile Configuration:**

```
{
    auto_https off
}

:$PORT {
    root * /app/build
    encode gzip
    try_files {path} /index.html
    file_server
}
```

**Component Development:**

React applications are built using reusable components with state management and lifecycle methods. Components can be functional or class-based, with functional components and hooks being the modern preferred approach.

**Production Optimizations:**
- **Bundle Splitting**: Automatic code splitting for improved loading performance
- **Asset Optimization**: Minification and compression of JavaScript, CSS, and images
- **Browser Caching**: Content hashing enables long-term caching strategies
- **Tree Shaking**: Elimination of unused code from final bundles

**Environment Configuration:**

```
# Environment variables for React builds
REACT_APP_API_URL=https://api.yourdomain.com
REACT_APP_VERSION=$npm_package_version

# Build-time variables (prefixed with REACT_APP_)
# Available in React code via process.env.REACT_APP_*
```

**Client-Side Routing:**

```
# Caddy handles SPA routing automatically
# All unmatched routes serve index.html
# React Router manages client-side navigation
```

**Relevant Caddy Documentation:**
- [The Caddyfile](https://caddyserver.com/docs/caddyfile)
- [Caddyfile Directives](https://caddyserver.com/docs/caddyfile/directives)
- [root](https://caddyserver.com/docs/caddyfile/directives/root)
- [encode](https://caddyserver.com/docs/caddyfile/directives/encode)
- [file_server](https://caddyserver.com/docs/caddyfile/directives/file_server)
- [try_files](https://caddyserver.com/docs/caddyfile/directives/try_files)

See the template's readme.md for more information on why Caddy is used, and why the default start command is undesirable for production deployments.

## Why Deploy React on Railway?

Railway is a singular platform to deploy your infrastructure stack. Railway will host your infrastructure so you don't have to deal with configuration, while allowing you to vertically and horizontally scale it.

By deploying React on Railway, you are one step closer to supporting a complete full-stack application with minimal burden. Host your servers, databases, AI agents, and more on Railway.

## Similar templates

- [open-excalidraw](https://railway.com/deploy/open-excalidraw) — Self-hostable collaborative drawing built on Excalidraw
- [caring-vibrancy](https://railway.com/deploy/caring-vibrancy) — Deploy and Host caring-vibrancy with Railway
- [Appsmith](https://railway.com/deploy/appsmith-1) — Low-code platform for internal tools, dashboards, and admin panels.

Open this page in a browser: https://railway.com/deploy/create-react-app