I am using fullpage.js plug in for a website I am building as it allows me to display each page as a slide which locks in on scroll. Here is the website if you are interested in taking a look: https://alvarotrigo.com/fullPage/
Locally it loads fine and the page works and looks exactly how I would like it too, however, once I upload my files to amazon AWS I get a whole list of console errors but the root seems to be that the fullpage.js files are forbidden. I have tried using a CDN to pull the files, however, this has not been successful. Any recommendations?
I did not set the right permissions in AWS for the folder containing the files, I moved the files into the root folder and it works.
Related
I have a static site that I served to s3 called tidbitstatistics.com
I wrote a script using boto3 to replace the files with new ones and since then, my site doesn't open - instead it downloads the index.html file.
From what I can tell, I didn't change any settings. The site was working fine before I re-uploaded the files. Since then, I deleted all the files and re-uploaded them manually, but I am still running into the same error.
I thought this might have to do with the file types, but they were the correct text/html file types when re-uploading manually and I am adjusting my script to specify file types when calling put_object instead of upload_file with boto3.
Static site hosting is turned on for that bucket and public permissions to read are set. I'm just not sure how s3 all of a sudden won't serve my static site.
I followed the answer here, but I don't see a Content-Disposition property.
Any help would be appreciated - web development is not my strong suit!
I hosted a small django project on virtual machine on digital ocean. Before I started using digital ocean to serve static files everything worked fine. But immediately I created a storage space and push my static files there the static files are not being served on the webpage, including django admin page (the project pages are showing net::ERR_ABORTED 403 (Forbidden). I have already installed django_storages and boto3.
I got some hint as to the possible cause of the problem when I clicked on digital ocean aws bucket url that looks like https://django-space-storage.nyc3.digitaloceanspaces.com. When I cliked on it I got the following error:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
It seems the browser is rendering my django pages as xml instead of html. I might be wrong with this assumption because I'm finding a hard time trying to understand what is actually going on. My question is, how do I cause the browser to render my django pages as html instead of xml?
I'm trying to get a prototype Next.js project up by doing a Static html export (i.e. next export) and then copying the generated output to AWS S3 and serving it via Cloudfront.
I've got the following two pages in the /pages directory:
index.tsx
Pricing.tsx
Then, following along from the routing doco I added a Link to the pricing page from the index page, like so:
<Link href="/Pricing">
<a>Pricing</a>
</Link>
This results in a link that looks like example.com/Pricing (when you hover over it and when you click the link, the page does change to the pricing page and the browser shows example.com/Pricing in the URL bar).
The problem is, that link is not real - it cannot be bookmarked or navigated to directly via the url bar.
The problem seems to be that when I do a next export, Next.js generates a .html file for each page, but the router doesn't use those .html suffixes.
So when using the site, if the user tries to bookmark example.com/Pricing; loading that bookmark later will fail because Cloudfront will return a 404 (because CF only knows about the .html file).
I then tried changing my Link to look like:
<Link href="/Pricing.html">
<a>Pricing</a>
</Link>
That causes the router to use example.com/Pricing.html and that works fine with Cloudfront - but it actually causes a 404 during local development (i.e. using next dev)!
Other workarounds I could try are renaming all the .html files and removing the extension before I upload them to S3 (and make sure they get a content-type: text/html header) - or introducing a Cloudfront lambda that does the renaming on the fly when .html resources are requested. I don't really want to do the lambda thing, but the renaming before uploading shouldn't be too difficult.
But it feels like I'm really working uphill here. Am I doing something wrong at a basic level? How is Next.js linking supposed to work with a static html export?
Next.js version: 9.5.3-canary.23
Alternate answer if you want your URLs to be "clean" and not have .html on the end.
To get Next.js default URL links working properly with S3/Cloudfront, you must configure the "add a trailing slash" option in your next.config.js:
module.exports = {
trailingSlash: true,
}
As per the documentation
export pages as index.html files and require trailing slashes, /about becomes /about/index.html and is routable via /about/. This was the default behavior prior to Next.js 9.
So now you can leave your Link definition as:
<Link href="/Pricing">
<a>Pricing</a>
</Link>
This causes Next.js to do two things:
use the url example.com/Pricing/ - note the / on the end
generate each page as index.html in it's own directory - e.g. /Pricing/index.html
Many HTML servers, in their default configuration, will serve up the index.html from inside the matching directory if they see a trailing / character in the URL.
S3 will do this also, if you have it set up to serve as a website and IFF you access the URL through the website endpoint, as opposed to the REST endpoint.
So your Cloudfront distribution origin must be configured as a Origin type = Custom Origin pointing at a domain something like example.com.s3-website.us-east-1.amazonaws.com, not as an S3 Origin.
If you have your Cloudfront/S3 mis-configured, when you hit a "trailing slash" style URL - you will probably see your browser download a file of type binary/octet-stream containing 0 bytes.
Edit: Beware pages with . characters, as per issue 16617.
Followup to Shorn's self-answer of using the as field in the next/link component. This worked for me, however it would fail if I refreshed the page I was on.
Instead, I used exportPathMap to link my pages to a page.html equivalent that would be created when running next export.
The downside of this approach is that when running next start, those .html files will not be created or accessible. They will, however, from next dev. As I am creating a purely static website, I've now just been using next dev.
While making this change I was validating by manually copying my built assets from next export into S3 and hosting in CloudFront as Shorn was doing -- I no longer do this to validate and haven't had issues so far.
If anyone knows, let me know what I else may be missing by ignoring next start as part of development. This solution has worked for me so far though.
After writing this question, I found a reasonable workaround - though I'm not sure if it's the "right" answer.
Change the Link to:
<Link href="/Pricing" as="/Pricing.html">
<a>Pricing</a>
</Link>
This seems to work in both local dev and for bookmarking the site as served by Cloudfront. Still feels kind of wonky though. I kind of like those non .html urls better too. Oh well, maybe I'll do the renaming workaround instead.
I've been messing around with AWS lately and it definitely great. As a first test I'm trying to host the most basic static website via S3. The site is simply just one html file and a few javascript, css and image files.
Whenever I load the static URL the only thing that loads is the index.html file, its contents and for some strange reason the only image that loads is my avatar, yet all the images are stored in the same folder. All of the css, js and image files are also written as relative links too of course.
I've made sure all the files and folders permissions are set to "world" multiple times.
I also looked at the network tab in dev tools and its giving me 200's on every GET request.
I'm completely stumped as to why this is happening. Does anyone have an idea of what I'm missing?
The url is available at http://www.mikefisher.io.s3-website-us-east-1.amazonaws.com/
I should add that the site works perfectly locally as well as on a traditional web server.
I checked my browser console and it gives me this error which I think might have something to do with it.
Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream:
Fixed it!
The issue I was having is the metadata for the CSS files in Amazon S3 were set to 'binary/octet-stream' by default.
The way I fixed this was selecting the individual files in the bucket, clicking the properties tab, then in the meta-data section typing in 'text/css' as the value.
We are using Sitecore 6.5 and have a multi-site Sitecore solution (with lots of library code we have inherited)
Publishing the Media Library by item from Staging to Production but we are not seeing the image on the web.
The images are in the web database and the path to the images in the web site is good.
Error we are getting when the file is requested (same in browser window address bar) is http://domainname/error?aspxerrorpath=/~/media/OSS/Images/WaterAndWildlife/myimage.jpg.
There is no media prefix in the web.config
Any idea?
....Looking into it now but site is going live tomorrow so help very appreciated! Help!!
We faced a similar problem when, in production, media files were not published which resulted in 404 errors.
Solution: The problem was that media files were not saved to the database because a file path was provided with the Sitecore media files while uploading.
So the images were saved on the file system instead of in the database. But based on our web.config configuration we were fetching images from the database.
If you are facing a similar issue, just download the media image, remove the file path, and save it. Then re-upload the same image, save and publish the image.
Hope your problem will be solved.
One question, are these staging and production environments separate code files? if they are, what is the setting in your web.config for the settigns UploadAsFiles? because if that's true it will store them on server and the images will be on staging but not on prod. But usually if this setting is true and the files are getting stored in file system, specially in CM/CD environment it should push the physical files on publish as well, but sometime there might be other issues going on like permission etc..... and the files cant get to the destination.
"<setting name="Media.UploadAsFiles" value="false">"