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?
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
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 uNetworking/uWebSockets.js#v20.49.0
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.
I have setup a repo for this boilerplate - https://github.com/dailysandbox/bp-node-nuxt3
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!
Comments ()