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.