How to Use the MEVN Stack VPS Template

The MEVN stack is a collection of JavaScript-based technologies used for building web applications. It consists of four main components:
MongoDB, a flexible NoSQL database

Express.js, a web application framework for Node.js

Vue.js, a progressive JavaScript framework for building user interfaces

Node.js, a JavaScript runtime for server-side execution

We offer the Ubuntu 22.04 VPS templatewithMEVN stack pre-installed. Once you install this template on your server, follow the steps below.

Step 1 — Set Up Your Project

Open your terminal and create a new directory for your MEVN stack project:

mkdir mevn-stack-appcd mevn-stack-app

Step 2 — Set Up the Backend With Express.js and Node.js

Initialize a Node.js project. Run the following command to initialize a package.json file:

npm init -y

Create a basic Express server. Create a file named server.js and set up a basic Express server:

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

app.get('/', (req, res) => {
 res.send('Hello MEVN Stack!');
});

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

Now, start your Express server by using this command:

node server.js

Step 3 — Set Up Frontend With Vue.js

Inside your project directory, run the following command to generate a new Vue app:

vue create vue-app

Follow the prompts to configure your app. After that, go to the Vue app directory:

cd vue-app

And start the Vue development server:

npm run serve

Step 4 — Connect Express.js and Vue.js

Update your Express server (server.js) to serve the Vue app:

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

// Serve Vue app
app.use(express.static(path.join(__dirname, 'vue-app/dist')));

// Handle all other routes
app.get('*', (req, res) => {
 res.sendFile(path.join(__dirname, 'vue-app/dist/index.html'));
});

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

Build your Vue app for production:

npm run build

This will create adist folder inside the Vue app directory.

Step 5 — Run Your MEVN Stack App

Finally, go back to the root project directory and run your updated Express server:

node server.js

Finally, visit http://your_vps_ip:3000 to see your MEVN stack app with Vue. Make sure to replace your_vps_ip with the actual IP address of your server?
Congratulations! You’ve set up a basic MEVN stack application. From here, you can expand and enhance your application by adding database functionality using MongoDB and integrating additional features with Express.js and Vue.js.