Astro + SST: AWS SPA made easy

Who am I?

Hi there, welcome to StateofServerless :wave: My name is Bojan Zivic and to give you a bit of background on me, I am a AWS Serverless Community Builder, AWS Ambassador and work as a Principal Consultant @ Mantel Group and I have been obsessed with AWS Serverless services and CDK for some time now. So at this point, my blood type may as well be AWS.

Move to SPA

Having written a few blogs, across Medium and Wordpress(shudder..) I’ve been on the hunt for something more personal, I could roll my own Wordpress instance/container (thankfully didn’t go this route) or maybe go for a hosted blog route somewhere else with the likes of Wix or Blogger, but this would heading towards a Medium lite approach, same same, but different. The throught to go for a Single Page app instead of CMS + Server blog hadn’t occured to me but this thought did:

“How can I post my blogs, whilst also being cost, effective and keep things interesting?”

Being a CDK nut, I looked at CDK, it was half way there. sure i could use CDK and use a construct like BucketDeployment, but there’s a lot more to setup there. Then I came across Serverless Stack(SST), and.. Its awesome.

What is SST?

The Serverless Stack Framework, usually refered to as SST, is an open-source framework designed to help developers build serverless applications on AWS. SST provides a set of abstractions, tools, and best practices to simplify the development and deployment of serverless applications.

SST is built on CDK so that really drew me to it, as well as that with a very small codebase, you do a lot. Well.. its built on CDK currently as of v2. Announced 29th of Jan 2024, SST will be moving to a Pulumi + Terraform engine of their own called Ion, and the great thing is, there’s still no bespoke DSL to learn, instead it’s still in TypeScript!!

Although the change from CDK to Ion will be massive shift in how SST works, it makes sense, @jayair and the wonderful SST community have made a post all about their decision here: Moving Away From CDK

Support them, they are great and well worth exploring if you are building Serverless or SPA in AWS.

Back to the Blog, how small of a codebase?

Here’s a quick API Gateway with a Lambda Function:

ApiGWLambda

Now for SOE and to hit the right buzzwords, the example above had to include rust but in reality what i want to focus on here is:

ApiGWLambda

Pass a route, and the location of where you keep your code, and boom your path and the Lambda function are connected and deployed. For simple API’s this is great, if you need to tune your Lambda functions even further, because this is SST.. you can 😀

What about the blog?

Well, that’s where it gets really interesting. SST gives you options to wrap SST around Web Frameworks, from their docs SST works with:

  • Next.JS
  • Svelte
  • Remix
  • Astro
  • Solid

SST Options

Digging into the doco of each of the frameworks, the framework of choice was…

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

ASTRO!!

Astro

NextJs and Svelte are great, and to be frank they were both contenders for blog of choice, but at least for now Astro is the winner. Astro out of the box came with a Markdown based blog template option, that meant for me to create blogs, all I needed to do was to create a new Markdown file, add my blog, and npx sst deploy away.

This made things easier to manage, and if I needed to get creative on either the frontend or infra side, I’d need to do some code, which clearly is part of the fun here.

Lets head back to SST

The real magic of SST is when you initialise it. Here’s why:

Image

After the Astro init, all I did to wrap Astro into a deployable Single Page App , was to run npx create-sst@latest command, which in turn, will look at the framework its run from, and will create the base template to push your Web Framework to AWS.

astro-sst

What’s the SPA site look like?

Like this:

spa

If you’re familiar with CDK or Pulumi, this will look somewhat familiar, especially the use of new Bucket and new AstroSite constructs. One will create a secure bucket, and the other creates all thats required to deploy Astro to AWS. To Sum up SST will:

  • Push the assets of the Astro site to a S3 Bucket
  • Setup and configure S3 Bucket for SPA hosting
  • Connect CloudFront and S3 and provide security to the Bucket
  • Create a DNS entry in Route53 of the site based on the customDomain

final

So where to next?

The blog you’re reading is built on exactly what you see above (surprise!! 🎉), and what I really wanted to highlight is how easy it was to build a blog with a little bit of SST and AWS. Whats really exciting is this new change coming to SST v3, when it does release, ill be looking at what the Blog SPA options are like then and will pit Astro head to head with anothe framework.

To preview the next blog, i really want to see how far i can take the SST developer experience, and with AI 🤖 being the flavour of 2023/2024, ill be plugging in this blog to Bedrock just to see what i can do with bit of Serverless and AI.