As of now I want to publish my payment gateway website to GitHub pages but after running all the commands like npm run build as well npm run deploy my page has been published but on GitHub pages it is showing error for resource:
Here is how it looks in my IDE:
You published your website on a subpath like xyz.github.io/mysubpath but the references on the index page (according to the page source) are absolute to the root.
This is even shown in the console output:
The project was built assuming it is hosted at /.
If you cannot move your website to the root, you need to adjust the paths to be either relative (remove the first slash) or include the subpath (e.g. /mysubpath/favicon.ico). The framework you are using probably has a way to set the basepath or homepage.
From the screenshot of your IDE, I see that you seem to use React and therefore can probably change line 2 to homepage instead of home. Additional information can be found here.
Related
So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver
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 set up a react portfolio on github, and here's the build folder.
The problem is: I have to alter the chunk.css file, after the npm run build, from url(danielmarostica.github.io/static/media/Montserrat-Regular.ee653992.ttf) to url(../media/Montserrat-Regular.ee653992.ttf), otherwise github won't load fonts. Why is that? If you access the link directly, you can even download the font.
How can I automatically build the website with the correct path?
Original source files.
The url MUST start with https:// in order to work.
Thanks to #heretic-monkey.
I was trying to deploy a project I made in ReactJS - a tetris game to be exact - and I am coming up with the following error:
On a different stack-overflow post, I read that most likely this is happening because
Most likely there is a reference to manifest.json somewhere in the project, while the file/resource itself does not exist and that I should look for link tags containing rel=manifest.
So I went into my index.html folder and removed the following:
<link rel="manifest" href="/manifest.json">
So after making the changes and updating my code, I pushed to Netlify (netlify deploy, netlify open) and I keep getting the same error. Does anyone know what I may be doing wrong? The project runs perfectly on localhost.
EDIT: adding Network tab image
You do not need to remove manifest.json file. What you need to do is simply connect source code to the version control.
You need to add _redirects file to the public folder. (no extension for this file). add this line to it.
/* /index.html 200
From this, we hope to show components accordingly whenever link updates with components.
Then follow the below steps to host your site easily,
Add your source code to the Bitbucket repository. (connect your local folder to repo)
If you have build remove that folder.
Go to Netlify and link your Bitbucket repository and desired domain.
That's it! Whenever you push the new version to the master branch it will auto-deploy. (No need to build anymore! - make sure to enabled auto-deploy settings to the master branch)
Just use these tools easily. Don't use a lengthy way and make things hard.
I'm building a react website. The goal for it is to be able to simply put the finished website on a USB key and be able to use it on a computer without any internet access.
I'm using react v16.6. I've already tried to simply open the build/index.html file but I received a few Not allowed to load local resource: file:///static/... and the page was blank.
This projects is using a JSON file, pictures and videos.
I don't really know where I should go from here to be able to this.
Thanks for any help.
Based on some of your details, I'm assuming you're using create-react-app.
If you read the error message or look in build.html you'll see that the built site is trying to load your javascript from /build/static/js/.... This would effectively be trying to load the files from the root of the file system, not the current directory. You can set "homepage": "." in package.json and the built site will load the files correctly. This is documented in the message that you get when you do npm run build, which also links to https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment for more details.