How To Set Up A Local Development Environment With Docker

In modern software development, having an efficient and replicable local development environment is crucial for productivity. Docker is the perfect tool to achieve this, allowing developers to easily manage multi-container environments. In this article, we will guide you through creating a development environment using PostgreSQL 15, Next.js 13, and a WebSocket server, all managed with Docker Compose.

_Why use Docker?

Docker allows you to run applications in isolated environments called containers, which include everything necessary for execution: from the code and libraries to environment variables. This ensures that your local development environment is identical to production, eliminating issues related to configuration differences across systems.

Main advantages:

• Consistency: Same environment across all machines.
• Isolation: No dependency conflicts between projects.
• Scalability: Easily manage microservices and complex applications.

1. Setting up the development environment with Docker Compose

We will use Docker Compose to orchestrate an environment that includes PostgreSQL for the database, Next.js for the front end, and a WebSocket server for real-time communication.

Creating the docker-compose.yml file

The docker-compose.yml file is the core of our configuration. It defines the services for the database, front-end, and WebSocket server. Below is the updated configuration using PostgreSQL 15 and Next.js 13.

version: '3.8'

services:
  db:
    image: postgres:15
    container_name: postgres_db
    environment:
      POSTGRES_USER: example_user
      POSTGRES_PASSWORD: example_pass
      POSTGRES_DB: example_db
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - "5432:5432"
      
  nextjs:
    image: node:18
    container_name: nextjs_app
    volumes:
      - .:/app
    working_dir: /app
    command: sh -c "npm install && npm run dev"
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      DATABASE_URL: postgres://example_user:example_pass@db:5432/example_db

  websocket:
    build: .
    command: node websocket-server.js
    ports:
      - "8080:8080"

volumes:
  pgdata:

File explanation:

• The db service uses PostgreSQL 15, the latest stable version. Database credentials are configured through environment variables.
• The nextjs service is based on Node.js 18 and mounts the local source code into the /app directory inside the container. It uses Next.js 13, which includes new features like nested layouts and server-side rendering improvements.
• The websocket service is a simple Node.js server that uses WebSockets to handle real-time communication.

2. Creating the WebSocket server

A key element of modern applications is real-time communication, often managed via WebSockets. Let’s see how to set up a WebSocket server to communicate with the front end.

Setting up the WebSocket server:

1. Create the websocket-server.js file in the project directory:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('New client connected');

  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
    ws.send('Response from WebSocket server');
  });

  ws.send('Welcome to the WebSocket server!');
});

2. Update the Dockerfile for the WebSocket service:

If your project doesn’t have a Dockerfile, add one for the WebSocket server:

FROM node:18

WORKDIR /app

COPY . .

RUN npm install

CMD ["node", "websocket-server.js"]

This configuration launches a simple WebSocket server that responds to each message sent by a client.

3. Configuring Next.js to use WebSockets

After setting up the WebSocket server, we can connect the Next.js client to communicate with it.

1. Add WebSocket connection in a Next.js page:Open a page file in Next.js (e.g., pages/index.js) and add the following code to connect to the WebSocket server:

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');
    
    ws.onopen = () => {
      console.log('Connected to WebSocket server');
      ws.send('Hello, server!');
    };

    ws.onmessage = (event) => {
      console.log('Message from server:', event.data);
    };

    return () => ws.close();
  }, []);

  return <div>Welcome to the WebSocket system with Next.js!</div>;
}

This example establishes a WebSocket connection to the server on port 8080 and handles receiving messages from the server.

4. Running the development environment

Once all the necessary files are configured, you can start the development environment with Docker using the following command:

docker-compose up

This command will start all the containers defined in the docker-compose.yml file. After starting:

• The Next.js app will be accessible at http://localhost:3000.
• The WebSocket server will be listening at ws://localhost:8080.
• PostgreSQL will be running on the default port 5432.

_Conclusion

With Docker and Docker Compose, creating a local development environment with complex services like a database, a Next.js app, and a WebSocket server is a simple and scalable process. The updated versions of PostgreSQL 15 and Next.js 13 provide advanced features that improve efficiency and productivity.

Docker ensures consistency between development and production environments, minimizing compatibility issues and speeding up the development process. If you need help setting up or optimizing your development environment, Fyonda is here to offer tailor-made solutions.

We look forward to hearing from you!