Creating Scalable Applications using Vue JS MongoDB, Node JS & Express JS: Easy Steps

When it comes to full-stack development, you may have heard of several acronyms for stack names, MERN, MEAN, etc. The acronyms generally refer to the solutions used for the database, the API interface, the frontend, and the backend. MERN, for example, stands for MongoDB (database), Express (API interface), React.js (frontend), and Node.js (backend). In the MEAN stack, the frontend language changes to Angular.js. In this article, we will discuss the MEVN stack, where the frontend language changes to Vue.js.

In this article, we will consider an example project based on the MEVN stack, and walk through the various components to understand the application.

What is Vue.js?

Vue.js is younger compared to React and Angular and is not backed by any big company (Angular is backed by Google, and React by Facebook). It is developed by the contribution of the open-source community and is generally considered easier to learn compared to React and Angular.

It is a Model-View-ViewModel framework, and the use of HTML templates is considered to be an advantage in terms of getting started for novices. It is more suitable for smaller apps with lesser complexity, and a great language to get started with if you are starting from scratch.

Prerequisites

In terms of knowledge, it is assumed that you are familiar with javascript, and have experience working on frontend and/or backend applications. Working knowledge of MongoDB (or any other NoSQL database) is also assumed. Familiarity with git is also assumed.

In terms of installations and setup, you will need the following:

1. Vue CLI
2. Node.js
3. A database on Vue JS MongoDB (you can create a free account if you don’t already have one)

If you are on a Windows machine, having Git Bash to run shell commands will help.

The Process to Setup Scalable Applications using Vue JS MongoDB, Node JS & Express

Instead of reinventing the wheel, we will look at an existing MEVN stack application and walk through its various files to understand the structure and the code. The repo can be found on GitHub here. Clone it into your local machine, and follow the installation steps. Specifically, you can either run

npm run setup

Or, if the setup fails, run the individual setup commands for the server and the client.

npm ci
npm ci -prefix client/

Next, you should copy the .env.example file to .env file

cp .env.example .env

Once copied, open the .env file and enter the URL of the Vue js MongoDB database in the Vue JS MONGO_URI field and enter a server port (default 3000 if left blank)

MONGO_URI=mongodb+srv://username:password@cluster0.6uamv.mongodb.net/database_name?retryWrites=true&w=majority

Once the setup is done, open a terminal window and navigate to the directory containing the cloned repository, and run

npm run dev:server

This will run our backend server comprising of node, express, and Vue js MongoDB. 

Open another terminal window, and navigate to the same directory, and run

npm run dev:client

This will run our frontend server and serve the web pages created using the Vue js MongoDB.

Note that if you keep getting the error  Delete `␍`  prettier/prettier error while running this command, consider adding the following in client/.prettierc object (see this)

"endOfLine":"auto"

Once your server and client are both up and running, you can go on to localhost:8080/client to see your application in action. You can go to the Users tab, and add, modify or delete users, and see the corresponding APIs being called on the server-side.

You can also go to your Vue js MongoDB console or UI and confirm that the entries are being created and modified as per your actions.

Now that our application works, let’s walk through the project files and understand both the structure and the code at a broad level.

Project Structure and Code Walkthrough for Using Vue JS MongoDB, Node JS & Express

If you look at the file structure, you will see that the root directory contains the files for the server-side, and the client directory contains the files for the frontend.

Server

For the server, the application code can be found in the src directory. 

Essentially, 

• The controllers directory contains the functions (users.js) that get executed when the APIs are called
• The database directory contains the model (models/user.js) of the database item and the code required for establishing the connection with the database (connection.js) using Vue JS MongoDB
• The middleware directory contains the code for enabling cors (cors.js)
• The routes directory maps (users.js) the API routes with the corresponding functions in the controller directory.
• Finally, the index.js file is the one that is run when you type npm run dev:server in the terminal. This file brings in components from all of the above directories, puts them all together in an application, and listens for incoming API requests.

If we look at the index.js file, we can see that it first imports the relevant packages (you can find the list in package.json) and files from other directories.

require('dotenv').config()
const path = require('path')
const express = require('express')
const morgan = require('morgan')
const { establishDbConnection } = require('./database/connection')
const { cors } = require('./middleware/cors')
const { apiRoutes } = require('./routes/index')
const trunks = require('trunks-log')

Next, the logger is initialized using the namespace ‘MAIN’, and the port is defined. Finally, the app is created using the express framework.

const log = new trunks('MAIN')

const port = process.env.SERVER_PORT || 3000

const app = express()

Next, the DB connection is established with Vue js MongoDB. Then, the app is set up to enable CORS, log HTTP requests using Morgan, and parse JSON request bodies. We also configure the app to forward any request on the /api path to the routes defined in the routes defined.

// Establish Connection to MongoDB
establishDbConnection()

// Turn on CORS Middleware
app.use(cors)

// Mount logging middleware
app.use(morgan(process.env.MORGAN_LOG_TEMPLATE || 'tiny'))

// Start Parsing request bodies as json
app.use(express.json())

// Register our API Routes
app.use('/api', apiRoutes)

Finally, the app starts listening on the port defined earlier.

// Spin up the Application
app.listen(port, () => {
  log.info(`Server Running on port ${port}`)
})

The app is now ready to serve requests.

Client

