Introduction
Modern web development is an exciting challenge, with a myriad of languages, runtimes, and AWS services to conquer. Dive into this interactive workshop, where we’ll explore cutting-edge frontend and backend development, all while staying firmly in the TypeScript world.
Highlights:
- Create modern TypeScript web apps with React, Vite, and Next.JS.
- Master TypeScript CI/CD with SST and AWS CDK.
- Deploy a fullstack application to AWS complete with; Next.js frontend, Node.JS apis, cognito login, S3 upload/download and TypeScript IAC.
- Ensure type safety from backend to frontend through the capabilities of tRPC.
- Get a glimpse of the future with Deno and Bun.
Join us for an action-packed TypeScript adventure! 🚀🌟
Target Audience
Are you interested in web development with TypeScript? Maybe you already know some React but want to level up to deploying and running fullstack web applications to AWS. This web series is for you!
Links
- Web Series (YouTube private link, email me for access)
- Meetup This web series is based off a workshop delivered in Ho Chi Minh, October 2023.
- Slides
- Code
Course Outline
1 - Welcome
Welcome to my web series “TypeScript Journey” a journey into Modern Web Development, CI/CD and AWS Magic!
2 - Demo Intro & Prerequisites
A look at what we will be building in this web series and prerequisites to get started.
3 - Intro TS Mono-Repo
Introduction to a modern TypeScript Mono-Repository using; Turborepo, yarn workspaces, Eslint, CDK, SST.
4 - Add and deploy Vite React App
Creating a Vite React App in a TypeScript Mono-Repo deploying to AWS using Cloud Development Kit (SST).
5 - Add Next JS App
Creating a Next JS App in a TypeScript Mono-Repo using Create T3 App.
6 - Add Next Auth (Cognito)
Deploying Cognito Userpool to AWS using Cloud Development Kit (SST) and configuring sign in with Next Auth.
7 - Deploy Next App to AWS
Deploying Next App to AWS using Open Next. Next App runs serverless on AWS lambda which is a very cheap way to deploy a Next App. We also configure AWS Cognito to accept signin redirect requests from the deployed site. And this highlights the issue of dependency cycles that can occur in IAC.
8 - Why I Like this Stack
An overview of some of the advantages of using this stack. Cheap run costs due to serverless architecture, bleeding edge features, fine grained access control through NextAuth and tRPC and Type Safe APIs.
9 - Fix tRPC Mutations
Open Next does not support streaming tPRC mutations out of the box. This short video shows a fix.
10 - Upload Download Demo
Implementing upload/download functionality to the Next app. Adding an S3 bucket to SST app, importing the bucket into Next App and creating an api to generate pre-signed urls. In this demo, bucket name is defined in a common package and imported into SST app and Next app.
11 - Using SST Bind and Summary
Using SST bind to refactor the approach from the previous video. In this demo, bucket name is defined in SST app and then SST bind is run in Next app to generate types and the bucket name to use. Finally a summary of what we have built.