Search code examples
reactjsgithub-pages

I am trying to deploying my static react app on github pages but i'm getting white screen

After taking a look at console, i got this

Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/2.1f6fc1d5.chunk.js”.
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/main.3961266e.chunk.js”.

Link to my Repo : https://github.com/Abhishek-098/TourSpot

Solution

  • For deploying a Single-Page Application (React, Vue) to GitHub Pages, you should know that it is necessary that you do a production build. This can be accomplished by doing npm run build or yarn build depending on the package manager you are using. This command will generate a ./dist or ./build folder that will contain your react app in pure HTML, CSS, and JS.

    For GitHub pages, there are some configurations you should do. First of all, the index.html from your production build (from the dist, build folder) should be in the root folder, which means, you should be able to see it when you open the repo (not inside the build folder). If GitHub pages do not detect any index.html in the root of the repo, it will display a 404 page.

    Now, since you do not want the production build files messing around with your React project, it is recommended that you create a different branch for your GitHub pages deploy.

    So, ideally, you would have two branches: master and gh-pages, the first one containing your React project and the second one containing only your dist folder but in the root of the project.

    Here is an example of the structure of a Repo that it's deployed using GitHub pages.

    https://github.com/8rb/React-Quiz/tree/master

    You can see both branches and the deployment link works perfectly fine. To configure the branch that is being deployed to GitHub pages, go to settings and select the branch where you have your production build.

    gh-pages settings

    All the information was taken for the following link:

    https://create-react-app.dev/docs/deployment/#github-pages

    I hope you found it useful!