React Website Template

A reusable React + Vite website starter template with routing, organized project folders, path aliases, ESLint, React Compiler setup, and Cloudflare deployment configuration.

This template is meant to help quickly start new static React websites and deploy them through Cloudflare.

Features

• React + Vite setup
• React Router DOM installed
• ESLint configuration included
• React Compiler/Babel setup
• Organized src folder structure
• Path aliases for cleaner imports
• Cloudflare Wrangler configuration
• SPA fallback support for deployed React routes

Tech Stack

• React
• Vite
• React Router DOM
• ESLint
• Cloudflare Workers / Static Assets
• Wrangler

Project Structure

react-website-template/ ├── public/ ├── src/ │ ├── components/ │ ├── hooks/ │ ├── layouts/ │ ├── pages/ │ ├── App.css │ ├── App.jsx │ ├── index.css │ └── main.jsx ├── eslint.config.js ├── index.html ├── package.json ├── vite.config.js ├── wrangler.jsonc └── README.md

Path Aliases

The project includes several aliases to make imports cleaner:

"@": "./src" "@pages": "./src/pages" "@components": "./src/components" "@layouts": "./src/layouts" "@icons": "./src/assets/icons" "@hooks": "./src/hooks" "@images": "./src/assets/images"

Example:

import HomePage from "@pages/HomePage"; import Header from "@components/Header";

Getting Started

1. Clone the repository

git clone https://github.com/gvnrxd/react-website-template.git cd react-website-template

2. Install dependencies

npm install

3. Start the development server

npm run dev

The app will run locally using Vite.

Available Scripts

Start development server

npm run dev

Create production build

npm run build

Preview production build

npm run preview

Run ESLint

npm run lint

Cloudflare Deployment Setup

This template includes a wrangler.jsonc file for Cloudflare deployment.

Before deploying, update the following values in wrangler.jsonc:

{ "name": "your-cloudflare-project-name", "compatibility_date": "2025-12-12", "assets": { "directory": "./dist", "not_found_handling": "single-page-application" }, "routes": [ { "pattern": "yourdomain.com/", "zone_id": "your_cloudflare_zone_id" }, { "pattern": "www.yourdomain.com/", "zone_id": "your_cloudflare_zone_id" } ] }

Important Cloudflare Notes

• name should match your Cloudflare project/worker name.
• directory should stay as ./dist because Vite builds into the dist folder.
• not_found_handling: "single-page-application" allows React Router routes to work after deployment.
• Replace the route patterns with your actual domain.
• Replace zone_id with your Cloudflare zone ID.

Build for Production

npm run build

This creates a dist/ folder containing the production-ready static files.

Deploy with Wrangler

Make sure Wrangler is installed and authenticated:

npm install -g wrangler wrangler login

Then deploy:

wrangler deploy

Customizing the Template

After creating a new project from this template, update:

• Project name in package.json
• Site title and metadata in index.html
• Cloudflare project name in wrangler.jsonc
• Domain routes in wrangler.jsonc
• Pages inside src/pages
• Layouts inside src/layouts
• Reusable UI inside src/components

Recommended Use Cases

This template works well for:

• Business websites
• Portfolio websites
• Landing pages
• Service company websites
• Static React sites
• React Router based Cloudflare deployments

License

This project is available as a reusable starter template. Add a license if you plan to make usage terms public.