1

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

Improve this question
9
  • What is your name of repo? If you create repo as "Test", then your project's base url has to be abhishek-098.github.io/Test. In Angular i easily can set it in index.html meta tag. Commented Mar 7, 2021 at 17:15
  • just posted it, have a look Commented Mar 7, 2021 at 17:16
  • and you would like to see it as a html page? Commented Mar 7, 2021 at 17:19
  • i'm new to react , so everything is new to me. if i'm wrong at any place please correct me. Commented Mar 7, 2021 at 17:21
  • 1
    According to create-react-app.dev/docs/production-build you should have build/static folder, but your repo doesn't contains. How you build your react app in production mode? I see package.json and node_modules folder what is unnecessary in a production build. I think you build it incorrectly Commented Mar 7, 2021 at 17:25

2 Answers 2

Reset to default
1

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

He created a new repo: github.com/Abhishek-098/React_Project There is a master and a gh-pages branch. He said that GitHub page's source set to gh-pages branch. what else is missing?
0

@Rodrigo Ramirez does explain how its done, but leaves out some important information provided in the docs he linked (https://create-react-app.dev/docs/deployment/#github-pages). Maybe the've been updated since but I would recommend following those steps in the doc. They give step by step instructions that are very easy to follow.

I tried following @Rodrigo Ramirez answer, as well as, countless other things on the internet and nothing worked and it was all very complicated. The doc provided here gets it all done for you very easily.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.