I am trying to add an offline.html fallback page to my React app using the premade service-worker.js and serviceWorkerRegistration.js template files See HERE. Everything is working as it is, but the offline.html file that I placed in the src/offline.html location is not caching. When I open the network tab it is giving 404 error for the offline.html file.
I followed the official guide but had no luck.
It will be helpful if anyone can provide a proper guide.
Related
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/
Wanted to create a "tags page" that has all posts with a certain tag. I added it to the header of my website but I keep getting a 404 error. It looks like the tags page isn't building at all?
404 Error page:
https://tiffanychenster.github.io/personal-blog/tag/reviews/
Repo:
https://github.com/tiffanychenster/personal-blog
Confused as to why it works locally but not on Github pages. Thought it might be an error with my nav links but messed around with header.html a lot and got nowhere. Any help with creating the tag page on remote server would be much appreciated
GitHub Pages only allows you to run a number of whitelisted plugins, and jekyll-tagging is not one of them. This means the plugin won't run, the tag pages won't exist and you'll get a 404 response.
The suggested workaround if you want to continue using GitHub Pages and custom plugins is to build the site locally and commit the output. You could commit it to the same repo in a subfolder and then select that folder as your base in GitHub. Alternatively, you could keep the result in a separate repo (i.e. my-website and my-website-output). This way the source git history isn't tied to your output - as well as keeping each repo's file size down.
Another way altogether would be to create the tag pages without the plugin. It would be a bit more manual but not always unmaintainable depending on your use case.
Check out the ruby gem update_tags, which does what you're looking for and works in GitHub pages.
Here's some more context about how and why that gem works.
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
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.
I have a React app which is created by create-react-app command.
And I also have the blog system which is based on Wordpress.
Directory structure is like this.
*/index.html
/service-workder.js
/manifect.json
/index.html
/favicon.ico
/asset-manifest.json
/static/media
/js
/css
/blog <--------------------- Wordpress*
When I access the URL by http:mydomain/blog/,
Firefox show React page instead of Wordpress page.
Firefox even show React page for http:mydomain/blog/nonexisting ,
which I think is supposed to provide 404 not found from web server.
I was struggling to find a way NOT to let React take wildcard paths.
Safari use React only for index.html, which is good.
Chrome, Firefox use React for entire wildcard paths, even for not existing paths.
http://myserver/ ---> should show React app
http://myserver/nonexistence ---> should show 404 from server
Please help me to figure out isolate React app only for exact index.html.
Thanks in advance.
Like I wrote here, the root cause was service worker which seems to be HTML5 feature to make a web site to a web app.
Unregistering service worker was the solution.