Create and deploy react app with Vite

Vite is a fast and efficient build tool used in front-end web development. It optimizes the development experience by serving modules as separate files instead of bundling them together. This results 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 like Vue.js and React.

here's how to create react application and deploy it to the 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

#!/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 -

edit the script to your needs in this example I edit line 27 like the image bellow

that was a script to deploy your website to the GitHub pages

step 5

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

step 6

run deploy.sh

step 7

finished!

you can read more detail on their official doc