Rashid Shamloo

Posted on Mar 4, 2023 • Edited on Apr 15, 2023

Deploying Vite / React App to GitHub Pages

#gamedev #gamechallenge #opensource #softwaredevelopment

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

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

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

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

base: "/YOUR_REPOSITORY_NAME",

Change YOUR_REPOSITORY_NAME to the name of your GitHub repository.

4. In terminal type

npm run deploy

🎉 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.

Latest comments (56)

TenE • Apr 14

I think it works without config we need just base:"URL starter ex: docs,app"

Hashim Baloch • Nov 9 '24

Hey man! I tried everything written above and below in comments but still I always get that white screen on deployment and dist. The build and deploy are always successful but I can't get rid of the white screen as the app doesn't loads up. This is my repo. Could you help?

This is the browser console for local build:
`Refused to apply style from '127.0.0.1:5500/assets/index-BtomFT...' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Understand this errorAI
:5500/assets/index-BsCh7obV.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)Understand this errorAI

index.html:41 Live reload enabled.
index.html:1 Refused to apply style from '127.0.0.1:5500/assets/index-BtomFT...' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.`

Deployed site console:
`Failed to load resource: the server responded with a status of 404 ()Understand this errorAI
index-BsCh7obV.js:1

   Failed to load resource: the server responded with a status of 404 ()Understand this errorAI

24browsecSiteContentScript.js:1 browsecSiteContentScript: data is not for auth
(anonymous) @ browsecSiteContentScript.js:1
Show 1 more frame
Show lessUnderstand this warningAI
index-BtomFTFd.css:1

   Failed to load resource: the server responded with a status of 404 ()`

Xin Jin Qiu • Apr 5 '24

Hi, when I follow the instructions and it says published. I get a white screen afterwards with only these errors:

Naturalization-Test/:7
GET xjqiu28.github.io/assets/index-D4N... net::ERR_ABORTED 404 (Not Found)
Naturalization-Test/:8
GET xjqiu28.github.io/assets/index-bd1... net::ERR_ABORTED 404 (Not Found)

for those two lines, here is my code:
<script type="module" crossorigin src="/assets/index-D4NM0QCT.js"></script> <link rel="stylesheet" crossorigin href="/assets/index-bd1VVfxY.css">

I cant seem to find the answer or solution

BOON IMAGE DESIGN • Sep 23 '24

you not yet commit , possibility

Xin Jin Qiu • Apr 5 '24

Here is the file structure for the items:

Majdsayedtaha • Mar 16 '24 • Edited

when I set the base: "/YOUR_REPOSITORY_NAME", it works! because the Vite config file doesn't have this attribute.
Thnx a lot!

Ali Hamza • Mar 12 '24

help ful

MikixIT - Michael • Dec 12 '23

Thanks!

Roya • Dec 7 '23

hello How can we do the deployment for the files that have db.json

joequint22 • Sep 21 '23 • Edited

Keep getting a white screen when deploying my vite + react js + typescript application. I believe it wants me to fix the errors within my code but the issue is importing react. Not sure how to go about this, the website runs fine localhost but i get these errors when deploying

Lewis Hunt • Sep 22 '23 • Edited

Have you got the homepage parameter set in package.json? I have it pointing to my github site url:
"homepage": "https://lewhunt.github.io/react-tv-player",
then the base value in vite.config is set to the folder:
base: "/react-tv-player/",

joequint22 • Sep 23 '23

I actually got it to work with the base value in vite.config is set to the folder:
base: "./",

So assuming youve modified the package.json as well, it should work** USING VERCEL.COM**

emphasis on the . /

joe • Sep 17 '23

This has all worked for me well, except I can only access pages in my site via the home page. If I copy a URL and paste it into a new web browser, I get a 404 page. I suppose it is because the index.html file is not being served in that case. How do I fix this issue? I would like to be able to access any page of my site by its URL! Thank you so much in advance.

Rashid Shamloo • Sep 17 '23 • Edited

If you're using React Router, you can use the Hash Router instead of the Browser Router.

There is also another workaround that I personally use in my projects: spa-github-pages

Tanish Goyal • Jan 27 '24

Hi! When using Hash Router, do we need to modify base path in vite.config.js to 'repo-name/#' ? For some reason, I can't test my app locally when using hash router. I manually add /#/route-path infront of the base URL for testing and then it works.

Rashid Shamloo • Jan 30 '24

There's no need to change the base to something else for the hash router to work so there should be another cause for your problem (using instead of is a common culprit).

Tanish Goyal • Feb 4 '24

Hi, thanks for the information.

fauza • Sep 17 '23

Hi!, this is my first time deploying my project using Github pages, everything looks good but when I try to visit my site, I only got white screen, and then I try to see at console browser and I got this error:
'Failed to load resource: the server responded with a status of 404 () /src/main.jsx:1'
what should I do?

Rashid Shamloo • Sep 17 '23

"There is no general fix for the 404 error. it depends on your project and why you're getting the error. if you link to your project I can help further."