This repository serves as a comprehensive, interactive guide documenting the end-to-end process of setting up a development environment for a React application and deploying it to GitHub Pages.

The documentation itself is built as a React application, with all the content and interactive elements residing within the src/App.jsx file. This means you are looking at the result of the process, while simultaneously learning how to achieve it. You won't need a React app to get started as this package contains one (ie it's the documentation at the link below).

🚀 View the Live Documentation

To see the full, interactive documentation and the result of this deployment process, please visit:

https://rgrfr.github.io/react-app-documentation/

📚 What You'll Find Documented

The process involves the following key phases:

• Local Environment Setup:
  • Installing Git
  • Installing Homebrew (for macOS/Linux)
  • Installing Node.js and npm
• Creating Your React Project:
  • Using Vite to scaffold a new React application.
  • Integrating the documentation code into src/App.jsx.
• Configuring Tailwind CSS for Styling:
  • Installing Tailwind CSS, PostCSS, and Autoprefixer.
  • Initializing and configuring tailwind.config.js.
  • Setting up src/index.css with Tailwind directives.
• Running Your App Locally:
  • Starting the Vite development server.
  • Viewing the application in your browser.
• Connecting to GitHub & Initial Commit:
  • Initializing a local Git repository.
  • Staging and committing your code.
  • Creating a new repository on GitHub.com.
  • Linking your local repository to GitHub and pushing your code.
• Deploying to GitHub Pages:
  • Installing the gh-pages npm package.
  • Configuring package.json with the homepage and deployment scripts.
  • Crucially, configuring vite.config.js with the base path for correct asset loading on GitHub Pages.
  • Running the deployment command.
  • Verifying the live site on GitHub Pages.
• Troubleshooting Tips:
  • Common issues like blank pages, npm errors, and deployment delays.

🛠️ Technologies Used

• React: For building the interactive user interface.
• Vite: A fast build tool for modern web projects.
• Tailwind CSS: A utility-first CSS framework for styling.
• Node.js & npm: JavaScript runtime and package manager.
• Git: Version control system.
• GitHub Pages: Free static site hosting.

This repository serves as both the source code for the documentation and a practical example of the deployment process it describes.