The Stack Part 3: Building a Frontend

Not a Medium member? Read the post here for free.

In the last post we set up our deployment, fully automated on merge to our main branch. In this post we will be building our UI (Frontend) applications. See the full overview of posts here.

At the end of this post we will have:

• A Next.js Frontend app with support for localization, using Tailwind CSS.
• A Leptos Rust/WASM Frontend app with support for localization, using Tailwind CSS.
• Automatic deployment of our Apps AWS using CDK, statically hosted using S3 + CloudFront.

We are essentially hedging our bets by building both a JavaScript-based Frontend, which is the safe bet, and a Rust/WASM-based Frontend, which is the future bet. We will be using the same GraphQL API for both, so we can easily switch between them.

There is quite a lot to cover. My recommendation is to clone down the Part 3 branch in the GitHub repository and use this post as an explanation of what is set up.

• Prelude: Static Site Generation
• Next.js
  ◦ Setting up our Next.js App
  ◦ Building Static Files
  ◦ Setting up Localization
• Leptos (Rust/WASM)
  ◦ Setting up our Leptos App
  ◦ Setting up Tailwind CSS
  ◦ Setting up Localization
• Bonus: End-to-End Tests
• Bonus: DevEx Improvements
• Automating Deployments via CDK
  ◦ Building artifacts…