vite project showing 404 pages when uploaded to github pages #61478

saram7619 · 2023-07-21T19:38:13Z

saram7619
Jul 21, 2023

Body

Hi Everyone,
I hope someone can help me as I have been trying to fix this problem for 3 days.
I have deployed a Vite project to github pages, but I get this error message

File not found

The site configured at this address does not contain the requested file.

If this is your site, make sure that the filename case matches the URL as well as any file permissions.
For root URLs (like http://example.com/) you must provide an index.html file.

Firefox dev tools is giving me this error
Content-Security-Policy: The page's settings blocked the loading of a resource at inline ("default-src"). 2 prepareInjection.js:249:78
Content-Security-Policy: The page's settings blocked the loading of a resource at https://saram7619.github.io/favicon.ico ("img-src"). 2 FaviconLoader.jsm:180:19

I have changed my config.js to base: "/deploy-vite/"

my repository is found
repo

Does anyone know how to fix this?

Guidelines

I have read and understood this category's guidelines before making this post.

saram7619 · 2023-07-22T09:21:43Z

saram7619 Jul 22, 2023
Author

My files are in my root folder, but still getting the 404 page and error.

mauriciohillesheim · 2024-09-15T20:15:02Z

mauriciohillesheim Sep 15, 2024

seu repositório está vazio https://github.com/search?q=saram7619&type=repositories

karakuscem · 2023-07-21T20:52:32Z

karakuscem
Jul 21, 2023

Add : base: '/your-repo-name-here/', to vite.config.js,
Run this command to add gh-pages as dependency npm install gh-pages --save-dev
Add these two lines to package.json file under the scripts property

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

And run npm run deploy
Check your repository's pages settings, gh-pages branch should be selected.

5 replies

GhostOf0days Jul 21, 2023

index.html should be at the root for Vite projects.
Vite projects should use Netlify, Heroku, or Vercel.

saram7619 Jul 22, 2023
Author

netilfy gives me the same blank page.

AlexAlecky May 24, 2024

Am running "npm run deploy" but terminal is giving me an error because am running a wrong command

tombohub Sep 3, 2024

instead of base: '/your-repo-name-here/ just base: "" works for me.

Rohit5055 Feb 6, 2026

Added the following changes for me to work with gh-pages:

vite.config.js -> base: "/your-repo-name-here/",
App.tsx ->
package.json -> Add a homepage property in this format*: https://{username}.github.io/{repo-name}
index.html ->

<script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // https://github.com/rafgraph/spa-github-pages
      (function(l) {
        if (l.search[1] === '/' ) {
          var decoded = l.search.slice(1).split('&').map(function(s) { 
            return s.replace(/~and~/g, '&')
          }).join('?');
          window.history.replaceState(null, null,
              l.pathname.slice(0, -1) + decoded + l.hash
          );
        }
      }(window.location))
    </script>

Add a 404.html->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>your-repo-name-here</title>
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // MIT License
      // https://github.com/rafgraph/spa-github-pages
      var pathSegmentsToKeep = 1;

      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );
    </script>
  </head>
  <body>
  </body>
</html>

saram7619 · 2023-07-22T11:18:02Z

saram7619
Jul 22, 2023
Author

Thank you everyone for your suggestions. I have included my files.

deploy-vite/dist/index.html
`<!doctype html>

<title>Vite + React</title> <script type="module" crossorigin src="/deploy-vite/assets/index-18c8291d.js"></script>

` deploy-vite/index.html ` <title>Vite + React</title>

deploy-vite/package.json
{ "name": "deploy-vite", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "predeploy": "npm run build" "deploy": "gh-pages -d dist", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@vitejs/plugin-react": "^4.0.3", "eslint": "^8.45.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", "vite": "^4.4.5" } }

deploy-vite/vite.config.js
`import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

// https://vitejs.dev/config/
export default defineConfig({
base: "/deploy-vite/",
plugins: [react()],
})`

These are the files for the project that is giving me the 404 page.I have used netlify, that gives me the blank page. I have done the npm install gh-pages --save-dev, npm run deploy. I have started a new vite project with vite boilerplate and deployed to github pages. I have ran npm run preview which shows properly without errors.
I just don't know how to fix this.

9 replies

bonnerjallah Jan 17, 2024

i tried, base: './" and it still didn't work for me.

rachpro1234 Jan 18, 2024

Try to add a homepage key in your package.json file like this
"homepage": "http://.github.io/<repo-name"

rachpro1234 Jan 18, 2024

thank you so much , the deploy key and the base was the reason why I couldn't deploy the app , your answer was so much helpful

antra20 Feb 23, 2024

thanks a lot ! it worked for me !!!

CarroAlfred Jun 11, 2024

Thank you this worked for me

sahilatahar · 2024-05-28T09:03:33Z

sahilatahar
May 28, 2024

You can also follow this repo https://github.com/ErickKS/vite-deploy to deploy your react vite app

1 reply

anh3214 Jun 10, 2024

I follow this but can't resole it?

tombohub · 2024-09-03T04:13:00Z

tombohub
Sep 3, 2024

in vite config set base: "" to make assets relative path

0 replies

avanathan · 2025-03-13T06:58:16Z

avanathan
Mar 13, 2025

I am getting 404 User attempted to access non-existent route error while trying in enterprise github. In enterprise plan github pages are in https://github.xyz.com/pages/<org>/<repo>. I am using ./ as the base. Preview works fine. But when deploy to Pages it shows the error.

I wonder if there is a way to disable vite path check.

0 replies

avanathan · 2025-03-13T15:26:19Z

avanathan
Mar 13, 2025

@saram7619 Are you able to solve this problem?

0 replies

This comment was marked as off-topic.

Sign in to view

vite project showing 404 pages when uploaded to github pages #61478

Uh oh!

Body

Guidelines

Replies: 7 comments · 18 replies

This comment was marked as off-topic.

Uh oh!

saram7619 Jul 22, 2023 Author

This comment was marked as off-topic.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

saram7619 Jul 22, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

saram7619 Jul 22, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 7 comments 18 replies

saram7619 Jul 22, 2023
Author

saram7619 Jul 22, 2023
Author

saram7619
Jul 22, 2023
Author