Blank page when deploying a react app to github pages and vite

Question

When i try to deploy my react app to github pages with the package gh-pages, the result page is blank.result page

The page I am trying to deploy is here: LINK I don't know if it matters but I am currently using the free domain given to me by GitHub: www.elvas.me

I tried following the react official docs: Link, but it didn't work for me... Perhaps it's because I am using vite and not create-react-app?

*Edit*

Found out that the site is trying to get the .js and the .css from the wrong place.

I just don't know what I am doing wrong...

Unhitch

Have you set the "/" route ? – Farcy

How do I do that? In the index.html? – Unhitch

I mean in the app.js, where you define your routes, is the "/" (the home route) defined ? – Farcy

I don't think it is... But I am not using react-router, do I need it? – Unhitch

If you only have one route, no. But if you want to develop many routes in the future, I recommend you to use react-router. – Farcy

For this specific project, i do not need more than one route :) – Unhitch

Did you do npm run build? It looks like your files aren't the build files in the github repo – Stratovision

I did! I am using yarn, so yarn run build. The files don't look the same because I was testing stuff, but now it's all updated. Still not working tho. – Unhitch

when i do yarn deploy, it will automatically do the yarn run build right? – Unhitch

Answer 1

Ok, so to solve this the only thing that I had to do was to add base:"{repName}" to the vite.config.ts file.

Source: https://vitejs.dev/guide/static-deploy.html

The images were not loading, I used this to fix them: Github pages vite JS build not showing the images

Unhitch

Answer 2

I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:

• First things first, make sure that your ".git" folder and your project are in the same folder.

1. Run npm run build. You should have a dist folder now.
2. Open the file vite.config.js (or .ts).
3. Add the base file with your repository name. Include the two /.

Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.

export default defineConfig({
  base: "/react-beautiful-dnd/",
  plugins: [react()],
});

3. Open your .gitignore file and delete the dist line from it. You want to make sure that the dist folder is pushed to github.
4. git add .
5. git commit -m "deploy"
6. git subtree push --prefix dist origin gh-pages
7. Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this: https://atlassian.github.io/react-beautiful-dnd

In case it's still showing a blank page, it's very likely to do with the step number 3. Ensure you added the correct repository URL and that it begins and ends with the / sign.

That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.

Chelyuskin

Thanks for this. I didn't see these instructions anywhere in the github docs. – Jube

Answer 3

Make sure that

1. vite.config.js contains base set to your repository name.
   For https://<USERNAME>.github.io/<REPO> your vite.config.js file should be something like this.

/*
...
*/
export default defineConfig({
    plugins: [react()],
    base: "/<REPO>/",
});

2. If you are using react route then set basename as your <REPO> name for <BrowserRoute> component.
   Your main.jsx file should be something like this.

/*
...
*/

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter basename={"/<REPO>/"}>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

I had issue deploying on github pages as I didn't set the basename property.

For more details check here

Hope this will find helpful to someone.

Sumach

Answer 4

To anyone else encountering this problem in the future and finding this thread: Check your file names very carefully for your vite.config.ts and such. I'd accidentally misnamed vite.config.ts as vite.config.js (which one you use MUST match tsconfig.node.json). Everything worked just fine in preview until I tried to deploy, and suddenly, white screen. Took me a couple hours to figure out what was going wrong.

Also, if you're using a custom domain, the proper base is "/" which is also the default (nothing).

And finally, there's a lot of blog posts giving you suggestions about what github action to use. When the one from the docs didn't work, I tried using others that were recommended in such guides. But when I fixed the underlying problem, my deploy still didn't work; it was only when returning to the suggested config from the actual documentation that my deploy was successful.

There's a lot to mess up on, hopefully as vite matures, there are more correct answers and (relatively) fewer wrong ones, and I hope this helps someone!

Belgrade

Answer 5

I beat my head against a wall with this issue for many hours.

I had correctly set the base in my config file, but it wasn't being prepended to the 'assets' folder path during the vite build of dist/index.html. Check your dist/index.html after build to make sure base is being prepended correctly.

It took me a long time to figure out why the prepend didn't work. It turned out to be because the vanilla Vite React template I used to initialize the project had placed my vite.config.js file in the src subdirectory, whereas it should have been in the root directory. After moving it to the root, vite build worked correctly.

Garbe

Answer 6

Make sure those things

1. the dist folder is not in the .gitignore file
2. in the vite.config.js file the base name should be repository name
3. all route bases should be start with the repository name

Galegalea

I think is a good practice to put dist in gitignore, because besides being necessary data in the repository, it can create conflicts when you are working with a team. – Junker

Answer 7

On the top of everything that has been pointed out, another possible error (which I did):

When configuring Github Actions on the repository, the default content shown in the workflow static.yml looked awfully similar to that suggested in the vite documentation page. So I did not bother to change the default suggestion and committed it.

The culprit in the default suggestion was :

with:
          # Upload entire folder
          path: '.'

Vite documentation rightfully pointed out which I ignored:

with:
          # Upload dist folder
          path: './dist'

This final change had my project working!

Connieconniption

Answer 8

if any one that comes here using the react-router-dom then , you would have to add this into your App.tsx

import SignIn from './pages/Signin'

function App() {
return (
  <BrowserRouter basename="/your-repositorie-name">
    <Routes>
      <Route path="/" element={<SignIn />} />
    </Routes>
  </BrowserRouter>
)
}

export default App 

Unwinking