DEV Community: Dmitry Bikishov

New modern stack for fullstack apps

Dmitry Bikishov — Sat, 08 Nov 2025 18:42:41 +0000

🚀 Full Stack Reimagined: Why Bun, Elysia, Drizzle, and Vue 3 is the Modern Dev Dream

In the fast-moving world of full-stack development, we're constantly searching for the sweet spot: maximum speed paired with bulletproof type safety and an amazing developer experience (DX). If you've felt like you have to sacrifice one for the other, I've got good news.

Meet the new dream team: Bun, Elysia, Drizzle ORM, and Vue 3. This isn't just a collection of cool tools—it's a cohesive, modern stack designed to make building scalable, type-safe web applications genuinely fun and incredibly fast.

⚡ Backend: Blazing Fast and Type-Safe APIs

Our backend stack is built for performance and reliability, all powered by TypeScript.

Bun: More Than Just a Runtime

Forget Node.js for a minute. Bun is an all-in-one JavaScript and TypeScript runtime that's designed to be fast—like, mind-blowingly fast.

Speed is Native: Bun uses the JavaScriptCore engine (instead of V8), giving it a huge head start in startup and execution speed.
Built-in Tooling: It's not just a runtime; it's a bundler, a test runner, and a package manager that's significantly quicker than npm or yarn. This simplifies your toolchain immensely.
TypeScript, Out of the Box: No more fumbling with ts-node or complex setups. Bun runs .ts files natively.

Elysia: The Bun-First Framework

What happens when you pair the fastest runtime with a framework built specifically for it? You get Elysia.js.

Ultra-Performance: Elysia is engineered to be one of the fastest Node.js/Bun web frameworks, leveraging Bun's speed for minimal overhead.
End-to-End Type Safety (Like tRPC, but Better): This is the killer feature. Elysia, especially when using its OpenAPI generation and client tooling (like Eden), lets you generate a client for your Vue 3 frontend that ensures your API calls are type-checked from server to client. You modify a route on the backend, and your frontend instantly knows. No more runtime surprises!
"Just a Function" Ergonomics: Defining routes, middleware, and plugins is incredibly clean and intuitive, often feeling like you're just writing simple functions.

Drizzle ORM: The Modern SQL King

We're moving beyond traditional, heavy ORMs and embracing the power of modern SQL. Drizzle ORM is a game-changer here.

Closer to SQL: Drizzle focuses on being a lightweight, performant wrapper that keeps you close to the SQL you know and love. When you need to, you can drop into raw SQL seamlessly.
Type-Safe Queries: This is where Drizzle shines. Your database schema is defined in code, and Drizzle uses that to ensure your queries are correct at compile time. Say goodbye to typos in column names or mismatched types—TypeScript catches it all before you even run the server.
Easy Migrations: With Drizzle Kit, managing database migrations and pushing schema changes (bun db:push or bun db:migrate) is a simple, command-line operation that stays in sync with your type-safe schema.

✨ Frontend: Vue 3, Pinia, and TailwindCSS

On the client side, we focus on a highly reactive, well-structured, and beautiful UI.

Vue 3 with Composition API: Vue 3 gives us a modern, performant, and flexible reactive system. The Composition API provides a fantastic way to organize and reuse logic, especially when working with TypeScript.
Pinia for State Management: Pinia is the de-facto standard for Vue state management. It’s lightweight, modular, and—you guessed it—comes with excellent TypeScript support right out of the box, making state predictable and easy to manage.
TailwindCSS: For styling, we use the utility-first CSS framework that makes building complex, responsive UIs a breeze without ever leaving your component files.

🤝 The Synergy: Why This Stack Wins

The true power of this stack is in its synergy. It's built for consistency and velocity:

Unified TypeScript: You are writing TypeScript on the backend, in the ORM, and on the frontend. This reduces context switching and maximizes developer productivity.
End-to-End Type Safety: The Elysia/Drizzle ORM combination on the backend and the generated client on the frontend means your data flows from the PostgreSQL database, through your API, and into your Vue components all with type validation.
Fast Feedback Loop: Bun's hot-reload and fast runtime, combined with Vue's reactivity and Vite's build speed (used under the hood for Vue development), means you see your changes almost instantly.

This is a stack that is all about speed—development speed and application performance.

If you're looking to build your next scalable, modern, and high-performance full-stack application, stop looking back at older, slower stacks. Dive into this combination of Bun, Elysia, Drizzle, and Vue 3. Your developer experience—and your users—will thank you.

Ready to go template: https://github.com/isbik/vue-bue-elysia-template

Ultimate Guide to Setting Up Bun Workspaces with Docker

Dmitry Bikishov — Fri, 11 Apr 2025 07:32:48 +0000

Introduction

Setting up a monorepo architecture with proper tooling can significantly improve your development workflow. Bun, the all-in-one JavaScript runtime and toolkit, offers excellent workspace support that simplifies managing multiple interconnected packages. This guide walks you through creating a Bun workspace and containerizing it with Docker — perfect for modern full-stack applications.

What You'll Learn

How to structure a Bun workspace with shared packages
Configuring TypeScript for cross-package imports
Containerizing your application with Docker
Setting up a complete development environment

