Mongo, Express, Vue.js, and Node.js (MEVN) is a collection of JavaScript technologies just like MongoDB, Express, Angular, and Node.js (MEAN), and like MongoDB, Express, React, and Node.js (MERN). It is a full-stack solution for building web-based applications that use MongoDB as data storage, Express.js as the backend framework (which is built on top of Node.js), Vue.js as the JavaScript framework for the frontend, and Node.js as the main engine for the backend.

This book is for web developers who are interested in learning to build a full-stack JavaScript application using MongoDB, Express.js, Vue.js, and Node.js. It is suitable for beginners and intermediate developers with a basic knowledge of HTML, CSS, and JavaScript.

The term MEVN may be new, but the technologies used in it are not new. The only new technology that is being introduced here is Vue.js. Vue.js is an open source JavaScript framework, and its popularity is growing rapidly. There's not much of a learning curve with Vue.js and it is also a fierce competitor of other JavaScript frameworks such as AngularJS and ReactJS.

Modern web applications need to be fast and easily scalable. In the past, JavaScript was used in web applications only when there was a need to add some visual effects or animations that normal HTML and CSS could not achieve. But today, JavaScript has changed. Today, JavaScript is used in almost every web-based application, from small to large-scale apps. JavaScript is chosen when the application needs to be much faster and more interactive.

Building a full-stack application using JavaScript as the sole programming language has its own benefits:

• If you are just starting out and learning how to program, you only have to master one language: JavaScript.
• Full-stack engineers are high in demand. Becoming a full-stack developer means that you have an idea of how databases work, you know how to build both the backend and the frontend, and you also have the skills for UI/UX.

In this book, we will build the application using these technology stacks.

We will cover the following topics in this chapter:

• An introduction to the MEVN technology stack
• An introduction to Node.js and its installation on Windows, Linux, and macOS
• An overview of npm and its installation
• An introduction to MongoDB and its installation and a few basic commands used in MongoDB
• An introduction to GitHub version control and how it helps software engineers in terms of easy access to code history and collaboration

JavaScript is one of the most important programming languages today. Founded by Brendan Eich in 1995, it has done superbly well, not only in maintaining its status, but also in rising above all other programming languages.

The popularity of JavaScript is ever growing with no end in sight. Building web applications with JavaScript as the sole programming language has always been popular. And with this fast growing pace, the need for software engineers to have knowledge of JavaScript is only increasing. No matter what programming language you choose to excel at, JavaScript always crawls its way in to get involved with other programming languages as well, one way or the other.

There are a lot of technologies to choose from for the frontend and backend while developing an application. While this book uses Express.js for the backend, there are other frameworks as well, which you can learn if you want.

The other available backend frameworks are Meteor.js, Sails.js, Hapi.js, Mojito, Koa.js, and many others.

Similarly, for the frontend, the technologies include Vue.js, React, Angular, Backbone, and many more.

For databases, the options, other than MongoDB, are MySQL, PostgreSQL, Cassandra, and others.

JavaScript frameworks are rising day by day, both in terms of numbers and their usage. JavaScript used to be implemented only for the client-side logic but, over the years, it has seen significant growth and now it is used both on frontends and backends.

Express.js in the MEVN stack is used to manage all the backend-related stuff and Vue.js handles all the view-related stuff. The advantages of using an MEVN stack are as follows:

• One language is used throughout the whole application, which means the only language you need to know is JavaScript
• Understanding the client side and server side is very easy with one language
• Its very fast and reliable application with the non-blocking I/O of Node.js
• Its a great way to keep updated on the growing ecosystem of JavaScript

