Build a server monitoring app with Vue and Node
Tags: vue, tutorials
Published: 2023-02-19 10:58:49

---
title: Build a server monitoring app with Vue and Node
published: true
date: 2023-02-18 05:55:48 UTC
tags: Vue,Tutorials
canonical_url: https://codesource.io/build-a-server-monitoring-app-with-vue-and-node/
---

 ![Build a server monitoring app with Vue and Node](https://codesource.io/content/images/2023/02/server-monitor.png)

In this tutorial, we will learn how to Build a server monitoring app with Vue and node, where we will talk about how we can use [Vue.js, Node.js, Express.js](https://codesource.io/mevn-stack-tutorial-building-a-crud-app-using-mongo-express-vue3-and-nodejs/), and, Socket.io together to create a powerful web application.

### Steps to build a server monitoring app with Vue and node

- Install required packages - **Backend**
- Create the server
- Emit the real-data
- Update the server to emit data periodically
- Install required packages - **Frontend**
- Create the Vue.js App
- Set up the client to communicate with the server
- Create the components
- Create the server
- Run the App

## Step 1 - Set up the backend

We will start by setting up the backend server using _[Node.js](https://codesource.io/create-your-first-web-server-and-learn-basic-routing-in-nodejs/)_ and _Express.js_.

**1.1. Install required packages**

First, create a new directory for our project and navigate into it. Then, initialize a new _Node.js_ project and install the required packages.

```
mkdir server-monitoring-app


cd server-monitoring-app

npm init -y

npm install express socket.io cors
```

- **express** : To set up the web server and define routes.
- **socket.io** : To enable real-time communication between the client and the server.
- **cors** : To enable Cross-Origin Resource Sharing (CORS) for the server.

### 1.2. Create the server

Create a new file called **`server.js`** and add the following code:

```js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');
const os = require('os');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const port = process.env.PORT || 4000;

app.use(cors());

app.get('/', (req, res) => {
	res.send('Server is up and running');
});

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

This code sets up an Express.js app with a basic route and a Socket.io server that listens on the specified port. We have also added a **`CORS`** middleware to the app to allow cross-origin requests.

### 1.3. Emit real-time data

Now, let's create a function that emits real-time data to the client using Socket.io. Add the following code to the **`server.js`** file:

```js
function emitServerData() {
  const cpus = os.cpus();
  const totalMemory = os.totalmem();
  const freeMemory = os.freemem();
  const usedMemory = totalMemory - freeMemory;

  io.emit('serverData', { cpus, totalMemory, usedMemory });
}
```

This function retrieves the CPU usage and memory usage data using the **`os`** module and emits it to the client using the **`io.emit()`** method.

### 1.4. Update the server to emit data periodically

Let's now update the **`server.js`** file to call the **`emitServerData()`** function periodically, so that it emits the server data to the client at regular intervals.

```js
setInterval(() => {
  emitServerData();
}, 1000);
```

This code calls the **`emitServerData()`** function every second using the **`setInterval()`** method.

The full code for the `server.js` file should look something like this:

```js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');
const os = require('os');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const port = process.env.PORT || 4000;

app.use(cors());

app.get('/', (req, res) => {
  res.send('Server is up and running');
});

function emitServerData() {
  const cpus = os.cpus();
  const totalMemory = os.totalmem();
  const freeMemory = os.freemem();
  const usedMemory = totalMemory - freeMemory;

  io.emit('serverData', { cpus, totalMemory, usedMemory });
}

io.on('connection', (socket) => {
  console.log(`Client connected: ${socket.id}`);
  setInterval(emitServerData, 1000);

  socket.on('disconnect', () => {
    console.log(`Client disconnected: ${socket.id}`);
  });
});

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

```

## **Step 2 - Set up the frontend**

Now, we will create the frontend using Vue.js.

### 2.1. Install required packages. 

In the root directory of your project, install the required packages for Vue.js using the following command:

```bash
npm install -g @vue/cli
```

This installs the **`@vue/cli`** package globally, which provides the **`vue`** command-line interface (CLI) for creating and managing

### 2.2. Create the Vue.js app

Use the following command to create a new Vue.js project:

```js
vue create client
```

This command will prompt you to choose a preset. Select the default preset by pressing **`Enter`**.

### 2.3. Set up the client to communicate with the server

Now, we need to set up the client to communicate with the server using `Socket.io`. First, install the **`socket.io-client`** package using the following command:

```js
npm install socket.io client
```

Next, open the **`main.js`** file located in the **`src`** directory and add the following code to create a new instance of the **`socket.io-client`** library and connect to the server:

```js
import { createApp } from 'vue';
import App from './App.vue';
import io from 'socket.io-client';

const socket = io('http://localhost:4000', {transports: ['websocket', 'polling', 'flashsocket']});

socket.on('connect', () => {
    console.log('Connected to server');
  });

createApp(App)
    .mount('#app')
```

This code imports the **`socket.io-client`** library and creates a new instance of it that connects to the server running on **`http://localhost:4000`**.

### 2.4. Create the components

We will now create the components for our Vue.js app. In the **`src/components`** directory, create two new files called **`ServerStatus.vue`** and **`ServerData.vue`**.

### 2.4.1. ServerStatus.vue

Add the following code to the **`ServerStatus.vue`** file:

```js

<template>
  <div class="server-status">
    <h1>Server Status</h1>
    <div v-if="connected" class="status-connected">
      <i class="fas fa-circle"></i>
      <p>Connected</p>
    </div>
    <div v-else class="status-disconnected">
      <i class="fas fa-circle"></i>
      <p>Disconnected</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServerStatus',
  data() {
    return {
      connected: false
    }
  },
  mounted() {
    this.connectToServer();
  },
  methods: {
    connectToServer() {
      this.connected = true;
    }
  }
}
</script>

<style scoped>
.server-status {
  margin-top: 50px;
  text-align: center;
}

.status-connected {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #28a745;
}

.status-disconnected {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc3545;
}
</style>
```

This code defines a **`ServerStatus`** component that displays whether the client is connected or disconnected from the server. It uses the **`socket`** object we created earlier to detect the connection state.

### 2.4.2. ServerData.vue

Add the following code to the **`ServerData.vue`** file:

```js

<template>
    <div class="server-data">
      <h2>Server Data</h2>
      <div class="server-info">
        <div class="cpu-usage">
          <h3>CPU Usage</h3>
          <ul>
            <li v-for="(cpu, index) in cpus" :key="index">{{ index }}: {{ cpu.model }}</li>
          </ul>
        </div>
        <div class="memory-usage">
          <h3>Memory Usage</h3>
          <p>Total Memory: {{ totalMemory }} bytes</p>
          <p>Used Memory: {{ usedMemory }} bytes</p>
          <p>Free Memory: {{ freeMemory }} bytes</p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ServerData',
    props: {
      cpus: Array,
      totalMemory: Number,
      usedMemory: Number
    },
    computed: {
      freeMemory() {
        return this.totalMemory - this.usedMemory;
      }
    }
  };
  </script>
  
  <style scoped>
  .server-data {
    margin-top: 50px;
  }
  
  .server-info {
    display: flex;
    justify-content: space-between;
  }
  
  .cpu-usage {
    flex: 1;
    text-align: left;
  }
  
  .memory-usage {
    flex: 1;
    text-align: right;
  }
  </style>
```

###   
2.5. Create the server

We will now create the server using Node.js and Socket.io. Create a new file called **`server.js`** in the root directory of the project and add the following code:

```js

const os = require('os');
const io = require('socket.io')();

const PORT = 4000;

function collectServerData() {
  const cpus = os.cpus();
  const totalMemory = os.totalmem();
  const freeMemory = os.freemem();
  const usedMemory = totalMemory - freeMemory;

  return {
    cpus,
    totalMemory,
    usedMemory
  };
}

io.on('connection', (socket) => {
  console.log('Client connected');

  const interval = setInterval(() => {
    const serverData = collectServerData();
    socket.emit('serverData', serverData);
  }, 1000);

  socket.on('disconnect', () => {
    clearInterval(interval);
    console.log('Client disconnected');
  });
});

io.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});
```

This code imports the **`os`** module to collect data about the server and the **`socket.io`** library to handle real-time communication with the client. It defines a function called **`collectServerData()`** that collects data about the server's CPUs and memory usage.It then creates a new **`socket.io`** instance and listens for connections on port 4000. When a client connects, it starts sending server data to the client every second using a **`setInterval()`** function. When the client disconnects, the interval is cleared.

### 2.6. Update the App.vue file

We will now update the **`App.vue`** file to use the components we created earlier. Add the following code to the file:

```js

<template>
  <div id="app">
    <ServerStatus />
    <ServerData />
  </div>
</template>

<script>
import ServerStatus from './components/ServerStatus.vue';
import ServerData from './components/ServerData.vue';

export default {
  name: 'App',
  components: {
    ServerStatus,
    ServerData
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
```

This code imports the **`ServerStatus`** and **`ServerData`** components we created earlier and adds them to the **`App`** component.

### 2.7. Run the app

To run the app, open two terminals. In one terminal, navigate to the root directory of the project and run the following command to start the server:

```
node server.js
```

![Build a server monitoring app with Vue and Node](https://codesource.io/content/images/2023/02/Screenshot-2023-02-17-132441-1.png)

In the other terminal, navigate to the **client** directory and run the following command to start the Vue.js app:

```js
npm run serve
```

This will start the Vue.js app and open it in your default web browser.

###   
2.8. Test the app

![Build a server monitoring app with Vue and Node](https://codesource.io/content/images/2023/02/image-1.png)

If everything worked correctly, you should see the following on the Vue.js app:

- A **`Server Status`** component that displays whether the client is connected or disconnected from the server.
- A **`Server Data`** component that displays information about the server's CPUs and memory usage.

If you open the browser console, you should see log messages indicating that the client has connected and disconnected from the server. Congratulations! You have created a server monitoring app using Vue.js and Node.js!

The full Code source is on [GitHub](https://github.com/Ebiperre/server-monitoring-app) so you can check it out there.