Real Production Ruby on Rails/ReactJS App from scratch (Ep. 6) Kamal Deployment/Github Actions CI/CD
Discord: / discord
Twitch: twitch.tv/awdjob
🚀 Building KlipShow Episode 6: Production Deployment with Kamal + CI/CD Pipeline + Critical Bug Fixes
In this episode, we tackle mysterious WebSocket authentication issues, deploy to production with Kamal on DigitalOcean, and build a complete CI/CD pipeline with GitHub Actions. Plus, we fix critical performance bugs and add validation to prevent duplicate klips!
🎯 What We Built:
✅ Complete staging environment on DigitalOcean ($7/month)
✅ Kamal deployment with automatic SSL certificates via Let's Encrypt
✅ GitHub Actions CI/CD pipeline with automated testing
✅ WebSocket authentication fix using alert tokens instead of cookies
✅ React performance optimization with useCallback hooks
✅ Duplicate klip prevention with custom ActiveRecord validations
✅ Docker multi-service deployment with PostgreSQL and AnyCable
✅ Remote debugging setup for GitHub Actions workflows
✅ Asset compilation pipeline with Vite and Rails
✅ Automated deployment on pull request merge
🛠️ Tech Stack:
Kamal deployment tool from 37signals
DigitalOcean droplets for hosting
GitHub Actions for CI/CD automation
Docker Hub for container registry
Let's Encrypt for SSL certificates
AnyCable with HTTP RPC for WebSockets
PostgreSQL with Docker accessories
React with useCallback for performance
Vite for asset compilation
RSpec with system tests
⭐ Key Highlights:
Paranormal WebSocket issues: cookies don't work across different hosts!
useCallback hook prevents exponential performance degradation
Kamal automatically handles SSL certificates with zero configuration
GitHub Actions secrets bridge to Kamal deployment secrets
Custom validation shows clickable links in error messages
Chrome DevTools remote debugging with OBS browser sources
Rails master key workaround for asset precompilation
Network aliases for Docker container communication
Staging environment live at staging.klipshow.io
Complete CI/CD: test on PR, deploy on merge
This episode takes KlipShow from development to a production-ready staging environment with enterprise deployment practices!
🔴 LIVE DEVELOPMENT: All coding happens live on / awdjob - join for real-time Q&A and influence technical decisions!
Next Episode: Building the client-side interface for viewers and exploring PayPal monetization as an alternative to Twitch Bits!
Timestamps:
00:00 - Intro & Weird Integration Test Issues
02:15 - WebSocket Authentication Problem Discovery
04:30 - Cookie-Based Auth Breaking Across Different Hosts
06:45 - Fixing AnyCable Authentication with Alert Tokens
09:00 - Chrome Dev Tools Remote Debugging with OBS
11:30 - React useCallback Hook Performance Fix
14:15 - Setting Up DigitalOcean Droplet ($7/month)
16:00 - Introduction to Kamal Deployment Tool
18:30 - Configuring deploy.yaml for Kamal
21:00 - Setting Up SSL with Let's Encrypt (Automatic)
23:30 - Docker Registry Configuration
25:45 - PostgreSQL Accessory Setup
28:00 - AnyCable Service Configuration
31:00 - Network Aliases & RPC Communication Fix
34:00 - Vite Asset Compilation Issues & Solutions
37:30 - Rails Master Key Workaround for Asset Precompile
40:00 - First Successful Deployment to Staging
42:15 - SSH Access & Monitoring with Kamal Logs
44:30 - Live Demo - Green Screen Klips Working
46:00 - Bug Fix: Preventing Duplicate Klips
48:30 - Custom Validation with URL Generation
51:00 - GitHub Actions CI Workflow Setup
53:30 - Configuring Test Environment with Services
56:00 - Debugging GitHub Actions with SSH
58:30 - Screenshot Artifacts for Failed Tests
01:00:00 - Deploy Workflow Configuration
01:02:30 - Bridging GitHub Secrets to Kamal
01:05:00 - Final Working CI/CD Pipeline
01:07:00 - Future Plans & Wrap Up
#rails #ruby #javascript #reactjs #webdevelopment #kamal #deployment #docker #githubactions #cicd #digitalocean #anycable #websockets #postgresql #react #vite #devops #softwareengineer #coding #codingtutorial