Mastering GitHub Pages: A Step-by-Step Guide for Deploying Your React App with Vite
Tags: webdev, beginners, programming, javascript
Published: 2024-02-07 17:05:35

Hey tech wizards and coding enthusiasts, have you ever experienced the thrill of deploying a React application to GitHub, only to be met with a sudden blank page? If you’ve found yourself nodding in agreement, fret not! You’re not alone in this rollercoaster of emotions. 🎢😅

Recently, or perhaps a bit ago (time can be a bit elusive in the coding realm), I stumbled upon a post on ‘X (formerly Twitter)’ where someone inquired about deploying on gh-pages.

But ponder this: How do I spill the beans to my pals that I’m using X (formerly Twitter 😢)?” Not the most harmonious tune, right?

Anyway, back to the story.

My friend faced challenges when deploying her React application to gh-pages. While going through the comments, which were generally not very helpful (not in a negative sense 😶), some recommended that she consider using Vercel instead.

Experiencing the same issue in the past and observing its recurrence among others inspired me to create this article.

I will be utilizing a convenient app that I developed. Without giving away any details, prepare yourself for an enlightening read — grab your coffee, cookies, or whatever you prefer!

PS: (If you’re snack-less like me, just imagine munching on them while reading.) 😄

Now, let’s get down to business.

I’ve already bootstrapped an app using [Vite](https://vitejs.dev/guide).

## 1. Deploy Your React.js App to GitHub

> _Psst… In case you haven’t nudged your repository onto GitHub yet._

- Ensure your repo name is what you want your page to be.

> _I’ll name mine “testyrkno” (a bit odd, isn’t it?)._

![Screenshot showing the process of naming a repository on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q48qlbc8wrtsfggrjy3.png)

- After that, keep everything as is and hit the _“Create repository”_ button.

![Screenshot demonstrating the creation of a repository on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyg5unzwkgp66dy34uow.png)

- Subsequently, go ahead and push it to GitHub. Sounds straightforward, doesn’t it? (Well, not always.)


> _Psst… Depending on your code-pushing preferences, you can resort to gh-page CLI, GitHub Desktop, or CLI._
> _To keep things straightforward, we’ll stick to the simpler methods. After all, who doesn’t appreciate a bit of ease, right?_

- Copy the code GitHub provided,

![Screenshot displaying code in a command line interface for initializing a Git repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdb5aer6r3q754y4rhk3.png)

- Enter the following command into your command line interface (CLI) within the local directory of your project. However, instead of the ‘git add README.md,’ use a single dot (.) to add all files.

```bash
echo "# testyrkno" >> README.md
git init
git add .        
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Deerah1234/testyrkno.git
git push -u origin main
```

![Screenshot depicting the process of pushing code to a GitHub repository using Git commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/da128ktlxcayuljmepr4.png)

- and voila — it’s pushed! (Simple, right?)

![Screenshot showing the Uploaded files on Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pckmof0ob8zu2utsrygu.png)

## 2. Install the Required Dependencies

> _Install the necessary dependency for GitHub Pages to streamline the process. If you’re using NPM, execute the following command:_

- For NPM Lovers:

![Screenshot showing the installation of a dependency using NPM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g86468z075an4xcyfvpw.png)

```bash
npm install gh-pages --save-dev
```

> _Good luck to Yarn users; you might need it. 😉_

- For Yarn Admirers:

```bash
yarn add -D gh-pages
```

## 3. Edit package.json (Handle with Care!)

> _**Warning**: Follow these steps precisely to avoid future tears._

- Add a home page:

```bash
"homepage": "http://[YourUserName].github.io/[nameOfRepo]"
```

![Screenshot illustrating the installation of a dependency using Yarn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2klzvntfidzv6j1p2rje.png)

> _Whispering… Place it at the top of your JSON file, just like this._
> _Cause This is where your masterpiece will be displayed._

- Add two script tags:

```bash
"predeploy": "npm run build"
"deploy": "gh-pages -d dist"
```

![Screenshot displaying the addition of a homepage URL in the package.json file of a project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfyuuitmjrejg2w3botp.png)

> _Place them right below the start script._
> _Don’t mess this up — it’s your application’s lifeline._

**Quick detour to vite.config.js:**
- Add this gem after the plugins:

```bash
base: "/[nameOfRepo]/",
build: {
    outDir: "dist",
},
```

![Screenshot depicting the addition of deployment scripts in the package.json file of a project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lci4px80a0sa29di8ew0.png)

## 4. Add the Changes to GitHub

![Screenshot showing modifications in the vite.config.js file to specify base URL and output directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emjxwo65xlywltcmcpws.png)

```bash
git add .
git commit -m "update: deployed to gh-pages"
git push
```
## 5. Run the Deploy Command

- Even if you’re not using Yarn, simply execute:

```bash
npm run deploy
```

![Screenshot displaying Git commands for adding changes, committing, and pushing them to the repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9o73w2xh0dl48ek8xt4.png)

> _This command operates on the GitHub branch._
> _GitHub, in turn, automatically generates a branch (gh-pages), capturing the version ready for online display._
> _Running this command essentially populates the branch with all your code._

## 6. Check GitHub Settings
- Head to Settings

![Screenshot showing the execution of a deploy command in the command line interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ks5u2k2kl3pv2jgu8nx5.png)

- Click on Pages.

![Screenshot indicating the navigation to GitHub repository settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7smh5d7f7x0s13nkvjz.png)


- If you’ve danced to the right steps, it should say your website is published on the provided link.

![Screenshot displaying the GitHub Pages section in repository settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6afavp92mce30ergztw.png)

> _As you can see, mine is already up there._

> _**Spoiler alert**: If you click the link too soon and see a 404, relax! It takes a moment to deploy. Patience is key — coding deities have spoken!_

And there you have it! Your site is now live!

![Screenshot showing the published website URL in GitHub Pages settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybkokyumyivs8ts2dg8i.png)


Your snack may be finished, but hopefully, your React app is flourishing. 😉

Take a peek at the marvel that we just deployed: [testyrkno](https://deerah1234.github.io/testyrkno/).

Be sure to explore the [Screenshot presenting the live React application deployed on GitHub Pages](https://github.com/Deerah1234/TechCompendium/tree/main/2024-02-07-Mastering-GitHub-Pages-Deploy-React-with-Vite) for the code as well.

I’m eager to hear about your GitHub deployment escapades. Until next time, amigos! 🚀✨