Deploying React Apps to GitHub Pages using Vite

Are you looking for an efficient and hassle-free way to deploy your React applications? Look no further! In this tutorial, we will guide you step by step on how to deploy your React apps to GitHub Pages using Vite.

Why GitHub Pages?

GitHub Pages is a powerful hosting solution provided by GitHub. It allows you to showcase your web projects, including React applications, to a wider audience. GitHub Pages supports static site hosting, making it a great option for deploying your React projects without the need for complex server setups.

Why Vite?

Vite is a lightning-fast build tool that is specifically designed to optimize the development experience for modern JavaScript frameworks like React. It offers an instant development server, blazing fast hot module replacement (HMR), and highly efficient bundling for production builds.

Prerequisites

Before we get started, make sure you have the following prerequisites:

• Node.js (v12 or later)
• Git

Step 1: Create a React App

First, let’s create a new React app using Create React App. Open your terminal and execute the following command:

npx create-react-app my-app

Replace my-app with the desired name for your project.

Step 2: Configure Vite

Next, let’s configure Vite to work with our React app. Change into the project directory by running:

 cd my-app

Now, let’s install Vite as a dev dependency:

npm install --save-dev vite

Step 3: Setup GitHub Pages Repository

To deploy your React app to GitHub Pages, you need to create a new repository on GitHub. Follow these steps:

1. Sign in to your GitHub account and create a new repository.
2. Clone the repository to your local machine using:

   git clone https://github.com/username/repo-name.git

Replace username with your GitHub username and repo-name with the name of your repository.

3. Change into the repository directory:

   cd repo-name

4. Initialize a new Git repository:

   Understanding the Use of enzyme-adapter-react in ReactJS Testing

   git init
   

5. Set the remote origin:

   git remote add origin https://github.com/username/repo-name.git

Replace username with your GitHub username and repo-name with the name of your repository.

Step 4: Build the React App

In this step, we will build the React app using Vite. Run the following command in your project directory:

npm run build

This will generate a production-ready build of your React app in the build directory.

Step 5: Deploy to GitHub Pages

To deploy your React app to GitHub Pages, follow these steps:

1. Open the package.json file in your project directory.

2. Update the homepage field with your repository URL:

   "homepage": "https://username.github.io/repo-name/"

3. Commit and push the changes to your GitHub repository:

   git add .
   git commit -m "Initial deployment"
   git push origin master

4. Finally, deploy the React app to GitHub Pages using:

   npm run deploy

Conclusion

Congratulations! You have successfully deployed your React app to GitHub Pages using Vite. Now, you can share your application with others by accessing the GitHub Pages URL. This method offers a quick and straightforward way to showcase your React projects without the need for complex deployment setups.

Remember to keep your repository up to date with future changes in your app. Happy coding!