Build and Deploy a Chat Application That Scales Horizontally with WebSockets and Upstash Redis

Thank you to Upstash for sponsoring this video!

Upstash is a serverless data platform that provides serverless Redis, kafka & QStash.

Who is this video for?

1. Those who are already familiar with JavaScript/TypeScript

Features

1. Send and receive messages
2. Show current connection count

What will you learn?

1. Create realtime communications with WebSockets
2. Use Redis Pub/Sub to communicate across multiple instances
3. Use Redis to stop data (connection count/ messages)
4. Use Docker and docker-compose to containerize the application
5. Docker multi-stage builds
6. Use GitHub actions to automate CI/CD
7. Graceful shutdowns

What are we using?

1. Fastify - Backend
2. Websockets - Realtime
3. Next.js - Frontend
4. Tailwind & Shadcn UI - Styling
5. Redis - Pub/Sub
6. Docker/docker-compose - Containerization
7. GitHub actions - CI/CD
8. DigitalOcean - Host the backend
9. Vercel - Host the frontend

What will you need?

1. Upstash account
2. Node.js
3. Docker & docker-compose
4. An editor - VSCode
5. DigitalOcean account
6. Vercel account
7. Vercel CLI
8. GitHub account

Video structure

1. Build backend
2. Dockerise backend
3. Deploy backend
   1. Create DigitalOcean droplet
   2. Configure droplet
   3. Write github action
4. Build frontend
5. Deploy frontend

Debugging

Websockets

1. Make sure you are using wss:// and not ws:// in production
2. Use debug mode in Caddy server

{
    debug
}

Docker

1. List our running docker containers

docker ps

1. Stop a running container

docker stop <container id>

1. Remove a container

docker rm <container id>

1. List out networks

docker network ls

1. Remove a network

docker network rm <network id>