All Collections
VPS OS and Templates
How to Use the MEVN Stack VPS Template
How to Use the MEVN Stack VPS Template

Getting started with the MEVN Stack VPS template at Hostinger

Updated over a week ago

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

At Hostinger, we offer the Ubuntu 22.04 VPS template with MEVN 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-app
cd 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 a dist 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.

Did this answer your question?