Complex dynamic websites on S3?

Question

Preface: I'm just a mere mortal DevOps engineer who hasn't gone down the path of creating web app from scratch before until now...I am wondering if many people have ever gone down the route of creating complex dynamic websites on S3. I'm scoping out options for a quick way to bang out a POC and I'm not particularly seeing any reason for going down the traditional webserver route when I feel as though I can properly leverage my own skills by busting out the backend purely running on AWS/ApiGateway/Lambda and interacting with a Js/React/S3 frontend.Firstly I am wondering if deploying anything beyond a basic static site on S3 is a fools endeavour from the context of any webdev jockeys around here.Secondly if not - is there any front end tooling that is specifically designed around this area?Apologies if a dumb question.

bradwood · Accepted Answer

We do exactly this with a React app served from S3. Just think of it as a (mostly) dumb webserver. It's not gonna do any compute, or server side rendering/includes.If you need server side compute, lambda and API GW is the way to go.

superdeeda · Answer

If with "dynamic", you still mean client-side rendered, then yes, it's the same as deploying any other static website with or without JavaScript.You can follow a tutorial like this one: https://www.newline.co/fullstack-react/articles/deploying-a-...

quickthrower2 · Answer

You are rediscovering the Jamstack (https://jamstack.org/) which is a developer-efficient way of getting stuff out there and done. The only disadvantages are &ldquo;broken without JS&rdquo; and possibly load times (hence you hear about &ldquo;prerendering&rdquo; to address that.

rescbr · Answer

Some tips if you go this way:- Use CloudFront in front of your S3 bucket, in this way you get custom domains and HTTPS and decrease requests (and its associated costs) to the S3 origin. Don't bother with S3 website hosting, unless you're using another CDN to front the website. Even then, I'd rather use CDN -> CloudFront -> S3 just to prevent setting the bucket as public and leverage some behaviors (see below)- On CloudFront, remember to set a default root object (this is the index.html file)- If you are using a router on your SPA, set CloudFront to handle 403 and 404 errors as custom responses - return 200 with the path set as your /index.html- Getting 403 on CloudFront? Check your bucket policy first!- Page not updating? Remember to invalidate the cache after updating the files in the bucket.- Want to avoid CORS shenanigans? You can add your API Gateway endpoint as an custom origin with no caching on the same distribution but on another path.

jjk166 · Answer

I've done it, but I don't recommend it for anything other than a learning exercise. Everything is set up so that it looks like it should be easy, but you actually have to finagle quite a few things to get it to work right, and making even small changes is a huge chore.Admittedly, it has been a few years since I last tried this, perhaps things have improved or there is better tooling out there.

pritambarhate · Answer

Does your application need SEO (Search Engine Optimisation) as well as dynamic content (something that depends on UGC)? If yes, then deploying the site via traditional server is the best way to do it.Edit: if you don&rsquo;t want to manage a server then you can use Next.js and Vercel and get same benefits as server rendered pages. So that&rsquo;s an option too.

fulafel · Answer

You'd probably spend less time on setup and infra by going with application platforms such as Netlify, fly.io, Firebase, platform.sh etc - but if you want to hone your AWS skills or have an AWS app skeleton and infra-as-code from work to recycle, why not.

ALLTaken · Answer

not a dumb question, the state-of-the-art is nothing nailed against the wall that's there forever. It's in constant flux and development.
Using Next.js on Cloudflare and Cloudflare Workers (edge-functions) or deno is a basically as free and serverless as it gets. Cloudflare pages are free.
Here's an article on it: https://engineering.udacity.com/hosting-next-js-at-the-edge-...
Then there is: https://remix.run/

Complex dynamic websites on S3?

We do exactly this with a React app served from S3. Just think of it as a (mostly) dumb webserver. It's not gonna do any compute, or server side rendering/includes.
If you need server side compute, lambda and API GW is the way to go.

If with "dynamic", you still mean client-side rendered, then yes, it's the same as deploying any other static website with or without JavaScript.
You can follow a tutorial like this one: https://www.newline.co/fullstack-react/articles/deploying-a-...

You are rediscovering the Jamstack (https://jamstack.org/) which is a developer-efficient way of getting stuff out there and done. The only disadvantages are “broken without JS” and possibly load times (hence you hear about “prerendering” to address that.

You'd probably spend less time on setup and infra by going with application platforms such as Netlify, fly.io, Firebase, platform.sh etc - but if you want to hone your AWS skills or have an AWS app skeleton and infra-as-code from work to recycle, why not.