The overall frontend, especially the ‘Employed Technologies’ section on the Home Screen provides valuable information related to the entire project, do check it out.

The client’s application code can be found in the src directory in the client directory. Here as well, the package.json lists the packages required for the client.

If you open a couple of .vue files, you will see that each of them can be generally split into 3 parts:

1. The first part is enclosed within the <template></template> tags, and it contains the HTML that gets rendered when this particular component gets mounted
2. The second part is enclosed within the <script></script> tags and, as you would have guessed, this contains the javascript code. This part defines variables and does the event handling
3. The third part is enclosed within the <style></style> tags, and contains the styling instructions for this component.

Thus, a vue component (.vue file) contains HTML, Javascript as well as CSS within a single file.

Now, coming back to the project structure, 

• The router defines which view will be displayed for each path. This application has two views: Home and User. 
• The views folder contains the component files for these two views. 
• The components folder contains some reusable components
  • At the Application level
    • AppBar: The horizontal component at the top of the page, indicating the application name, dark-mode switch, and GitHub link
    • SnackBar: The 3 bar menu to the left of the application name that slides open on clicking 
    • NavMenu: The menu items once SnackBar is expanded, along with their paths
  • Modal components (popup components)
    • ConfirmModal: A popup containing ‘Cancel’ and ‘Submit’ buttons, along with a header and some text
    • GenericModal: A generic popup, which can contain forms and fields within. Used for NewUserForm and EditUserForm
    • Modal: A general Modal component having ConfirmModal and GenericModal as components. Defines properties of the modal, like width, type.
  • Users components:
    • User List Components
      • TheUserList: List view consisting of individual rows
      • UserListRow: Individual row within the list
    • EditUserForm: The form used to edit an existing user
    • NewUserForm: The form used to add a new user
• The store folder contains Vuex stores, which are essentially containers holding application states and all the mutations to that state
  • The modal store contains states of modal, like open, close, forceOpen
  • The users store contains the state of the users list, like loading (true/false), and the user records list. It also references the users service (explained below), and takes action 
• The services folder contains javascript files that, as the name suggests, perform services within the application
  • The modal.service defines what effect clicking buttons (Close, Confirm) has on the modal store
  • The snackbar.service defines what happens on clicking on the snackbar icon
  • The users.service contains the API calls to be made to the backend for various user actions like adding or deleting a user. This is where the front end interfaces with the backend.

Apart from these, the other folders are specific to this project, and may or may not be found in a generic project. 

• The plugins folder contains the Vuetify plugin that provides a material design component framework and defines the color scheme for dark and light modes
• The mixins folder contains one function. A mixin is generally a piece of code that is reused again and again (like functions in C programming). Over here, the function defined returns the loading property (true/false) from the user state. If a network call is happening, the loading property will be true, else false. 
• The assets folder contains the images to be used for the frontend

The main.js file is the entry point to the application, and it puts all the above components together. It initially mounts the App.vue component, and also includes the router, vuetify and store components.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { store } from './store'
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition'

const bounceTransition = createSimpleTransition('bounce-transition')

Vue.component('bounce-transition', bounceTransition)

Vue.config.productionTip = false

new Vue({
  router,
  vuetify,
  store,
  render: (h) => h(App),
}).$mount('#app')

The App.vue, in turn, contains the Appbar, Snackbar, NavMenu, and the Modal components. The <routerview /> tag in the App.vue template section displays the view set by the router. 

<v-main>
      <v-container fluid class="pa-10">
        <router-view />
      </v-container>
    </v-main>

The router, services, and store actions then take care of changing the view as per the user actions.

Conclusion

We saw an example of an application created using the MEVN stack and explored the project structure for both the client and the server. We saw the use of each type of file in the application. This article will hopefully help you create your own MEVN stack applications, and give you directions for further exploration. Thanks for reading.

If you want to further cement your understanding of creating Scalable Applications using Vue JS MongoDB, Node JS & Express, the articles cited below can help a great deal.

1. Getting Started with Vue js MongoDB
2. Vue JS MongoDB components
3. Understanding application structure of VueJS MongoDB
4. Vuex Store
5. What are services in Vue JS MongoDB
6. Vue – Mixins

The stack of Vue JS MongoDB, Node.JS, and Express.JS can be termed as the ambitious goals that can be easily scaled up; hence developed at a low cost due to the popularity and simplicity of the JavaScript language.

And, to meet the growing storage and computing needs of today’s data-driven organizations, it’s no longer required to invest significant capital percentage into increasing engineering bandwidth to function alongside the modern data stack. A Cloud-Based ETL tool, such as Hevo Data, can efficiently handle all of these challenges for you.

Visit our Website to Explore Hevo

Hevo Data, a No-code Data Pipeline, is a consistent and reliable answer to govern data transfer customs from a variety of sources like MongoDB and other destinations — a few clicks away! Hevo Data with 150+ sources (including 40+ free sources) to directly connect data sources to DWs or with each other, allows you to export, transform, & enrich data to process competent findings.

Want to take Hevo for a spin? Sign Up for a 14-day free trial and experience the feature-rich Hevo suite first hand. You can also have a look at the unbeatable pricing that will help you choose the right plan for your business needs.

Share with us your experience of learning about “the stack” of Vue JS MongoDB, Node.JS, and Express.JS — and while using the stack, the experience of building Scalable Applications.