Easy Steps to Create and Deploy a React App Using Vite

Vite is a fast and efficient build tool used in front-end web development. It optimizes the development experience, resulting in faster builds and a more responsive development environment. It supports popular features like TypeScript, JSX, and CSS preprocessing, making it a popular choice for modern JavaScript frameworks.

Here's how to Create a React app and deploy it to GitHub Pages with Vite

step 1

first, initialize the react app with $ npm init vite .

step 2

publish it to GitHub

step 3

go to vite.config.js

add base and fill it with your repo name

step 4

create deploy.sh file and copy this code bellow

this is the script to deploy your website to the GitHub pages

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# place .nojekyll to bypass Jekyll processing
echo > .nojekyll

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -B main
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

cd -

add your GitHub username to the code, as shown in the example at line 27

step 5

don't forget to install npm with $ npm i if you haven't

step 6

run deploy.sh

step 7

and it's done!

you can read more detail on their official doc