To get started, we need to add all the dependencies that are required for an MEVN stack application. We can also refer to the documentation on the official website (https://nodejs.org/) for details on how to install Node.js in any operating system.

There are two ways to install Node.js on macOS: using the installer or using the bash.

To install Node.js using the installer, perform the steps:

1. Install the installer: We can download the installer for macOS from the official website's download page (https://nodejs.org/en/#download). We will be installing the latest node version, which is 10.0.0. You can install any node version you want, but the application that we will be building in this book will require the node version >= 6.0.0. Run the installer and follow the instructions given. When we download and run the installer, we will be prompted with the following dialog box:

2. Just hit Continue until the installation finishes. Once the installation is complete, we will be able to see the following dialog box:

Just hit Close and we will be done.

Node.js can be easily installed using Homebrew in macOS. Homebrew is a free and open source software package manager that is used to install software on macOS. I personally prefer Homebrew because it makes it very easy to install different software on Mac:

1. To install Homebrew, type the following command:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Now, use Homebrew to install Node.js with the following command:

$ brew install node

For Linux, we can either install the default distribution of Node.js or we can download it from NodeSource to use the latest version.

To install from the default distribution, we can install Node.js on Linux by using this command:

$ sudo apt-get install -y nodejs

To install Node.js from NodeSource, perform the following steps:

1. First download the latest version of Node.js from NodeSource:

$ curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash 

2. Then, install Node.js with the command:

$ sudo apt-get install -y nodejs

We can install Node.js on Windows by following these steps:

1. Download the Node.js installer from the official website (https://nodejs.org/en/download/)
2. Run the installer and follow the given instructions
3. Click on the Close/Finish button

Installing Node.js for Windows via an installer is almost the same as on macOS. Once we download and run the installer, we will be prompted with a dialog box. Just click on Continue until the installation completes. When we finally see a dialog with a confirmation, we hit Close. Node.js will be installed!

NVM stands for Node Version Manager. NVM keeps track of all the node versions that we installed and also lets us switch between different versions. This is handy when the application that we built for one version of Node.js does not become compatible with the other versions, and we need that specific node version to make things work. NVM allows us to manage these versions easily. This is also very helpful when we need to upgrade or downgrade the node versions.

1. To download NVM, use the following command:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

2. We can also use the following command:

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

3. Check whether nvm has successfully installed using the following command:

$ nvm --version 

4. Now, to install node via nvm, use this command:

$ nvm install node

The npm is the acronym for Node Package Manager. Basically, it is a tool that takes care of all the packages that we install for Node.js. We can find all the existing packages on the official website (https://www.npmjs.com/). npm makes it easy for developers to keep their code updated and to reuse code shared by many other developers.

Developers are often confused by the terms package and modules. However, there is a clear distinction between these two.

A module is something that can be loaded by Node.js with a require command and has a namespace. A module has a package.json file associated with it.

A package is just a file, or group of files, that is capable of functioning on its own. Every package also has a package.json file that contains all the metadata-related information that describes that package. A combination of modules makes up a node package.

When we install Node.js from the installer itself, npm is installed as a part of the node. We can check whether npm is installed or not by using the following command:

$ npm --version

If npm is not installed, the command displays an error, whereas if installed, it just prints out the version of the installed npm.

npm is used to install different packages in our application. There are two ways to install packages: locally and globally. When we want to install a certain package specific to our application, we want to install that package locally. However, if we want to use a certain package as a command-line tool or be able to access it outside our application as well, we will want to install it as a global package.

To install a package specific to our application only, we can use this command:

$ npm install <package_name> --save

To install a package globally, we can use this command:

 $ npm install -g <package_name>

All the node packages and modules consist of a file called package.json. The main function of this file is to carry all the meta information associated with that package or module. A package.json file requires the content to be a JSON object.

As a minimum, a package.json file consists of the following things:

• name: The name of the package. This is an important part of a package.json file as it is the main thing that distinguishes it from other packages and, hence, it is a required field.
• version: The version of the package. This is also a required field. To be able to install our package, the name and version fields need to be given.
• description: A short summary of the package.
• main: This is the primary entry point used to look for the package. Basically, it is a file path, so when a user installs this package, it knows where to start looking for the modules.
• scripts: This field consists of commands that can be run for various states in the application. It has a key-value pair. The key is the event at which the command should be run and the value is the actual command.
• author/contributors: The author and contributors are the people. It contains an identifier of the person. An author is a single person, whereas contributors can be a group of people.
• license: The license field, when provided, makes it easy for the users to use our package. This helps in identifying the permissions and restrictions when using the package.
  

We can manually create a package.json file and specify the options ourselves, or we can use a command to create it interactively from the command prompt.

Let's go ahead and initialize a sample application with a package.json using npm.

First, create a folder in your projects directory using the command:

$ mkdir testproject

To create a package.json file, run the following command in the application that we created:

$ npm init

Running this command will ask us a bunch of questions that we can answer interactively from the command line:

In the end, it will create a package.json file, which will have the following content:

MongoDB is the first part of the technology in the MEVN stack. MongoDB is a free and open source document-based database published under a GNU license. It is a NoSQL database, meaning it is a non-relational database. Unlike relational databases, which use tables and rows to represent data, MongoDB uses collections and documents. MongoDB represents the data as a collection of JSON documents. It provides us with the flexibility to add fields in whatever way we want. Each document in a single collection can have a totally different structure. Aside from adding fields, it also provides the flexibility to change the fields from document to document in whatever way we want, something that is a cumbersome task in relational databases.

MongoDB offers a lot of benefits compared to Relational Database Management Systems:

• Schema-less architecture: MongoDB does not require us to design a specific schema for its collections. A schema for one document can vary, with another document being totally different.
• Each document is stored in a JSON-structured format.
• Querying and Indexing the MongoDB is very easy.
• MongoDB is a free and open source program.

There are two ways to install MongoDB. We can either download it from the official MongoDB website (https://www.mongodb.org/downloads#production) or we can use Homebrew to install it.

1. Download the version of MongoDB you want from https://www.mongodb.com/download-center#production.
2. Copy the downloaded gzipped to the root folder. Adding it to the root folder will allow us to use it globally:

 $ cd Downloads
 $ mv mongodb-osx-x86_64-3.0.7.tgz ~/

3. Unzip the gzipped file:

 $ tar -zxvf mongodb-osx-x86_64-3.0.7.tgz

4. Create a directory that will be used by Mongo to save data:

 $ mkdir -p /data/db

5. Now, to check if the installation was done successfully, start the Mongo server:

 $ ~/mongodb/bin/mongod

Here, we have successfully installed and started the mongo server.

To install MongoDB in macOS from Homebrew, follow these steps:

1. With Homebrew, we just need a single command to install MongoDB:
   

$ brew install mongodb

2. Create a directory that will be used by Mongo to save data:

 $ sudo mkdir -p /data/db

3. Start the Mongo server:

 $ ~/mongodb/bin/mongod

Hence, MongoDB is finally installed.

There are two ways to install MongoDB on Linux as well: we can either use the apt-get command or we can download the tarball and extract it.

To install MongoDB using apt-get, perform the following steps:

1. Run the following command to install the latest version of MongoDB:

 $ sudo apt-get install -y mongodb-org

2. Verify if mongod has been successfully installed by running the command:

 $ cd /var/log/mongodb/mongod.log

3. To start the mongod process, execute the following command in the Terminal:

 $ sudo service mongod start

4. See if the log file has a line that denotes that the MongoDB connection was made successfully:

 $ [initandlisten] waiting for connections on port            <port>

5. To stop the mongod process:

 $ sudo service mongod stop

6. To restart the mongod process:

 $ sudo service mongod restart

1. Download the binary file from https://www.mongodb.com/download-center?_ga=2.230171226.752000573.1511359743-2029118384.1508567417. Use this command:

 $ curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-
 3.4.10.tgz

2. Extract the downloaded files:

 $ tar -zxvf mongodb-linux-x86_64-3.4.10.tgz

3. Copy and extract to the target directory:

 $ mkdir -p mongodb
 $ cp -R -n mongodb-linux-x86_64-3.4.10/ mongodb

4. Set the location of the binary in the PATH variable:

 $ export PATH=<mongodb-install-directory>/bin:$PATH

5. Create a directory to be used by Mongo to store all database-related data:

 $ mkdir -p /data/db

6. To start the mongod process:

 $ mongod

Installing MongoDB from the installer is as easy as installing any other software on Windows. Just like we did for Node.js, we can download the MongoDB installer for Windows from the official website (https://www.mongodb.com/download-center#atlas). This will download an executable file.

Once the executable file is downloaded, run the installer and follow the instructions. Just go through the dialog box, reading the instructions carefully. When the installation is complete, just click on the Close button and you are done.

Let's dive a little deeper into MongoDB. As mentioned earlier as well, Mongo consists of a database with collections (tables/groups of data) and documents (rows/entries/records). We will use a few commands provided by MongoDB to create, update, and delete the documents:

First, start the Mongo server with this command:

$ mongod

Then, open the Mongo shell with this command:

$ mongo

This is the place where we can see all of our databases, collections, and documents.
To display the list of databases that we have, we can use the following:

> show dbs

Now, this command should list all the existing databases. To use the database that we want, we can simply run this command:

> use <database_name>

But if there is no database listed, don't worry. MongoDB provides us with a functionality where, when we run the preceding command, even if that database does not exist, it will automatically create a database with the given name for us.

So, if we already have a database that we want to use, we simply run that command and, if there are no databases yet, we create one using this command:

> use posts

When we run this command, a database named posts will be created.

Now, let's quickly review the commands used in MongoDB. The insert command is used to create new documents in a collection in MongoDB. Let's add a new record to the database that we just created called posts.

Here as well, in order to add a document to a collection, we first need a collection, which we don't have yet. But MongoDB allows us to create a collection easily by running the insert command. Again, if the collection exists, it will add the document to the given collection and, if the collection does not exist, it will simply create a new collection.

Now, in the Mongo shell, run the following command:

> db.posts.insertOne({
    title: 'MEVN',
    description: 'Yet another Javascript full stack technology'
});

The command will create a new collection called posts in the posts database. The output of this command is:

It will return a JSON object that has the ID of the document that we just created in the insertedId key and a flag that the event was received as acknowledged.

This command is used when we want to fetch the records from a collection. We can either fetch all the records or a specific document by passing parameters as well. We can add a few more documents to the posts database to better learn the command

To fetch all the records from the posts collection, run the following command:

> db.posts.find()

This will return all the documents that we have in the posts collection:

Let's find a post where the title is MEVN. To do that, we can run:

> db.posts.find({ 'title': 'MEVN' })

This command will return only those documents whose title is MEVN:

This command is used when we want to update a certain part of a collection. Let's say we want to update the description of a post whose title is Vue.js; we can run the following command:

> db.posts.updateOne(
     { "title" : "MEVN" },
     { $set: { "description" : "A frontend framework for Javascript programming language" } }
 )

The output for this command will be:

We can see here that the matchedCount is 1, which means that as regards the parameter that we sent to update the record with the title MEVN, there was one document in the posts collection that matched the query.

The other key called modifiedCount gives us the count of the documents that got updated.

The delete command is used to remove documents from a collection. There are several ways to delete a document from MongoDB.

To remove all the documents with certain conditions, we can run:

> db.posts.remove({ title: 'MEVN' })

This command will remove all the documents from the posts collection whose titles are MEVN.

To delete only the first record that satisfies the given criteria, we can just use:

> db.posts.deleteOne({ title: 'Expressjs' })

To delete all the records from a collection, we can use:

> db.posts.remove({})

Git is a version control system for tracking the code changes in our application. It is a free and open source software used to track and coordinate multiple users when building an application.

To start using this software, we need to install it first. There is a very easy way to install it on every OS.

We can find the installer for Git for Windows at https://gitforwindows.org/.

Download the executable installer file for Windows and follow the step-by-step instructions accordingly.

We can easily install Git on Mac via Homebrew. Just type the following command in the command line to install Git on Mac:

$ brew install git

Installing Git in Linux is as easy as installing Git on macOS. Just type the following command and hit Enter to install Git on Linux:

$ sudo apt-get install git

GitHub is a version control service. It is a source code management tool specifically designed to track changes to our code. GitHub also provides features of social networking, such as adding comments, and displaying feeds, which makes it even more powerful because multiple developers can collaborate at the same time in a single application.

GitHub is a savior for software engineers. There are several advantages that GitHub provides that make it worthwhile to use. A few benefits that are provided by GitHub are listed here:

• Tracking code changes: GitHub helps track changes to the code, which means it maintains a history of our code. This enables us to view revisions of our code base made during any time period.
• Documentation: GitHub provides features for adding documentation, Wikis, and so on to our code bases, and these can be written using the simple markdown language.
• Graphs and reporting: GitHub provides insight into various metrics, including how many additions and deletions were made to the code, who the top contributors were, and who has the most commits.
• Bug tracking: Since GitHub tracks all the activities made at every point in time, when something breaks, we can easily backtrack to the point that broke the code. We can also integrate third-party tools such as Travis for continuous integration, which helps us to track and identify bugs easily.
• Collaboration is easy: GitHub tracks every activity done by every collaborator working on the project and also sends email notifications about the same. It also provides social media features, such as feeds, comments, emojis, and mentions.
• Hosting our own website: We can also host our own website with GitHub using a feature called GitHub pages. We just need to create a repo for our own project and host it using GitHub pages, which will then make the website applicable to the URL: https://<username>.github.io.

GitHub is very easy to use. However, to get started using GitHub, we need to least know about a few terminologies that are used in GitHub:

• Repository/Repo: A repository is a place where all of our code bases are stored. A repository can be either private or public.
  
• ssh-key: ssh-key is a way to authorize in GitHub. It stores our identities.
• Branch: A branch can be defined as multiple states of a repository. The primary branch of any repository is the master branch. Multiple users can work in parallel on different branches.
  
• Commit: A commit makes it easy to distinguish between different states of a file at a given time. When we make a commit, a unique identifier is assigned to that commit so what it's easy to check what changes were made in that commit. A commit takes a message as a parameter to describe the type of change that is being made.
• Push: A push sends the commit that we made back to our repository.
  
• Pull: As opposed to pushing, pulling fetches the commit from the remote repository to our local project.
  
• Merge: Merging is basically done between multiple branches. It is used to apply changes from one branch to another.
• Pull requests: Creating a pull request is basically sending the changes that we made to our code base for the approval of other developers. We can start discussions on a pull request to check the quality of code and ensure that the changes don't break anything.

Now that we know the basics of GitHub, let's get started creating a GitHub repository for the project we want to build:

1. First, create a folder for the application in the root folder. Let's name this application blog:

 $ mkdir blog

2. Create an account on GitHub at https://github.com/.
3. Go to your profile. Under the Repositories tab, click New as follows:

4. Name this repository blog.
5. Now, on the Terminal, go to the location of this application and initialize an empty repository with this command:

 $ cd blog
 $ git init

6. Now, let's create a file called README.md and write a description for the application and then save it:

 $ echo 'Blog' > README.md

7. Add this file to GitHub:

 $ git add README.md

8. Add a commit so that we have a history of this change of code:

 $ git commit -m 'Initial Commit'

9. Now, to link the local application with the remote repository in GitHub, use this command:

$ git remote add origin https://github.com/{github_username}/blog.git

10. Finally, we need to push this commit to GitHub:

 $ git push -u origin master

When it's done, visit the GitHub repository where you will find a history of the commits made to our repository, as follows:

That's it. Now, when we want to write changes, we will first create a branch and push the changes to the branch.

In this chapter, we learned what an MEVN stack is. We learned what Node.js, npm, and MongoDB, are as well as receiving a brief summary of GitHub and how it helps software engineers for easy access to code history and collaboration.

In the next chapter, we will learn more about Node.js and Node.js modules. We will learn about the MVC architecture and how to implement it by building an application with Express.js.