Art

Posted on Nov 7 • Originally published at blog.dailysandbox.pro on Nov 7

How to Set Up a Vue 3 Frontend, Node.js API, and a High-Performance WebSocket Server in Docker

Let’s face it: modern web development can feel a bit like trying to juggle flaming torches while riding a unicycle. Between setting up your front-end, managing APIs, and ensuring real-time updates through WebSockets, it’s easy to feel overwhelmed. But don’t worry—I’ve got your back. Today, we’re going to put together a powerful, containerized development environment that won’t make you pull your hair out.

We’ll be using Vue 3 for the front-end, Node.js for the API server, and an ultra-fast WebSocket server powered by uWebSockets.js. And the best part? We’ll containerize everything with Docker, so it’s easy to manage, scale, and share with your team (or just keep everything organized if you’re flying solo).

Ready to dive in? Let’s roll!

The Grand Plan

Before we get too deep, here’s a quick overview of what our project will look like:

my-awesome-project/
│
├── frontend/ # Vue 3 app
│
├── api-server/ # Node.js API server
│
└── websocket-server/ # Node.js WebSocket server with uWebSockets.js

Neat, huh? Each piece of our project will live in its own little bubble, thanks to Docker. Let’s start with the front-end.

Step 1: Setting Up Vue 3

1. Getting Started with Vue 3

First up, we’re going to create our Vue 3 app. Open up your terminal, navigate to your project folder, and run:

mkdir frontend && cd frontend
npm init vue@latest

You’ll be asked a few questions about your project setup. Pick the options that work best for you (or just go with the defaults if you’re not feeling picky), and then install the dependencies:

npm install

2. Making Vue 3 Play Nice with Docker

Now, let’s Dockerize this bad boy. In your frontend folder, create a Dockerfile:

# Dockerfile for Vue 3 Frontend
FROM node:18

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 5173
CMD ["npm", "run", "dev"]

Here’s what’s happening: we’re pulling a Node.js image, setting up our working directory, copying over our project files, and telling Docker to start the Vue dev server. Simple, right?

1900+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 _{(updated daily)}

1391+ Free HTML Templates

271+ Free News Articles

49+ Free AI Prompts

210+ Free Code Libraries

37+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

24+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Step 2: Building the Node.js API Server

1. Creating the API Server

Next up, let’s build our Node.js API. Head back to your terminal and create a new folder for the API server:

mkdir api-server && cd api-server
npm init -y

2. Installing Express (Because Who Doesn’t Love Express?)

We’ll be using Express to handle our API routes. Install it with:

npm install express

3. Writing a Simple API

Create a file called index.js in your api-server directory and add this code:

const express = require('express');
const app = express();
const PORT = 3000;

app.get('/api', (req, res) => {
    res.send({ message: 'Hello from the API server!' });
});

app.listen(PORT, () => {
    console.log(`API server running on port ${PORT}`);
});

Boom! We’ve got a basic API server that responds to requests at /api with a friendly message.

4. Dockerizing the API Server

Time to wrap this in Docker. Create a Dockerfile in the api-server folder:

# Dockerfile for Node.js API Server
FROM node:18

WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000
CMD ["node", "index.js"]

Now our API server is ready to run inside its own container. Onward!

Step 3: Setting Up a Blazing-Fast WebSocket Server with uWebSockets.js

1. Setting Up the WebSocket Server

Create a folder for our WebSocket server and set up a new Node.js project:

mkdir websocket-server && cd websocket-server
npm init -y

2. Installing uWebSockets.js (The Speed Demon of WebSockets)

If you need real-time communication, uWebSockets.js is your best friend. Install it like this:

npm install uWebSockets.js

3. Writing the WebSocket Server Code

In the websocket-server directory, create an index.js file:

const uWS = require('uWebSockets.js');

const port = 8080;

uWS.App().ws('/*', {
    open: (ws) => {
        console.log('A new client connected!');
        ws.send('Welcome to the uWebSockets.js server!');
    },
    message: (ws, message, isBinary) => {
        const messageString = Buffer.from(message).toString();
        console.log(`Received: ${messageString}`);
        ws.send(`Hello, you sent -> ${messageString}`, isBinary);
    },
    close: (ws, code, message) => {
        console.log('A client disconnected');
    }
}).listen(port, (token) => {
    if (token) {
        console.log(`WebSocket server running on port ${port}`);
    } else {
        console.error('Failed to start WebSocket server');
    }
});

This code sets up a WebSocket server that handles connections, incoming messages, and disconnections. And yes, it’s as fast as it sounds!

4. Dockerizing the WebSocket Server

Create a Dockerfile in the websocket-server folder:

# Dockerfile for uWebSockets.js Server
FROM node:18

WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 8080
CMD ["node", "index.js"]

We’re almost there—just one more step!

Step 4: Bringing Everything Together with Docker Compose

In the root of my-awesome-project, create a docker-compose.yml file:

version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - "5173:5173"
    volumes:
      - ./frontend:/app
    environment:
      - NODE_ENV=development

  api-server:
    build: ./api-server
    ports:
      - "3000:3000"
    volumes:
      - ./api-server:/usr/src/app
    environment:
      - NODE_ENV=development

  websocket-server:
    build: ./websocket-server
    ports:
      - "8080:8080"
    volumes:
      - ./websocket-server:/usr/src/app
    environment:
      - NODE_ENV=development

Docker Compose ties everything together, so you don’t have to run each service manually.

Step 5: Launching Your Containers

From your project root, run this command:

docker-compose up --build

Docker will build and start your Vue app, API server, and WebSocket server. You can access your Vue app at http://localhost:5173, your API at http://localhost:3000, and your WebSocket server at ws://localhost:8080.

And there you have it! A modern, containerized setup with Vue 3, a Node.js API server, and a lightning-fast WebSocket server using uWebSockets.js. Everything is clean, organized, and ready for serious development work—or just playing around with some cool tech.

Remember, this setup isn’t just for fun; it’s a robust foundation for building real-time apps that scale well. So go ahead, build something amazing!

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!

DEV Community