Deploy Hono & React to Fly.io - Docker, Bun, Vite, TypeScript

Completed code on GitHub: https://github.com/naolson2025/deploy-hono-react-to-fly.io-with-docker-bun In this video, learn how to take a full-stack to-do list app and deploy it to Fly.io using Docker. The app is built with React, Vite, Hono, and Bun, and uses a Postgres database hosted on Neon. Note: This video focuses on the deployment process. Separate videos are available for building the to-do list app and setting up the Neon database. - Neon DB video: https://youtu.be/75Hu6w1NCuY?si=HgKQOLCL6gExU809 - Todo list App video: https://youtu.be/7nMEaj_6x0Q?si=8Pwpixz4PLCqbPzd The video provides a clear, step-by-step guide to the deployment process: - Deployment Plan: Get a quick overview of the entire deployment process. The goal is to bundle all code and dependencies into a single Docker container. - Hono REST API: Learn how to configure the Hono REST API to serve the static front-end files. This allows both the front end (HTML, CSS, and JavaScript files) and the back end (JSON data endpoints) to be served from a single application. - Production Build Script: Discover how to create and test a production build script that compiles both the front-end and back-end code. Using Bun's built-in `bun build` command, you can create an optimized production build that removes unused code and transforms TypeScript into plain JavaScript. - Docker File: See how to write a multi-stage Docker file to containerize the production application code. This file creates a lean final image that includes only the production build, necessary production dependencies, and the Bun runtime. - Deployment to Fly.io: Follow along as the Docker container is deployed to Fly.io. The video demonstrates how to troubleshoot common issues, like missing environment variables and configuration files, to get the app running live on the internet. #hono #honojs #react #reactjs #docker #bunjs #flyio #webdevelopment #fullstacksoftwareengineering #deployment #tutorial #coding #typescript #vitejs Chapters: 0:00 - 0:34 - Intro 0:35 - 1:26 - Tutorial Outline 1:27 - 2:22 - Ch 1 Summary of deployment plan 2:23 - 9:04 - Ch 2 Serve client code from Hono REST API 9:05 - 15:00 - Ch 3 production build script 15:01 - 24:07 - Ch 4.1 Create Dockerfile 24:08 - 27:13 - Ch 4.2 Create .dockerignore 27:14 - 33:50 - Ch 4.3 Build & run Docker image 33:51 - 35:33 - Ch 5.1 Connect GitHub repo to Fly.io 35:34 - 39:22 - Ch 5.2 Config env variables in Fly.io 39:23 - 46:37 - Ch 5.3 Add fly.toml file