Hi everyone, I recently built a site using a template starter from the Astro website, it runs perfectly when running in dev mode but when I build it with npm and upload the dist folder to my AWS S3 bucket the pages only seem to half load with none of the styling, is anyone able to point me in the right direction to get the site working?
#Astro can't find assets in /public [S3]
final herald
Are you trying to load it straight from your bucket?
Might be worth checking you've followed everything here correctly first https://docs.astro.build/en/guides/deploy/aws/#s3-static-website-hosting
Failing that, check the network requests for your css files and see why they're failing. I'm going to guess it's a 404 because your page is trying to access them at the route.
I think you may need to set a base in your Astro config https://docs.astro.build/en/reference/configuration-reference/#base
uneven fjord
Hey, big thanks for replying!
Sorry, i'm not sure what you mean by 'straight from the bucket'? I've just uploaded the dist folder straight into the S3 bucket, yes. I did have it working with a template site before so I'm confident the bucket is set up correctly.
You're right about the 404 errors, I've had a look through the docs you linked for the base and it seems to be the issue since all of the errors on page load are 404 for the images and videos I've added as content.
I'm a little confused in how I should be setting this up, I've got my resources stored in a folder named 'assets', which is included in the dist folder, if I add this as the 'base' then it gets appended to the URL for every page which breaks all the links as it changes the URL so I'm not sure I'm doing that correctly
I've left the site broken and still live at, and I've also made the GitHub repository () for the site public. If anyone can spot the mistake I'd really appreciate the direction. Since it works fine in dev and not production I'm really pulling my hair out over this one! Thanks again!
uneven fjord
Out of sheer desperation I also just tried moving all of my external assets to the root /public directory and linking to that but still no use 😦
I also suspect the title of this post is wrong, nothing to do with AWS and I'm making a basic Astro mistake but I'll have to try again in the morning
uneven fjord
Astro can't find assets in /public
final herald
Ok let me take a look at this, just seen your site and yeah everything got the ol' 404
final herald
Hey, big thanks for replying!
Sorry, i'm not sure what you mean by 'straight fr...
Sorry, i'm not sure what you mean by 'straight from the bucket'?
So basically I wasn't sure if you were trying to access it at like s3.yourbucket.amazon-aws.com/blahblahblah whatever like whatever the raw bucket path for your asset is! But no, you're using Cloudfront, ok ok
So basically what you'll want to do is, when you run astro build. You just want to copy the contents of the dist folder into your bucket, then point your site at that bucket. Forgive me, I've never done it, I can't fully remember what the S3 options are for hosting a static site these days
So since you're serving from a domain, you don't need to set the base. The base would be more if you had your site at like s3.aws.com/yourbucketname/. Then the base would be yourbucketname
uneven fjord
Hey, thanks for coming back!
I have uploaded nothing but the dist folder into the S3 bucket and Cloudfront is pointing to the index.html in the dist folder, no base as suggested but it still ends up as is on the domain currently
Ah, when you say the 'contents of the dist folder', am I supposed to only upload what in the folder directly to the source of the bucket as opposed to putting the entire dist folder in there?
final herald
Ah yeah, so you just need the contents, not the actual folder itself! But I'm not 100% sure how S3 handles that! If you can point your deployment to the folder itself instead of just the bucket (as I thought), you might be alright
uneven fjord
I emptied the dist folder into the root of the S3 bucket and that worked to get the external assets loading, however, for some reason the .astro generated css for one of the other pages is falling over, though that's generated by astro ?
uneven fjord
Ah yeah, so you just need the contents, not the actual folder itself! But I'm no...
This is something I never would've thought of, thank you for pointing it out!
Any idea why astro wouldn't be able to find something it generated? Or why it's making a css file for a page that I didn't?
final herald
Hmmmm which page? It in the repo?
final herald
So each of your pages is using the BaseLayout component which is using the BaseHead which importing stuff. So yeah all your pages should be linking to some external css.. Why it's a 404 I'm not sure. But maybe take off the base: '' out of your config too? You don't need that
uneven fjord
in fact, clicking on the links doesn't route to those pages so I'm not sure i've even created them properly :/
final herald
Hmm with your links you'll want them to be /allprojects and relative to the root
Otherwise it'll try to find a child route
uneven fjord
Ah, I forgot I removed the trailing slashes last night whilst experimenting, I'll kick off another build quickly without the blank base definition too
final herald
🙌 we're so close, I can feel it! And I ca't wait to see it when it's all working
uneven fjord
It's been so long since I've tried to put something online, the web has changed so much, definitely making it closer though, cannot thank you enough for your help!
Ah, no dice. It still doesn't seem to find that css. I'm a little confused by the dist folder, the docs say that the default build options will create a folder for each page which it does, and that _astro would be the generated content, however, _astro only has 1 file in, the allprojects.css generated file and nothing else, should there not be other files too?
Vite is complaining about these files when building but doesn't fail or complain in dev?
Links also don't find the pages with the slash included so I'm convinced its the build that's the issue :/
final herald
Hmmmmmm, I wonder if this is an issue with s3... When you've deployed it, if you go to mayurpatel.co.uk/allprojects manually, does that work?
With that folder structure you should at least get the page
If not I'm wondering if it's an s3/cloudfront issue... And if it is.. Ohohohoh man am I not the right guy for that
A good check to see if it's the build is to do astro build && astro preview then check your site in the preview mode instead
That will serve your actual built site instead of your dev site
uneven fjord
Trying the URLs manually doesn't work either. That's a great tip about the preview builds, I had no idea there was a staging option.
I've just realised I missed changing one url in the tailwind.config.js for those helper files, uploading a build with those URLs changed to root and I've got my fingers crossed that's it
And for some reason emptying the bucket and refreshing the URL still serves the old site which is fun :/
final herald
And for some reason emptying the bucket and refreshing the URL still serves the ...
You might be hitting before the cloudfront distribution has refreshed?
uneven fjord
I was updating Cloudfront each time to point to a new dist folder but now I'm uploading to the root bucket I've left it pointing at index.html, I'll see if I can find a way to manually refresh the Cloudfront distribution for each time I upload
final herald
I was updating Cloudfront each time to point to a new dist folder but now I'm up...
Hmmmm, I'm guessing it isn't working still? I may need to bring in reinforcements who know more about S3!
uneven fjord
I think I'm being held back by S3 at this point, I've been adding timestamps to the homepage just so I know that the files I put in the bucket are actually the latest build and when refreshing the domain its still showing the files from last night
Will try refreshing Cloudfront somehow to serve the latest files, which i'm praying, are the working ones
final herald
Hmm fwiw I think I've got a version which is the latest? Or at least quite recently
Might need a hard refresh in your browser?
Just a sanity check you've done everything in this section too? S3 with Cloudfront?
https://docs.astro.build/en/guides/deploy/aws/#s3-with-cloudfront
uneven fjord
Strange you're able to get the latest, will hard reset my browser too, I've just emptied the bucket to try and get back to a blank page to reupload again,
I've followed all of those steps except for the Continuous Deployment stuff, I can point Cloudfront to a different project which loads fine so I'm sure the bucket is set correctly
I've uploaded the dist folder from my last placeholder site into the bucket, if i navigate to https://mayurpatel.co.uk/dist that site loads flawlessly so I think the error is somewhere with the new project and the project structure
Though atleast fixing those last URLs in the tailwind.config has stopped the vite warnings
final herald
That's the old astro logo 😭 You can grab the latest here https://astro.build/press/#assets
uneven fjord
Another great catch, have just updated the references on my new site!
Managed to get to the same page you were seeing after emptying the bucket and refreshing the browser, still getting those css warnings, since i've added pages to the project beyond the index.html do I need to configure any of the build options in the astro.config? or should the default 'directory' build option work?
Running 'npm run astro preview' also works flawlessly like the dev build 😢
final herald
So I don't wanna blame S3... But... Hmmmmmmmm
I've asked the support patrol if any of them know anything more about S3! Hopefully someone can come back with something
uneven fjord
It does seem likely at this point though I'm confused why the other project works fine but not this one, I'm also a little confused why astro is building a 'allprojects.css' file anyway when it's not the homepage or the only page with css, are there any other build options that I could look into?
uneven fjord
So I just tried uploading the original template project I started with (https://astro.build/themes/details/gurido/), without any changes and that also immediately falls over with the same error about finding the root css from _astro, (note to self; check the theme works first next time 😢 ), I'm thinking the issue is with the way the project is set up to build, will continue hunting through the config files
Although I'm hoping the original template isn't locked in some way?
final herald
hmmm I don't know, I feel like a build to a static site is a very kinda straightforward thing. As long as you have
/index.html
/allprojects/index.html
You should be able to visit site.co.uk/allprojects ... If you can't, I'm not sure it's a build issue
uneven fjord
I've tracked down the original dev on Twitter and posed the question so hopefully he'll get back
Yeah, manually navigating to those pages still throws the 'No Such Key' which is very confusing, is it wrong to miss the days when double clicking on index.html on your desktop was good enough 😩
final herald
Is this just for a portfolio site? Tbh you may want to try Vercel, Netlify or Cloudflare tbh! All have much easier onboarding for hosting static Astro sites!
I'm sorry I don't know more about S3 to help you but from what you've said it should all work
warm quest
Astro can't find assets in /public [S3]
warm quest
@uneven fjord https://mayurpatel.co.uk/dist should not work because copying content of dist folder from your local machine to s3 should end up with "index.html" at the backet root. "key" for aws is nothing else than the file path where default with nothing (root path /) is configurable and defaults to /index.html
now this is the error I get
check two things :
- that the file exists on your bucket
- that you uplodad it with the correct meme
Are you on windows by any chance, because I faced the issue that assets were fetched as text type e.g. scripts as text instead of application/json and the browsers do not like that
this was my workaround for that kind of situation. First js did not work at all for me, with this everything worked
aws s3 cp dist/ s3://<bucket>/ --recursive --exclude "*" --include "*.js" --content-type "application/javascript"
aws s3 cp dist/ s3://<bucket>/ --recursive --exclude "*" --include "*.css" --content-type "text/css"
aws s3 cp dist/ s3://<bucket>/ --recursive --exclude "*" --include "*.html" --content-type "text/html"
# Continue with other file types as necessary
[:doc-improve] https://docs.astro.build/en/guides/deploy/aws/#s3-static-website-hosting
here my test deployed site from S3 http://astro-big-doc-web.s3-website.eu-central-1.amazonaws.com/
I did not use cloud front yet though, did you try with S3 alone without cloudfront ? did it work ?
uneven fjord
So I don't know why it took seeing a screenshot of the 404 message, (I blame my cousin-sister's ongoing wedding 🙃 ), but I double checked the S3 bucket and... The folders weren't there.
When using the web interface for S3, uploading has two buttons, one for files and one for folders, turns out the button for files ignores folders when you hit ctrl + A. That meant I didn't even upload the folders for the routes to the two pages, or the generated _astro file with the site css.
It was as simple as adding these folders to the bucket and voila, everything working, I'm actually a little relieved that it was such a silly issue since it means I don't have to throw all my learning notes in the bin 😅 .
Thank you both so much for your help! If you ever find yourselves in a Wetherspoons, shoot me an email and the beers are on me!