DEV Community

Cover image for Deploying Vite / React App to GitHub Pages
Rashid Shamloo
Rashid Shamloo

Posted on • Updated on

Deploying Vite / React App to GitHub Pages

Just follow these simple steps:

1. Install the gh-pages package (ctrl+~ to open the terminal in VS Code)

npm install gh-pages --save-dev
Enter fullscreen mode Exit fullscreen mode

2. In the package.json file add these lines before "build": "vite build",

"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
Enter fullscreen mode Exit fullscreen mode

3. In the vite.config.js file add this line before plugins: [react()],

base: "/YOUR_REPOSITORY_NAME",
Enter fullscreen mode Exit fullscreen mode

Change YOUR_REPOSITORY_NAME to the name of your GitHub repository.

4. In terminal type

npm run deploy
Enter fullscreen mode Exit fullscreen mode

🎉 You now have a gh-pages branch in your repository and your app is deployed (you can check it under Settings -> Pages )

P.S. To update your app deployment, just run the npm run deploy command again.

Top comments (18)

Collapse
 
mash1 profile image
Mahmoud Ashraf

Clear, informative, and straight to the point.
Thanks for this article it helps a lot :)

Collapse
 
evanwa1 profile image
evanwa1

Hey man, I just want to say thank you very much. This worked for me very easily and I am very thankful for your help!

Collapse
 
qbentil profile image
Bentil Shadrack

Glad you like it😇

Collapse
 
ogzcode profile image
Oğuzhan Güç

Thank you for your article, it worked for me.

Collapse
 
rashidshamloo profile image
Rashid Shamloo

You're welcome, glad to be of help.

Collapse
 
mhmdk profile image
Mohammed Alkayyali

Thanks a lot, it worked

Collapse
 
rashidshamloo profile image
Rashid Shamloo

You're welcome.

Collapse
 
cleancodecreature profile image
Full-stack Web Developer

Thank you. Recently I have a trouble in deployment of my vite project to github.
Thanks again.

Collapse
 
rashidshamloo profile image
Rashid Shamloo

You're welcome. glad it could help with deployment of your project.

Collapse
 
huyvu23 profile image
Huy Vũ

it not work for me :((

Collapse
 
rashidshamloo profile image
Rashid Shamloo

Please be more specific. what happens after following the steps and running the npm run deploy command?

Collapse
 
huyvu23 profile image
Huy Vũ

it worked , i had to wait more than 15 minutes and check again , thanks bro

Collapse
 
motiurrafi profile image
MotiurRafi • Edited

the page deployed successfully but showing the error page . the image on the error page is also not loaded and the app is routed
here is the page link : motiurrafi.github.io/reactAPP/

Collapse
 
rashidshamloo profile image
Rashid Shamloo

I cant's say without access to the source code but sometimes adding/dropping the "/" at the start of image paths could fix the problem (if you're using the public folder for your images)

Collapse
 
dextercodes5 profile image
dexterlab_5

I did everything, after "npm run deploy" when I go to the app's url I see white screen and in the console: "Failed to load resource: the server responded with a status of 404 () index-d526a0c5.css"

Collapse
 
rashidshamloo profile image
Rashid Shamloo

I can't really tell without knowing your code, but that sounds like the css path in your built "index.html" is not correct.

In "index.html" in your dist folder check this line:
<link rel="stylesheet" href="/YOUR_REPOSITORY_NAME/assets/index-SOMETHING.css">

and see if it reflects your repository name or not.

Also double check you have set the correct "base" in "vite.config.js":

base: "/YOUR_REPOSITORY_NAME",

Collapse
 
huseyinkaplan00 profile image
Huseyin Kaplan

I'm getting this error : Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

Collapse
 
rashidshamloo profile image
Rashid Shamloo

What the error is saying is that Git/GitHub is not set up properly in your project.
Check this link to see how to connect your local files to your GitHub repo.
If it still doesn't work, try cloning your repo to another directory and try again.