Hosting a modern React application doesn’t need to be complex. Cloudflare Pages offers an incredible platform that is free, fast, and secure, making it the perfect choice for projects like the Training Center Website with Booking System.

This master guide covers the complete lifecycle of your project—from the initial setup on a new computer to the daily workflow of updating your live site. We will be using React, Vite, and Tailwind CSS, hosted on Cloudflare Pages via GitHub.

Project Overview

  • Project: Training Center Website with Booking System

  • Tech Stack: React, Vite, Tailwind CSS

  • Hosting: Cloudflare Pages (Free, Fast, Secure)

  • Version Control: GitHub

  • Repository: https://github.com/waqas-studio/EngineerHow.com.git <!– Replace with your actual repo URL –>

  • Domain: EngineerHow.com <!– Replace with your actual domain –>

✅ Part 1: Initial Setup (One-Time Only)

Use this section if you are setting up the project on a new computer for the first time.

1. Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js: Download here (Required to run React).

  • Git: Download here (Required for version control).

  • GitHub Account: You must have access to the repository.

  • Cloudflare Account: For hosting the site.

2. Prepare the Project

Open your project folder in VS Code, open the terminal (Ctrl + ~), and run the following commands:

# 1. Install project dependencies
npm install

# 2. Create a .gitignore file (Prevents uploading junk files)
# Note: If .gitignore already exists, you can skip this.
echo "node_modules" > .gitignore
echo "dist" >> .gitignore

# 3. Test the app locally to ensure it works
npm run dev

  • Action: Click the localhost link shown in the terminal to verify the site looks correct in your browser.

3. Connect to GitHub

If this is a brand new project folder not yet on GitHub, run these commands:

# Initialize Git
git init

# Add all files to the staging area (Don't forget the dot!)
git add .

# Save these changes
git commit -m "Initial setup"

# Link to your GitHub repository
# <!-- Replace the URL below with your actual GitHub repository link -->
git remote add origin [https://github.com/waqas-studio/EngineerHow.com.git](https://github.com/waqas-studio/EngineerHow.com.git)

# Rename branch to main
git branch -M main

# Push the code to the internet
git push -u origin main

4. Deploy on Cloudflare

Now that your code is on GitHub, connect it to Cloudflare.

  1. Log in to the Cloudflare Dashboard.

  2. Navigate to Workers & Pages > Create Application > Pages > Connect to Git.

  3. Select your repository: EngineerHow.com (or whatever you named your repo).

  4. Configure the Build Settings:

    • Framework Preset: Select Vite.

    • Build Command: npm run build

    • Output Directory: dist

  5. Click Save and Deploy.

🔄 Part 2: How to Update Your Website

Follow this simple process whenever you need to change text, images, or code.

1. Make Your Changes

  1. Open VS Code.

  2. Edit your files (e.g., update phone numbers in constants.ts, change colors in index.css, etc.).

  3. Test Locally: Always run npm run dev to preview changes before publishing.

2. Push Changes to Go Live

Once you are happy with the changes, run these 3 commands in your VS Code terminal:

# 1. Add your changes
git add .

# 2. Label your update (e.g., "Updated hero section text")
git commit -m "Updated hero section text"

# 3. Send to Cloudflare
git push

Result: Cloudflare will detect the “Push,” automatically rebuild your site, and update the live version in about 60 seconds.

🌐 Part 3: Connecting Your Domain (EngineerHow.com)

To make your site accessible via www.EngineerHow.com instead of the default something.pages.dev URL:

Step 1: Add Domain in Cloudflare Pages

  1. Go to Cloudflare Dashboard > Workers & Pages.

  2. Click on your project name (engineerhow-com or similar). <!– Project name varies based on repo name –>

  3. Go to the Custom Domains tab.

  4. Click Set up a custom domain.

  5. Enter EngineerHow.com (or www.EngineerHow.com) and click Continue. <!– Replace with your actual domain –>

Step 2: Update DNS Records

  • Scenario A: Domain bought on Cloudflare:

    • It will configure automatically. You are done!

  • Scenario B: Domain bought elsewhere (e.g., GoDaddy, Namecheap):

    1. Cloudflare will provide two Nameservers (e.g., bob.ns.cloudflare.com and alice.ns.cloudflare.com).

    2. Log in to your domain registrar (e.g., GoDaddy).

    3. Find DNS Management or Nameservers.

    4. Select “Custom Nameservers” and replace the existing ones with the two provided by Cloudflare.

    5. Save. Note: It may take up to 24 hours to propagate, but usually happens within 1 hour.

🛠️ Part 4: Troubleshooting Common Errors

Error: git add says “Nothing specified, nothing added”

  • Cause: You likely forgot the dot at the end of the command.

  • ❌ Wrong: git add

  • ✅ Right: git add .

Error: “failed to push some refs”

  • Cause: This means the online version (GitHub) has changes that your computer doesn’t have yet.

  • Fix:

    1. Run git pull origin main to download the latest online version.

    2. Then try git push again.

Error: Changes not showing on website

  • Fix:

    1. Check Cloudflare Dashboard > Deployments.

    2. If the latest deployment is “Success”, try clearing your browser cache.

    3. If it says “Failed”, click “View details” to see if there was a code error during the build.

Copyright @EngineerHow.com

We recommend bookmarking this guide from EngineerHow.com for future reference. Our goal is to make complex technical topics simple and accessible for everyone.

🔗 Useful Links 📺 EngineerHow YouTube Channel (www.youtube.com/@EngineerHow)

📢 About EngineerHow.com EngineerHow.com is dedicated to providing expert IT and engineering tutorials, helping professionals and enthusiasts set up servers, networks, and self-hosted solutions. Our guides focus on step-by-step instructions to make complex topics easy to understand.

🚀 Explore More IT Guides: EngineerHow.com

💬 Join the Discussion! Have questions or insights? Drop a comment below and let’s discuss!

Copyright © 2025 EngineerHow.com. All Rights Reserved.