I am learning to deploy different react apps on different hosting platform. So I cloned this repo Cloned Repo and run it locally and it works fine, so I am trying to deploy it on netlify.
Based on the repo this is how I configured the build settings on netlify
But after It finished deploying and I preview the deployed live link, the page is just blank without any error, Though I feel it's not routing to the main page based on the project webpack.config.js, but I don't know exactly what to do?
So the problem is that, in netlify, you have already mentioned your publish path as dist. But in your index.html, you have mentioned the script src as /dist/example.js.
We just need to modify the script src in index.html as example.js instead of /dist/example.js since we are already inside dist folder.
index.html
<script src="example.js"></script>
Related
I have a website hosted with GitHub Pages at https://[username].github.io.
I have a separate deployment for the repo [username].github.io and the web page hosted at https://[username].github.io is working fine.
I recently created a react app using create-react-app and wanted to host that to Github pages. The repo name is react-gsap. Now I followed the https://github.com/gitname/react-gh-pages tutorial to deploy the app to Github pages. Once I ran npm run deploy I see that the gh-pages branch is created and it has the index.html and other files that are required to run the web app.
The problem is when I access https://[username].github.io/react-gsap I am getting 404.
Here's the repo that I created: https://github.com/atiqorin/react-gsap
What am I missing?
UPDATE:
It was just a delay. The github pages is working now. I guess it takes some time to have the page ready. Anyone having similar issue might want to wait an hour to see the changes.
So I have a reactjs app publish in github pages, is this one https://bernardoolisan.github.io/PyOcr/
The problem is that the app fetch data, but when I deploy it on github pages it give this error:
And it was working:(
And now my page doesn't work too, it was working but right now is blank i dont know why
I guess you are deploying the react project the wrong way to hosting providers such as github or netlify . First you must build your react project and then only push the files inside the build folder to hosting provider . Github pages can only serve static html css js files so it can only serve the build folder of your react project .
Note
To build a react app you can run npm run build and a build folder will be generated . Then you can push the files inside of the build folder to github repository and enable github pages for it .
I was having a similar issue, and I too though gh-pages can't fetch data. But what I did was I added cors to my server. I allowed cross-origin requests. Now it retrieves data from my server on heroku.
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
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.
All the information was taken for the following link:
https://create-react-app.dev/docs/deployment/#github-pages
I hope you found it useful!
#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.
I am using a react protfolio template, and the single page app, loads perfect when I host it locally. But when I try to host on github pages, it shows me the read me file (I guess because no copy of the index.html file in the root), but even then I make a copy of the html file in the root, it just shows me a blank page.
Why the big difference between what I see localy and how it is displayed on github pages? How do I fix this?
Here is the code:
https://github.com/davidlindercodes/Ultimate-React-Portfolio
Thank you
This is because, you didn't build your React app or create gh-pages branch.
What you have to do
You have to build your React app and move the files in dist folder to a branch called gh-pages. Then Github Pages will render the index.html in the gh-pages branch.
Refer How to deploy React App to GitHub Pages
Newbi question here: Can you build a ReactJS app to run just in a browser, with no kind of web server?
The app that I want to run has been created with create-react-app and I've tried building it with npm run build, but when I opened with a browser the index.html file from the build directory, the page was empty and in the console I got an ERR_FILE_NOT_FOUND error for a bunch of css and js files, even though the files can be found in the specified location.
I'm asking this because I want to build an app for my work, where I don't have admin rights and I just wanted to copy-paste it.
The problem was that in the index.html file, where the files were imported, the path looked like this: <script src="/static/js/1.944de9ae.chunk.js"></script> where in fact you need to have a dot in from of the path, so like this: <script src="./static/js/1.944de9ae.chunk.js"></script>.
Sorry for the spam!