I have a gatsbyjs site which I host using S3 and CloudFormation.
If I navigate to the /blogs page, I always end up on the root page first. Navigation works fine afterwards.
On my machine using either gatsby develop or gatsby build && gatsby serve works. I can than naviagte to localhost:9000/blogs and see the blogs page.
When I deploy everything to a S3 Bucket (+CloudFront and a Domain) and navigate to quadroid.net/blogs I end up on the root page of my homepage.
I could not find any redirect in the networking tab of chrome.
Refreshing the page when viewing /blogs does again navigate to home.
Any clues why this might happen?
EDIT
The deployment is done using amplify publish --yes --invalidateCloudFront.
You need to set your Bucket to be public. And set the Origin and Origin Group. It's working for me.
Reference: public-s3-cloudfront-origin
Related
I have vuejs app which is working fine on aws but if I deploy on shared hosting then website works fine but if refresh on a page then it throws 404 error.
I used: createWebHistory in router index file
I also used createWebHashHistory too but refresh page will not work. It throws the below error
The document you are looking for may have been removed or re-named. Please contact the web site owner for further assistance.
If I go to home page and switch menus then it works properly.
Please advise
Thanks
I had previously created a website for my band on thescratch.ie using create-react-app and hosted this using S3 and Cloudfront. I recently replaced the react site using Shopify instead and thescratch.ie domain now points to Shopify.
For new users to the site, everything works fine but old users continue to see a broken cached version of the react website, not a Shopify site. I had assumed that the cache would eventually expire for these users, but it's been like this for a couple of months now.
Looking at the Chrome dev tools network panel I notice a couple of things:
Almost everything is being served from cache - the index.html and main.js return a 200 and have a size of (service worker)
Images return a 404
The manifest.json returns a 404
I'm wondering if there's a way to expire the service worker cache? Is it possible to do this by hosting a new manifest.json file on Shopify?
Thanks in advance.
I ran into the same issue in a combination of CRA & Gatsby.
Found this Gatsby plugin which helped me.
The underlying article maybe also can help you.
tl;dr in my understanding you need to place a service-worker.js in the root directory containing the code to unregister the old service worker.
I am using Apache to host a web application, which has the following folder structure. The application is working fine.
But when "http://localhost/library/bower_components/angularjs-datepicker/" URL is used, the calendar page appears just like this.
Please suggest any way to restrict the access of bower components from the browser.
I have a practise repository in GitHub (see https://jdomleo.github.io/vue-deploy-practise).
Navigate to "About" in the navigational list at the top:
You will see in the URL, it has appened /about, as expected. However, if I give people the URL https://jdomleo.github.io/vue-deploy-practise/about, they get a 404 error from GitHub Pages.
My question is, how can I configure my Vue.js project to allow deep linking?
See link to GitHub repository https://github.com/JDomleo/vue-deploy-practise.
You have to add a custom 404.html page to your github pages that reroutes the request using javascript.
The first problem though is that you have enabled HTML5 History Mode, that requires a server to be set up to handle that and I don't think github pages allows for it.
Once you fixed that you have a couple of options.
Here is one example on how the 404 page uses the local storage to reroute the app. https://medium.com/swlh/how-to-host-your-angular-reactjs-vuejs-spa-on-github-pages-2d9ab102ac7b
Another is simple to change the url to a fragment instead of path, similar to the method used in this library https://github.com/rafrex/spa-github-pages. This library maight even just work for you.
I have a CRA site that has been deployed to Amazon S3.
When the router paths have a / in the url the Javascript or CSS is no longer loading. (i.e. it's trying to load from example.com/subdomain/static rather than example.com/static)
I've tried setting PUBLIC_URL='/' in .env.production and that's not helping.
Any clues on how to get URLs working again.
Any
homepage was not set correctly in package.json