Beginning MEVN Stack Development (MongoDB, Express, Vue, Node.js)

151 Pages·2021·6.431 MB·English

by  Greg Lim, Daniel Correa

Beginning
MEVN Stack
(MongoDB, Express,
Vue, Node.js)
Greg Lim - Daniel Correa
Copyright © 2021 Greg Lim
All rights reserved.
C © 2021 G L
OPYRIGHT BY REG IM
A .
LL RIGHTS RESERVED
N
O PART OF THIS BOOK MAY BE REPRODUCED IN ANY FORM

OR BY ANY ELECTRONIC OR MECHANICAL MEANS INCLUDING
,
INFORMATION STORAGE AND RETRIEVAL SYSTEMS WITHOUT
. T
PERMISSION IN WRITING FROM THE AUTHOR HE ONLY
,
EXCEPTION IS BY A REVIEWER WHO MAY QUOTE SHORT
.
EXCERPTS IN A REVIEW
F E : S 2021
IRST DITION EPTEMBER
C -A : D C
O UTHOR ANIEL ORREA
Table of Contents
P
REFACE
C 1: I
HAPTER NTRODUCTION
C 2: M DB O
HAPTER ONGO VERVIEW
C 3: S U M DB A C D
HAPTER ETTING P ONGO TLAS LOUD ATABASE
C 4: A S D
HAPTER DDING AMPLE ATA
C 5: S U O N . , E B
HAPTER ETTING P UR ODE JS XPRESS ACKEND
C 6: C O B S
HAPTER REATING UR ACKEND ERVER
C 7: C M D A O
HAPTER REATING THE OVIES ATA CCESS BJECT
C 8: C M C
HAPTER REATING THE OVIES ONTROLLER
C 9: T O B API
HAPTER ESTING UR ACKEND
C 10: L M R
HAPTER EAVING OVIE EVIEWS
C 11: T R API
HAPTER ESTING THE EVIEWS
C 12: R G S M I R
HAPTER OUTE TO ET A INGLE OVIE AND TS ATINGS
V F
UE RONTEND
C 13: I V
HAPTER NTRODUCTION TO UE
C 14: C H F B
HAPTER REATE EADER AND OOTER AR
C 15: D O R
HAPTER EFINING UR OUTES
C 16: ‘ A ’ V L
HAPTER BOUT IEW AND INTER
C 17: M R S : C
HAPTER OVIE AND EVIEW ERVICES ONNECTING TO THE
B
ACKEND
C 18: M V D D
HAPTER OVIES IEW WITH UMMY ATA
C 19: M V API D
HAPTER OVIES IEW WITH ATA
C 20: M V
HAPTER OVIE IEW
C 21: L R
HAPTER ISTING EVIEWS
C 22: L S
HAPTER OGIN YSTEM
C 23: L V
HAPTER OGIN IEW
C 24: A R
HAPTER DDING EVIEWS
C 25: E D R
HAPTER DITING AND ELETING EVIEWS
C 26: G N P P ’ R
HAPTER ET EXT AND REVIOUS AGE S ESULTS
C 27: D B H
HAPTER EPLOYING ACKEND ON EROKU
C 28: H D V F
HAPTER OSTING AND EPLOYING OUR UE RONTEND
A A
BOUT THE UTHOR
A C -A
BOUT THE O UTHOR
P
REFACE
About this book
In this book, we take you on a fun, hands-on and pragmatic journey to
learning MEVN stack development. You'll start building your first MEVN
stack app within minutes. Every chapter is written in a bite-sized manner and
straight to the point as I don’t want to waste your time (and most certainly
mine) on the content you don't need. In the end, you will have the skills to
create a Movies review app and deploy it to the Internet.
In the course of this book, we will cover:
- Chapter 1: Introduction
- Chapter 2: MongoDB Overview
- Chapter 3: Setting Up MongoDB Atlas Cloud Database
- Chapter 4: Adding Sample Data
- Chapter 5: Setting Up Our Node.js, Express Backend
- Chapter 6: Creating Our Backend Server
- Chapter 7: Creating the Movies Data Access Object
- Chapter 8: Creating the Movies Controller
- Chapter 9: Testing Our Backend API
- Chapter 10: Leaving Movie Reviews
- Chapter 11: Testing the Reviews API
- Chapter 12: Route to Get a Single Movie and Its Ratings
- Chapter 13: Introduction to Vue
- Chapter 14: Create Header and Footer Bar
- Chapter 15: Defining Our Routes
- Chapter 16: ‘ About’ View and Linter
- Chapter 17: Movie and Review Services: Connecting to the Backend
- Chapter 18: Movies View with Dummy Data
- Chapter 19: Movies View with API Data
- Chapter 20: Movie View
- Chapter 21: Listing Reviews
- Chapter 22: Login System
- Chapter 23: Login View
- Chapter 24: Adding Reviews
- Chapter 25: Editing and Deleting Reviews
- Chapter 26: Get Next and Previous Page’s Results
- Chapter 27: Deploying Backend on Heroku
- Chapter 28: Hosting and Deploying Our Vue Frontend
The goal of this book is to teach you MEVN stack development in a
manageable way without overwhelming you. We focus only on the essentials
and cover the material in a hands-on practice manner for you to code along.
Working Through This Book
This book is purposely broken down into short chapters where the
development process of each chapter will center on different essential topics.
The book takes a practical hands on approach to learning through practice.
You learn best when you code along with the examples in the book.
Requirements
No previous knowledge on Node.js or Vue development is required, but you
should have basic programming knowledge. It will be a helpful advantage if
you could read through my Node, Express book first which will provide you
with better insight and deeper knowledge into Node. But even if you have not
done so, you should still be able to follow along.
Getting Book Updates
To receive updated versions of the book, subscribe to our mailing list by
sending a mail to [email protected]. I try to update my books to use the
latest version of software, libraries and will update the codes/content in this
book. So, do subscribe to my list to receive updated copies!
Code Examples
You can obtain the source code of the completed project at
www.greglim.co/p/mevn.
C 1: I
HAPTER NTRODUCTION
Welcome to Beginning MEVN Stack! This book focuses on the key tasks and
concepts to get you started to learn and build MEVN stack applications in a
faster pace. It is designed for readers who don ’ t need all the details about
MEVN at this point in the learning curve but concentrate on what you really
need to know.
So what ’ s the MEVN stack? The MEVN stack is a popular stack of
technologies for building a modern Single Page Application. MEVN stands
for MongoDB, Express, Vue and Node.js:
- Node.js is one of the most popular server-side frameworks that allow

