After uploading my react app on gitHub pages its showing a blank page, and there is no error displaying in console. When I inspected the pages it says:
You need to enable javascript to run this page
but when I checked by browser settings it shows my javascript is enabled.
Here is my console
Here are the elements
Here is the Package.json
Also when I tested with a basic react app(no routes only single page) it was displaying properly
If gitHub is not publishing, is there any other alternative to publish my work?
Thanks
It looks good from my side. You should try with another browser to see if the problem persists.
Related
while hosting react web page on GitHub pages it shows only white pages even though I used the instruction on the deployment of react page on Github.
I think it is due to the react-router-dom (Switch and route ) methods I used to redirect to its page. please give me a solution regarding this.
I tried to edit the package.json file but it not be solved and I also tried to push the file again to that repo branch
https://itsmenick.github.io/my-portfolio/ this is my url
I did all the changes regarding the deployment ie changes in script and all but still not reflected in this.
https://github.com/ItsMeNick/my-portfolio/ this is my github path to repository
Can anyone say what is the mistake ?
That is odd. and the development build works just fine? I noticed there is a cors error from you github page and this could be your issue.
I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/
I recently deployed a reactjs website on github pages using the custom domain -https://titanmarket.co.ke/.
The website works as expected but returns a 404 error when you reload a page. Usually, a user would expect the current page to be displayed on refresh.
Any insight on this would be great.
This may answer your question link Reference, Also see this
Super easy solution for Github pages reload 404 error.
in the src/public/ index.js file add this script below to the bottom body:
Index.js
https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html
Create a 404.html file in the root directory:
404.html
https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html
Read more:
Source:
https://github.com/rafgraph/spa-github-pages
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])