MEVN Stack - Setting up MongoDB, Express and VueJS

MEVN Stack

This stack consists of the following elements:

  • MongoDB
  • ExpressJS
  • VueJS
  • NodeJS


  • Setup front-end with VueJS
  • Setup back-end with ExpressJS
  • Setup the connection between the front-end and back-end using Axios
  • Setup the connection between ExpressJS and MongoDB


Install the last version of node and npm.

jitsejan@dev:~/code$ curl -sL | sudo -E bash -
jitsejan@dev:~/code$ sudo apt-get install -y nodejs
jitsejan@dev:~/code$ node --version
jitsejan@dev:~/code$ npm --version


Create the folder for the application and move inside it.

jitsejan@dev:~/code$ mkdir mongo-express-vue-node && cd $_


Install the Vue CLI to easily create the scaffold for a Vue application.

jitsejan@dev:~/code$ sudo npm install -g vue-cli
jitsejan@dev:~/code$ vue --version

Use the webpack template to create a Vue app with a webpack boilerplate.

jitsejan@dev:~/code/mongo-express-vue-node$ vue init webpack client

? Project name client
? Project description MEVN - Vue.js client
? Author Jitse-Jan <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests Yes
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes

   vue-cli ยท Generated "client".

   To get started:

     cd client
     npm install
     npm run dev

   Documentation can be found at

jitsejan@dev:~/code/mongo-express-vue-node$ cd client
jitsejan@dev:~/code/mongo-express-vue-node/client$ npm install

To make the app accessible from the VPS, first change the host for the webpack-dev-server in client/package.jsonfrom

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/",


"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/ --host",

and make sure the disableHostCheck is set to true in client/build/

devServer: {
    disableHostCheck: true

We can now start the application by running the following command:

jitsejan@dev:~/code/mongo-express-vue-node/client$ npm run dev

and use curl to check the page:

jitsejan@dev:~/code/mongo-express-vue-node/client$ curl
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   322  100   322    0     0   1477      0 --:--:-- --:--:-- --:--:--  1586<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>

which is indeed the content of the index.html of the client application.


As a back-end we will use ExpressJS to connect the front-end to the data and deal with all server related functionality. To (again) not setup all the files by ourselves, but use a generator to create the scaffold, I will use the Express generator.

Create boilerplate

jitsejan@dev:~/code/mongo-express-vue-node$ sudo npm install express-generator -g
jitsejan@dev:~/code/mongo-express-vue-node$ express --version

Using the generator, we can create the boilerplate for the server, with a .gitignore by using --git and with ejs support by setting the view argument.

jitsejan@dev:~/code/mongo-express-vue-node$ express --git --view ejs server

   create : server
   create : server/package.json
   create : server/app.js
   create : server/.gitignore
   create : server/public
   create : server/routes
   create : server/routes/index.js
   create : server/routes/users.js
   create : server/views
   create : server/views/index.ejs
   create : server/views/error.ejs
   create : server/bin
   create : server/bin/www
   create : server/public/javascripts
   create : server/public/images
   create : server/public/stylesheets
   create : server/public/stylesheets/style.css

   install dependencies:
     $ cd server && npm install

   run the app:
     $ DEBUG=server:* npm start

Lets navigate inside the server folder, install the packages and start the server.

jitsejan@dev:~/code/mongo-express-vue-node$ cd server/
jitsejan@dev:~/code/mongo-express-vue-node/server$ npm install
jitsejan@dev:~/code/mongo-express-vue-node/server$ DEBUG=server:* npm start

> [email protected] start /home/jitsejan/code/mongo-express-vue-node/server
> node ./bin/www

  server:server Listening on port 3000 +0ms

Using curl we can retrieve the content of the application by requesting the server on port 3000.

jitsejan@dev:~/code/mongo-express-vue-node$ curl
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   207  100   207    0     0    880      0 --:--:-- --:--:-- --:--:--   945<!DOCTYPE html>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <p>Welcome to Express</p>

Setup API route

Add a new route to server/app.js and add some fake data to be returned:

 app.get('/characters', (req, res) => {
      'characters': [
          name: "Mario",
          color: "red"
          name: "Luigi",
          color: "green"

Start the server to test the new route by running the following command:

jitsejan@dev:~/code/mongo-express-vue-node/server$ DEBUG=server:* npm start

which will result in the curl response as shown below using jq for a nicer layout.

jitsejan@dev:~$ curl | jq '.'
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    65  100    65    0     0   1029      0 --:--:-- --:--:-- --:--:--  1031
"characters": [
    "name": "Mario",
    "color": "red"
    "name": "Luigi",
    "color": "green"

Connect client and server

Finally, we need to connect the VueJS front with the ExpressJS back-end. To do this, we will use axios at the client-side to talk to the API from the server-side. First install axios for the client:

jitsejan@dev:~/code/mongo-express-vue-node/client$ npm install --save axios

Setup characters component

Create a new Vue component to show the characters from the API. Add the content to client/src/components/Characters.vue:

  <div class="characters">
    This file will list all the characters.
    <div v-for="character in characters" :key="">
            <span><b>{{ }}</b></span><br />
            <span>{{ character.color }}</span><br/>

import CharactersService from '@/services/CharactersService'
export default {
  name: 'Characters',
  data () {
    return {
      characters: []
  mounted () {
  methods: {
    async getCharacters () {
      const response = await CharactersService.fetchCharacters()
      this.characters =

with client/src/services/CharactersService.js contains

import api from '@/services/api'

export default {
  fetchCharacters () {
    return api().get('characters')

and client/src/services/api.js contains

import axios from 'axios'

export default() => {
  return axios.create({
    baseURL: `http://localhost:3000`

Add a route to client/src/router/index.js for the characters view by adding the import of the component and defining the route parameters.

import Characters from '@/components/Characters'

      path: '/characters',
      name: 'Characters',
      component: Characters

Extend main application

To visit the available routes, add the router-links to the main application. Change the template in client/src/App.vue:

  <div id="app">
    <router-link :to="{ name: 'Home' }">Home</router-link>
    <router-link :to="{ name: 'Characters'}">Characters</router-link>

Main page:

Character page:

For the most code, check the Github repo.