Build full stack web apps with MEVN Stack [Part 1/2]

[Update] I have written a book(Full-Stack Web Development with Vue.js and Node) which talks about how we can build web applications using the MEVN technology stack mentioned in this blog.

You can find more details on the book here: https://www.packtpub.com/web-development/full-stack-web-development-vuejs-and-node or grab yourself a copy from Amazon here.

If you want to learn more, here is a preview of the book:https://medium.com/@anaida07/inside-the-book-full-stack-web-development-with-vue-js-and-node-50638d4dcc6a

At CloudFactory, we always strive to go an extra mile. Even though we are a Ruby first company, we like to invest in learning new technologies. While exploring full-stack development framework for a pet project we thought about MEAN and MERN but since VueJS was something new we wanted to give it a try and MEVN came to light.

The acronym ?MEVN? stands for ?MongoDB Express.js VueJS Node.js?. In this post, I am going to show how to create a basic MEVN (MongoDB/Express/VueJS/Node.js) Stack application.

Prerequisites for this guide:

• Basic knowledge of Javascript
• Concepts of REST and CRUD
• Node.js / NVM installed
• MongoDB installed

What to expect from this guide:

• Full stack application with MEVN architecture
• CRUD operations via Express.js
• Connect APIs with MongoDB(we will be using mongoose)

This tutorial is based onMongoDB v3.0.5, ExpressJS v4.15.4, VueJS v2.4.2, Node.js v8.5.0.

This guide will be focused on generating a skeleton for MEVN full stack application. We will cover the Mongo part in the next tutorial. The github repo for this tutorial can be found here.

Okay, so let?s get started!

First, let?s create an application folder called posts in the workspace:

mkdir postscd posts

Now, we want to set up our client VueJS for the frontend. We will be using vue-cli to build up the template.

npm install -g vue-cli

Now, we will be creating a separate folder of client with VueJS templating.

vue init webpack client

(This command will ask you certain questions like project name, author, description, using eslint, using test, etc. You can just hit enter for every question.)

The command should look like this:

Now, we have a folder named client in our application. As we can see, now we need to run npm install inside the client folder to install all the dependencies listed in client/package.json file. So, let?s go ahead and do it.

cd clientnpm installnpm run dev

Running npm run dev will open up the http://localhost:8080/#/in the browser which renders the default VueJS template.

Now that we have set up the frontend framework, let?s move ahead on creating the backend with express . Let?s create a server folder in the root directory which is going to hold all the server code.

mkdir servercd server

We want to initialize this server project with npm which we can do with npm init -f which will create a package.json file inside the server directory.

What this package.json file is missing is it doesn?t have a start command. So let?s do that first so that we can run the server with npm start command. The package.json file should look like this:

Now, let?s go ahead and create src folder inside this directory and create a file called app.js.

In app.js , let?s write:

console.log(‘Hello World’);

and then inside server directory in terminal, let?s run

npm start

If everything went well, we should be able to see the printed out Hello World in the terminal.

Now we will need to install dependencies to create an express application. Inside server directory:

npm install express –save

We will also need some of the other dependencies for making HTTP requests. So let?s go ahead and install bodyParser, morgan and cors.

npm install –save body-parser cors morgan

Let?s replacesrc/app.js with following code:

Up to this point, what we have is a skeleton for frontend project and a skeleton for a backend project. Now we will create an endpoint in the server. Upto this point, we have a client which is running on port 8080 (http://localhost:8080) and a server which is running on port 8081 (http://localhost:8081).

Now, in src/app.js

Let?s, restart the server and visit http://localhost:8081/posts . We should be able to see the JSON formatted data.

We have to manually kill and restart our server in order to view the changes. To save some time we can install nodemon which helps to automatically restart the server everytime we make a change in our application. So let?s go ahead and do that first.

Inside server directory:

npm install –save nodemon

and update scripts command in package.json as:

“scripts”: { “start”: “./node_modules/nodemon/bin/nodemon.js src/app.js”, “test”: “echo “Error: no test specified” && exit 1″}

Now we don?t need to restart the npm server every time we make changes to our code.

Now let?s go ahead on creating a connection between the client and the server.

In clients folder, let?s add axios package

npm install axios –save

axios is a library which is used to make http requests to the backend.

Now let?s create a folder called services in clients/src and add a new file called Api.js which is going to be a connector between the client and the server.

In Api.js

Let?s create a new file in the same location as PostsService.js . This is going to be used for hitting the posts api endpoint which we create a while ago in the server folder.

In PostsService.js

Let?s add a new page for displaying posts.The src/router/index.js should look like this:

Now that we have created a route for posts, let?s add a new view component for that route. Let?s add a new file in src/components as Posts.vue

When you go to http://localhost:8080/posts , you should be able to see this:

We don?t need VueJS logo, let?s remove this line of code from App.vue

<img src=”./assets/logo.png”>

Now let?s call the posts controller from view component posts which lists all the posts that is returned by the posts api endpoint we defined earlier.

Replace the contents of Posts.vue with this:

Now when you go to the same location http://localhost:8080/posts , you will be able to see this:

We will be covering the database connection with Mongo and its CRUD operations in the next part.

Continue to next part: (Build full stack web apps with MEVN Stack [Part 2/2])

References:Building a Simple CRUD Application with Express and MongoDBGetting Started with Node.js, Express, MongoDBFull Stack Apps with Vue.js and Express.JS