Logo
UI Development

Up and running with MEVN – Part 1

Before getting started, I would like to provide the following information on 4 parts of Up and running with MEVN.

Part 1 – Dealing with the complete setup (vue, node, express, mongo), Sending response data from backend using Postman, fetching the data by frontend using Axios API.

Part 2 – Complete CRUD Functionality with an Example.

Part 3 – Setting up Authentication using Passport.js (SSO login).

Part 4 – Creating a separate channel with set of Authenticated users where you can post data and retrieve information what others have posted.

Example I am dealing with is TO-DO (Web-application).

So, Let’s get started with the Part 1

MEVN stands for “MongoDB Express.js Vue.js Node.js”.

MongoDB: A general purpose, document-based open source database.

Express.js: Uses HTTP Utility Methods to create Middleware for the application.

Vue.js: An open-source Model-view-viewmodel Frontend framework for creating user interfaces and Single page Applications.

Node.js: Node is a runtime system used for server side scripting using javascript.

Before setting up with MEVN, you must be aware of the following.

  • Basic understanding of Javascript.
  • Knowledge on Database Management.
  • REST and CRUD Concepts.
  • Node.js, MongoDB Installation.
  • Knowledge on Postman.

Why MEVN? (Here is my answer)

Being a Front-end Web-developer, I have almost zero knowledge on .net, PHP and basic understanding on JAVA concepts.

While exploring full-stack development framework for a small project I thought of going with MEAN or MERN or MEVN. I have chosen VueJS over React/Angular as Vue provides higher customizability and hence it is easier to learn than Angular or React.

The best thing about MEVN is, It uses only one language through out the application i.e., JavaScript.

Points to be discussed:

  • Client side setup (Frontend) using VUEJS
  • CRUD Operations (Middleware) using Express.js
  • Server side setup (Backend) using Node.js
  • Data storage and manipulation using MongoDB
  • API calls using Axios

Getting Started with Frontend:

First, Let us create a Folder and name it as project1. Now, open it using any code editor.

I prefer VS Code. Here are some of the plugins which make your job easy working with Vue.

  • Vetur – Used for Syntax highlighting, code snippets and many more.
  • Prettier – Used for code Formatting.
  • Vue-beautify – Beautifies Vue code in VS Code.
  • GitLens – It’s a very useful plugin. It adds all the git capabilities into VS Code and visualizes code authorship at a glance.
  • Javascript (ES6) code Snippets.

We will be using vue-cli to create the boiler plate.

Now, create a folder named frontend inside folder project1.

Customize the project as per the project requirements.

Once the setup is done, It’ll show the following commands.

We’ll now get into the folder frontend and type the command as below

Now we have the frontend framework ready, we’ll now move on and create backend using Express.js.

Getting Started with Backend:

Now, go ahead and create a folder named ‘backend‘ inside the ‘project1‘.

Now run the command as below.

Now, go ahead and create src folder inside backend. We’ll create the starting point of backend application main.js file inside the src folder.

Inside main.js, let’s write some script.

Now open package.json and add scripts as below.

Output will be seen in the console once you run the back-end script.

Now, let us install dependencies to create express.

Before Express.js Version 4, body-parser need not be installed separately. Now that we’ve to install body-parser extension to make HTTP-post requests.

In order to make HTTP requests, we need some other dependencies as well i.e., body-parser, morgan, cors.

  • body-parser : body-parser is used to parse JSON, buffer, string or any text submitted using HTTP Post request. req.body have the entire body portion of incoming request received from HTTP Post.
  • morgan : morgan is a middleware used to log requests, errors to the console.
  • cors : Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain.

We’re not going that deep using morgan and cors in this project.

Let us open main.js file, remove console and add the following code.

Now, lets add some code and test if API is rendering fine or not.

Let’s install nodemon. ( nodemon is a utility which monitor for changes in application, when we make any changes and save, it’ll restart the application. )

Now, make the following changes in package.json.

Now, let’s start the application. Output JSON will be rendered at https://localhost:8081/todos

Server restarts automatically whenever you make a change in the back-end application (except the “scripts” changes).

Setting up Middleware:

Now, let us create a connection between backend and frontend using axios.

Axios : axios is used to make HTTP Requests to the backend.

Navigate to frontend folder and run the following command.

Now, let’s create a folder named services in frontend/src folder.

Create a file named Api.js inside services and add the following code.

Now, let’s create another file todos.js in the same location and fetch the todos as mentioned below.

Now, Let’s create a new Todos.vue file in src/components to display Todos received from the Api and add the following code.

Todo list

 

Now, remove logo from main component App.vue.

Now, add the new route in src/router/index.js.

Note: You can remove HelloWorld component and make Todos component in the default path.

When you goto https:localhost:8080/todos, you should be able to see the output as below.

Now, add the below code into Todos.vue component. Here we are receiving the JSON from backend using Api.js

 

Todo list

 

When you goto http://localhost:8080/todos, you will see the output as below.

Let us now connect to MongoDB and work on CRUD functionality.

Setting up Mongo:

Let us install mongoose in backend folder by the following command.

Now, go ahead and add the following code in main.js file inorder to create a connection with mongoose.

MongoDB Connection is successful, if you are able to see the console log statement as “Connection Succeeded”.

Till here, we have seen how to set up VueJS, Frontend, Backend, Middleware and Mongo.

In the next part, we are going to learn the complete CRUD Functionality.

About The Author