✦ For everyone, free.

Practical knowledge for real and everyday life

Home

12.1.2.2 Dev Frontend Service

A focused guide to Dev Frontend Service, connecting core concepts with practical Docker and container operations.

A dev frontend service is the containerized frontend application component within a development stack, typically configured to run a framework's own development server with hot module replacement, connected to the backend API through Compose's networking for a fully integrated local development experience.

A Typical Dev-Configured Frontend Service

The frontend service runs its framework's development server, rather than a production build served by a static file server.

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    volumes:
      - ./frontend:/app
    ports:
      - "3000:3000"
    environment:
      - API_URL=http://backend:8080
    command: npm run dev

This runs the framework's own development server (supporting hot module replacement, fast refresh, and similar conveniences), connecting to the backend service by its Compose service name.

Why the Frontend Connects to the Backend Through Compose Networking

Rather than hardcoding localhost or an external address, the frontend's configuration references the backend by its Compose-defined service name, relying on Compose's automatic networking for resolution.

fetch(`${process.env.API_URL}/api/users`)

Since API_URL is set to http://backend:8080, this request correctly reaches the backend service running within the same Compose application.

Why a Development Server Differs From a Production Frontend Build

In production, a frontend application is typically built into static files served efficiently by a dedicated web server, quite different from the development server's behavior, which prioritizes fast rebuild and reload over output optimization.

FROM node:20-alpine AS build
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
Verifying the Frontend Can Successfully Reach the Backend

Confirming a request from the running frontend development server successfully reaches the backend validates this networking configuration.

docker compose logs -f frontend backend
Why a Dev Frontend Service Configuration Matters

Properly configuring the frontend's development server, and its connection to the backend through Compose's networking, provides a fully integrated, fast-iterating local development experience that closely mirrors how the two components will actually interact once deployed.

Related content