# 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 .`

![step1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668676978215/K_tHRkV7h.png align="left")

### step 2

publish it to GitHub

![step5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668677037545/jGAJwlsaD.png align="left")

### step 3

go to `vite.config.js`

add base and fill it with your repo name

![step2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668677000378/C-N9vvQlu.png align="left")

### step 4

create `deploy.sh` file and copy this code bellow

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

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

![step3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668677016784/IAHM2yQZb.png align="left")

### step 5

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

![step4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668677028619/LKXiZf3zn.png align="left")

### step 6

run `deploy.sh`

![step6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668677051753/ACPwiwxLk.png align="left")

### step 7

and it's done!

![step7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668677064644/Ww1KBANZu.png align="left")

you can read more detail on their [official doc](https://vitejs.dev/guide/static-deploy.html#github-pages)