Deploy a React application with multiple pages to Github

Hello, In this guide we will learn how to deploy a React project with multiple pages created in Vite environment to Github pages.

To begin, navigate to your project directory in the command line and enter the following command to create a new project:

npm create vite .

When setting up your project with Vite, you will need to choose between JavaScript or TypeScript. For this example, we will proceed with JavaScript.

Next, install the project dependencies and run the project:

npm i && npm run dev

Once the project is running smoothly, create a new repository on Github and link it to your project by initializing a Git repository:

git init

Add the remote repository:

git remote add origin YOUR_REPOSITORY_LINK

It is recommended to push your main branch to the remote repository at this point.

To create routes, you will need to install react-router-dom for handling routes and gh-pages for deploying the project to Github pages. Install these dependencies by running:

npm i gh-pages react-router-dom

Additionally, create Login and SignUp components for rendering different routes. You will also need a router to manage routes and URLs. Create a file named routes.jsx to define your routes.

import { createHashRouter } from "react-router-dom";
import App from "./App";
import SignUp from "./SignUp";
import Login from "./Login";

export const routes = createHashRouter([
    {
        path: "/",
        element: <App />,
    },
    {
        path: "/signup",
        element: <SignUp />,
    },
    {
        path: "/login",
        element: <Login />,
    },
]);

The routes variable within this file is responsible for generating multiple routes. Due to the lack of support for routes utilizing the pushState API on Github Pages, we need to utilize createHashRouter instead. For further details, please refer to the following link. Now, let's make modifications to the main.jsx file.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import { routes } from "./routes.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={routes} />
  </React.StrictMode>
);

It is necessary to modify vite.config.js. The base URL of the application needs to be added, and since gh-pages inspects the build directory for deployment, the default path of vite build scripts should be altered. Therefore, include these lines in your vite.config.js.

  base:"/YOUR_REPOSITORY_NAME/",
  build: {
    outDir: "build",
  },

In the final step, the package.json file needs to be edited. Begin by inserting a line into the file and replacing it with your username and repository name.

"homepage": "https://your_user_name.github.io/YOUR_REPOSITORY_NAME",

Then add gh-pages scripts like this:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"


Now, we can proceed with deploying the application by executing this command.

npm run deploy

The application has been successfully deployed on the github pages. I appreciate you taking the time to read this post, hope it provides you with valuable information.

optional

To keep the default Vite build directory unchanged, you may include the following script in your package.json file:

"deploy": "gh-pages -d dist"

Additionally, make sure to avoid altering the build directory in the vite.config.js file.