Cycle 2: React Frontend Deployment

What is Frontend Deployment?

A frontend app is ultimately just HTML, CSS, and JavaScript files. Deployment means uploading these static files to a server so anyone can access them.

Static Sites

Works with just HTML/CSS/JS files, no server needed

Examples: blogs, portfolios, documentation sites

SPA (Single Page App)

JavaScript handles page transitions and API communication

Examples: React, Vue, Angular apps

CDN and Edge Deployment

Cloudflare Pages replicates your files across 300+ data centers worldwide. Files are served from the server closest to the user, making it fast.

User

→

CDN Edge

→

Fast Response

Build Process

Browsers cannot directly execute React source code. The build process transforms it into a format browsers can understand.

Terminal

# Build a React project
npm run build

# Result: dist/ or build/ folder is created

Build Output (dist/)

Folder Structure

dist/
├── index.html          # Entry point HTML
├── assets/
│   ├── index-abc123.js  # Bundled JavaScript
│   ├── index-def456.css # Bundled CSS
│   └── logo.svg         # Static assets
└── favicon.ico

Hashes like abc123 are for cache invalidation. When files change, the hash changes so users receive the new version.

Cloudflare Pages Deployment

1 Connect GitHub Repository

1. Go to the Cloudflare Dashboard
2. Workers & Pages → Create application
3. Pages tab → Connect to Git
4. Connect your GitHub account and select a repository

2 Build Settings

Framework preset	Create React App / Vite
Build command	`npm run build`
Build output directory	`dist` (Vite) / `build` (CRA)
Root directory	(Leave empty or enter frontend folder name)

3 Environment Variables

Configure them in Settings → Environment variables.

Environment Variables

# Example environment variables
VITE_API_URL=https://api.myapp.com
VITE_APP_NAME=MyApp

Vite: VITE_ prefix required
CRA: REACT_APP_ prefix required

Solving SPA Routing Issues

Getting 404 errors?

In an SPA, navigating directly to a path like /about will result in a 404. This is because the server only has index.html.

Solution: _redirects File

Create a public/_redirects file. This sends all requests to index.html, and React Router handles the routing on the client side.

public/_redirects

/* /index.html 200

This single line redirects all paths to index.html. It responds with a 200 status code, so refreshing the page still works correctly.

Next Steps

If frontend deployment is complete, let's deploy a backend API next. In Cycle 3: Backend Deployment, you will learn how to deploy FastAPI to Cloud Run.