Beginning MERN Stack Build and Deploy a Full Stack MongoDB, Express, React, Node.js App (Greg Lim)（Z-Library）

📄 File Format: PDF

💾 File Size: 5.3 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

Beginning MERN Stack (MongoDB, Express, React, Node.js) Greg Lim Copyright © 2021 Greg Lim All rights reserved. COPYRIGHT © 2021 BY GREG LIM ALL RIGHTS RESERVED. NO PART OF THIS BOOK MAY BE REPRODUCED IN ANY FORM OR BY ANY ELECTRONIC OR MECHANICAL MEANS INCLUDING INFORMATION STORAGE AND RETRIEVAL SYSTEMS, WITHOUT PERMISSION IN WRITING FROM THE AUTHOR. THE ONLY

📄 Page 3

EXCEPTION IS BY A REVIEWER, WHO MAY QUOTE SHORT EXCERPTS IN A REVIEW. FIRST EDITION: JUNE 2021

📄 Page 4

Table of Contents PREFACE 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 REACT FRONTEND CHAPTER 13: INTRODUCTION TO REACT CHAPTER 14: CREATE NAVIGATION HEADER BAR CHAPTER 15: DEFINING OUR ROUTES CHAPTER 16: MOVIEDATASERVICE: CONNECTING TO THE BACKEND CHAPTER 17: MOVIESLIST COMPONENT CHAPTER 18: MOVIE COMPONENT CHAPTER 19: LISTING REVIEWS CHAPTER 21: ADDING AND EDITING REVIEWS CHAPTER 22: DELETING A REVIEW

📄 Page 5

CHAPTER 23: GET NEXT PAGE ’ S RESULTS CHAPTER 24: GET NEXT PAGE ’ S RESULTS – SEARCH BY TITLE AND RATING CHAPTER 25: DEPLOYING BACKEND ON HEROKU CHAPTER 26: HOSTING AND DEPLOYING OUR REACT FRONTEND ABOUT THE AUTHOR

📄 Page 6

PREFACE About this book In this book, we take you on a fun, hands-on and pragmatic journey to learning MERN stack development. You'll start building your first MERN 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 React - Chapter 14: Create Navigation Header Bar - Chapter 15: Defining Our Routes - Chapter 16: MovieDataService: Connecting To The Backend - Chapter 17: MoviesList Component - Chapter 18: Movie Component - Chapter 19: Listing Reviews - Chapter 21: Adding And Editing Reviews - Chapter 22: Deleting A Review - Chapter 23: Get Next Page ’ s Results - Chapter 24: Get Next Page ’ s Results – Search By Title And Rating - Chapter 25: Deploying Backend On Heroku - Chapter 26: Hosting And Deploying Our React Frontend The goal of this book is to teach you MERN 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

📄 Page 7

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 React 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 and React book first which will provide you will better insight and deeper knowledge into the various technologies. 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 support@i-ducate.com. 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/mern.

📄 Page 8

CHAPTER 1: INTRODUCTION Welcome to Beginning MERN Stack! This book focuses on the key tasks and concepts to get you started to learn and build MERN stack applications in a faster pace. It is designed for readers who don ’ t need all the details about MERN at this point in the learning curve but concentrate on what you really need to know. So what ’ s the MERN stack? The MERN stack is a popular stack of technologies for building a modern Single Page Application. MERN stands for MongoDB, Express, React 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. - React is a JavaScript frontend library to build user interfaces. MERN is derived from the popular MEAN stack (MongoDB, Express, Angular, Node) where instead of using the Angular frontend framework, we use React. Another popular variant is the MEVN where we use Vue 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).

📄 Page 9

Figure 1a – Home Page with search functionality Figure 1b – Movie page listing reviews

📄 Page 10

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, React 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 React and connect the frontend to the backend to complete our MERN stack app. In the last chapter, we will deploy our Node, Express backend on Heroku, and React frontend on Netlify, to run both backend and frontend in the cloud. So, the overall structure of our app will be: - the ‘ M ’ of the stack, MongoDB will be hosted on MongoDB Atlas - the ‘ E ’ and ‘ N ’ , Express and Node runs the backend server (Express being part of Node) and exposes an API. Hosted on Heroku - the ‘ R ’ , React frontend calls the API and renders the user interface on the client ’ s browser. Hosted on Netlify. We will begin by going through the MongoDB database layer in the next chapter.

📄 Page 11

