Deploy a React application with multiple pages to Github
Tags: react, vite, github, webdev
Published: 2024-04-10 12:22:28

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](https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing:~:text=GitHub%20Pages%20doesn%E2%80%99t%20support%20routers%20that%20use%20the%20HTML5%20pushState%20history%20API%20under%20the%20hood%20(for%20example%2C%20React%20Router%20using%20browserHistory).). 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.