us to execute JavaScript code in a web server.
- Express is a web application framework for Node.js which makes

application development in Node easier and faster. Node and Express
together form the middle-tier web server of the stack.
- MongoDB is a NoSQL database which stores data persistently in the

form of collections and documents.
- Vue is a frontend framework to build user interfaces.

Another popular stack variant is the MERN where we use React as the
frontend. These frontends make up Single Page Applications (SPAs) which
avoid reloading the page entirely and just fetches relevant portions of the
page from the server to display new content.
The App We Will Be Building
We will build a Movie reviews app which lets users view and search for
movies. They can also log in and post reviews on the movies (fig. 1a, 1b, 1c).
Figure 1a – Home Page with search functionality
Figure 1b – Movie page listing reviews
Figure 1c – Create Review
Users can see the list of reviews in a Movie ’ s page and post/edit/delete their
own review if they are logged in. They will not be able edit/delete other ’ s
reviews though. Through this app, we will learn a lot of concepts and solidify
our Node.js, Express, Vue and MongoDB knowledge.
We will first talk about MongoDB and how to host our database in the cloud
using MongoDB Atlas. We will then create the backend of the app using
Node.js and Express. Our server will interact with the database using the
native MongoDB JavaScript library. After that, we will create the frontend
with Vue and connect the frontend to the backend to complete our MEVN