Project Structure

Let's start with the folder structure we'll be creating:

├── apps/
│   ├── client/          # Frontend application
│   └── server/          # Backend application
├── infra/
│   ├── docker/          # Docker images
│   │   ├── client.Dockerfile 
│   │   └── server.Dockerfile
├── packages/
│   └── shared/          # Shared code between apps
├── docker-compose.yml 
└── package.json

This structure follows the monorepo pattern where:

apps contains your applications (client and server)
packages contains shared libraries used across applications
infra holds infrastructure-related files like Dockerfiles

Step 1: Initialize the Main Project

First, let's initialize our root project:

bun init -y

Then modify your package.json to configure workspaces:

{
  "name": "workspace",
  "private": true,
  "workspaces": [
    "packages/*",
    "apps/*"
  ],
  "type": "module",
  "devDependencies": {
    "@types/bun": "latest"
  }
}

The workspaces field tells Bun to treat subdirectories in packages and apps as separate packages within our monorepo.

Step 2: Set Up the Shared Package

Create a shared package that will contain code used by both frontend and backend:

mkdir -p packages/shared
cd packages/shared
bun init -y

Update the packages/shared/package.json:

{
  "name": "@packages/shared",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/index.js",
  "scripts": {
    "build": "bun build ./src/index.ts --outdir ./dist --target node"
  }
}

Create a basic source file:

mkdir -p packages/shared/src
echo 'export const greet = (name: string) => `Hello, ${name}!`;' > packages/shared/src/index.ts

Step 3: Set Up the Applications

Backend Application

Set up the server application:

mkdir -p apps/server/src
cd apps/server
bun init -y

Update apps/server/package.json to include the shared package:

{
  "name": "@apps/server",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "@packages/shared": "workspace:*"
  },
  "scripts": {
    "dev": "bun run --watch src/index.ts",
    "start": "bun run src/index.ts"
  }
}

Create a tsconfig.json in the server directory:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "paths": {
      "@packages/shared": [
        "../../packages/shared/src"
      ]
    }
  }
}

Create a simple server:

// apps/server/src/index.ts
import { greet } from '@packages/shared';
import { serve } from 'bun';

const server = serve({
  port: 3000,
  fetch(req) {
    const url = new URL(req.url);

    if (url.pathname === '/health') {
      return new Response('OK');
    }

    if (url.pathname === '/') {
      return new Response(greet('from the server'));
    }

    return new Response('Not Found', { status: 404 });
  },
});

console.log(`Server running at http://localhost:${server.port}`);

Frontend Application

Set up the client application similarly:

mkdir -p apps/client/src
cd apps/client
bun init -y

Update apps/client/package.json:

{
  "name": "@apps/client",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "@packages/shared": "workspace:*"
  },
  "scripts": {
    "dev": "bun run --watch src/index.ts",
    "start": "bun run src/index.ts"
  }
}

Create a tsconfig.json in the client directory:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "paths": {
      "@packages/shared": [
        "../../packages/shared/src"
      ]
    }
  }
}

Step 4: Dockerize Your Applications

Server Dockerfile

Create infra/docker/server.Dockerfile:

FROM oven/bun:1-slim

WORKDIR /app

# Copy only package files first
COPY package.json bun.lockb ./
COPY packages/shared/package.json ./packages/shared/
COPY apps/server/package.json ./apps/server/

# Install dependencies
RUN bun install --filter '@apps/server'

# Copy source files
COPY apps/server ./apps/server
COPY packages/shared ./packages/shared

# Build shared package
RUN cd packages/shared && bun run build

EXPOSE 3000

ENTRYPOINT ["bun", "run", "apps/server/src/index.ts"]

Step 5: Create Docker Compose File

Create docker-compose.yml in the root directory:

version: '3.8'

services:
  ...
  server:
    build:
      context: .
      dockerfile: infra/docker/server.Dockerfile
    ports:
      - "3000:3000"
    env_file:
      - apps/server/.env
    restart: unless-stopped
    healthcheck:
      test:
        [
          "CMD",
          "wget",
          "--no-verbose",
          "--tries=1",
          "--spider",
          "http://localhost:3000/health",
        ]
      interval: 30s
      timeout: 10s
      retries: 3

Step 6: Install Dependencies and Run

From the root directory, install all dependencies:

bun install

You can now start everything with Docker Compose:

docker-compose up -d

Or run individual components in development mode:

# Run the server
cd apps/server
bun run dev

# Run the client
cd apps/client
bun run dev

Benefits of This Setup

Code Sharing: The shared package can contain utilities, types, constants, and business logic used by both frontend and backend.
Type Safety: TypeScript configuration ensures type safety across packages.
Development Experience: Changes in shared packages are immediately available to dependent applications.
Production Ready: Docker images are optimized for production deployment.
Scalability: This structure makes it easy to add more applications or packages as your project grows.

Conclusion

You now have a fully functional Bun workspace setup with Docker integration. This architecture promotes code sharing, provides excellent developer experience, and simplifies deployment.

For a complete working example with React frontend and a Bun backend with Prisma, visit the bun-workspaces-docker GitHub repository.

Happy coding with Bun!