CHAPTER 2: MONGODB OVERVIEW As indicated by the ‘ M ’ in MERN, we will use MongoDB as the backend database for our app. MongoDB is a NoSQL database. Before we talk about what is a NoSQL database, let ’ s first talk about relational databases so that we can provide a meaningful contrast. If you have not heard of a relational database before, you can think of relational databases like spreadsheets where data is structured and each entry is generally a row in a table. Relational databases are generally controlled with SQL or Structured Query Language. Examples of popular relational databases are MySQL, SQL Server and PostgreSQL. NoSQL databases in contrast are often called non-relational databases, where NoSQL means anything that isn ’ t an SQL (see how it infers the popularity of SQL?). It might seem like NoSQL is a protest over SQL but it actually refers to a database not structured like a spreadsheet, i.e. less rigid than SQL databases. The architecture of MongoDB is a NoSQL database which stores information in the form of collections and documents. MongoDB stores one or more collections. A collection represents a single entity in our app, for example in an e-commerce app, we need entities like categories, users, products. Each of these entities will be a single collection in our database. If we were to map similar concepts in relational databases and MongoDB: - a table in a relational database would compare to a collection in MongoDB. - each row in a table (in a relational database) can be thought of as a document in a collection (in MongoDB). - a join operation in SQL can be done with $lookup in MongoDB. - instead of foreign keys, we utilize reference in MongoDB. In MongoDB, a collection contains documents. A document is an instance of the entity containing the various relevant field values to represent the document. For example, a product document will contain title, description and price fields. Each field is a key-value pair e.g. price: 26, title: "Learning Node" .

📄 Page 12

Documents look a lot like JSON objects with various properties (though they are technically Binary JSON or BSON). An example of a collection- document tree is shown below: Database → Products collection → Product document { price: 26, title: "Learning Node", description: "Top Notch Development book", expiry date: 27-3-2020 } → Product document … → Users collection → User document { username: "123xyz", contact: { phone: "123-456-7890", email: "xyz@example.com" } } → User document … You can see in the above that we have a variety of relationships. A user has a username and contact. Within contact, you have phone and email. The BSON format provides for a wide variety of support for data types like strings, integers etc. Let ’ s create our database in the next chapter.

📄 Page 13

CHAPTER 3: SETTING UP MONGODB ATLAS CLOUD DATABASE The fastest and easiest way to get started with MongoDB is by using its cloud service MongoDB Atlas to host our database on the cloud. One way of setting up MongoDB is by running MongoDB on a local machine for development and testing. But MongoDB Atlas makes things a lot easier even if we are just doing a local project. Also, our entire backend and frontend will eventually be deployed to the cloud anyway. First, sign up for a MongoDB Atlas account (https://www.mongodb.com/download-center). Under 'Deploy a free cluster', create a new account and click ‘ Get started free ’ (fig. 1). Figure 1 You will be brought to a ‘ Build a New Cluster ’ page. Under ‘ Global Cluster Configuration ’ , choose ‘ AWS ’ as cloud provider (because they provide a free account without having to enter credit card details). Under ‘ North America ’ , select ‘ North Virginia ’ where we can get a free tier for our MongoDB (fig. 2).

📄 Page 14

Figure 2 Next under 'Cluster Tier', choose the ‘ M0 ’ free tier (fig. 3). Figure 3 The good thing about Amazon AWS is that we can experiment without

📄 Page 15

having to worry about making unintentional mistakes and getting a huge bill from Amazon. When your website gets more popular with more users, you can then scale up at a later stage. Keep the other default options and select 'Create Cluster.' It will prompt you saying that it takes 7-10 minutes to set up everything on AWS (fig. 4). Figure 4 Next, in the left panel, under ‘ Security ’ , click on ‘ Database Access ’ where you do not yet have a user. Create a database user by clicking on ‘ Add New User ’ (fig. 5) and provide him with ‘ Read and write to any database privileges ’ .

📄 Page 16

Figure 5 Next, under ‘ Security ’ , ‘ Network Access ’ , ‘ IP Whitelist ’ , select ‘ Add IP Address ’ and choose ‘ allow access from anywhere ’ (fig. 6). This will allow our app to be accessible from anywhere in the Internet. Figure 6 We will later revisit the MongoDB site to retrieve the connection string to connect MongoDB and our Node.js backend. For now, let ’ s add some sample data to our database.

📄 Page 17

CHAPTER 4: ADDING SAMPLE DATA One thing great about MongoDB is when you want some dummy data to try things out, you don ’ t have to painstakingly generate your own data. MongoDB provides a lot of sample data for us. In the MongoDB Cluster, click on the three dots ‘…’ and select ‘ Load sample Dataset ’ (fig. 1). This will load a sample dataset into your cluster. Figure 1 To see the sample data, click on ‘ Collections ’ , and you see a list of sample databases e.g. ‘ sample_mflix ’ , ‘ sample_analytics ’ (fig. 2).

📄 Page 18

Figure 2 In our app, we will use the ‘ sample_mflix ’ data. sample_mflix contains movies ’ data (fig. 3). Figure 3 For example, in the first listing, we have the ‘ The Poor Little Rich Girl ’ movie. We have the movie ’ s runtime, title, plot, year and more. We will use these data in our app.

📄 Page 19

Having loaded our sample data, let ’ s start creating our backend in the next chapter.

📄 Page 20

CHAPTER 5: SETTING UP OUR NODE.JS, EXPRESS BACKEND In this chapter, we begin setting up the backend of our app with Node.js and Express. First, we will install Node.js. Go to nodejs.org (fig. 1) and download the appropriate version for your Operating System. Figure 1 Installation should be straightforward. Once Node.js has been installed, go to your Terminal and run: node -v This shows the version of Node that you installed e.g. v14.16.0 (at time of this book ’ s writing). Creating the Backend folder In Terminal, in a location of your choice, create a folder called ‘ movie-