Docker Container Web App

A showcase project demonstrating how to build and deploy a web application as a Docker container, with both the web app and database running in the same container.

Technologies Used

• Bun: JavaScript/TypeScript runtime and package manager
• Hono: Lightweight, fast web framework with SSR capabilities
• PostgreSQL 17: Powerful, open-source object-relational database
• Docker: Containerization platform for easy deployment

Features

• Server-Side Rendering (SSR) with Hono JSX
• Todo list application with create, read, update, and delete functionality
• PostgreSQL database for persistent data storage
• Single container deployment with both web app and database
• Modern, responsive UI with clean design

Project Structure

├── db/                  # Database scripts
│   └── init.ts          # Database initialization script
├── public/              # Static assets
│   ├── app.js           # Client-side JavaScript
│   └── styles.css       # CSS styles
├── src/                 # Application source code
│   ├── components/      # UI components
│   ├── routes/          # Route handlers
│   ├── renderer.ts      # SSR renderer middleware
│   └── index.ts         # Main application entry point
├── Dockerfile           # Docker container definition
├── docker-compose.yml   # Docker Compose configuration
├── package.json         # Project dependencies
└── tsconfig.json        # TypeScript configuration

Prerequisites

• Docker Desktop installed and running
• Basic knowledge of Docker and web development

Getting Started

Building and Running the Container

1. Clone this repository:

   git clone <repository-url>
   cd docker-container-web-app
   

2. Build and start the container using Docker Compose:

   docker-compose up --build
   

3. Access the application in your browser at:

   http://localhost:3000
   

Development Without Docker

If you want to develop without Docker, you'll need:

• Bun installed locally
• PostgreSQL 17 installed and running

1. Install dependencies:

   bun install
   

2. Configure the environment variables:

   export DB_HOST=localhost
   export DB_PORT=5432
   export DB_USER=<your-postgres-user>
   export DB_PASSWORD=<your-postgres-password>
   export DB_NAME=dockerapp
   

3. Initialize the database:

   bun run initdb
   

4. Start the development server:

   bun run dev
   

Stopping the Container

docker-compose down

To remove the persistent volume as well:

docker-compose down -v

What You'll Learn

• How to create a Bun + Hono web application with SSR
• How to set up and initialize a PostgreSQL database
• How to containerize both a web app and database in a single Docker container
• How to persist data using Docker volumes
• How to deploy using Docker Compose