Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
MERN Quick Start Guide
MERN Quick Start Guide

MERN Quick Start Guide: Build web applications with MongoDB, Express.js, React, and Node

Arrow left icon
Profile Icon Eddy Wilson Iriarte Koroliova
Arrow right icon
R$50 per month
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.7 (6 Ratings)
Paperback May 2018 302 pages 1st Edition
eBook
R$80 R$147.99
Paperback
R$183.99
Subscription
Free Trial
Renews at R$50p/m
Arrow left icon
Profile Icon Eddy Wilson Iriarte Koroliova
Arrow right icon
R$50 per month
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.7 (6 Ratings)
Paperback May 2018 302 pages 1st Edition
eBook
R$80 R$147.99
Paperback
R$183.99
Subscription
Free Trial
Renews at R$50p/m
eBook
R$80 R$147.99
Paperback
R$183.99
Subscription
Free Trial
Renews at R$50p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

MERN Quick Start Guide

Introduction to the MERN Stack

In this chapter, we will cover the following topics:

  • The MVC architectural pattern
  • Installing and configuring MongoDB
  • Installing Node.js
  • Installing NPM packages

Technical requirements

Introduction

The MERN stack is a solution composed of four main components:

  • MongoDB: A database that uses a document-oriented data model.
  • ExpressJS: A web application framework for building web applications and APIs.
  • ReactJS: A declarative, component-based, and isomorphic JavaScript library for building user interfaces.
  • Node.js: A cross-platform JavaScript runtime environment built on Chrome's V8 JavaScript engine allows developers to build diverse tools, servers, and applications.

These fundamental components that comprise the MERN stack are open source, and are thus maintained and developed by a great community of developers. What ties these components together is a common language, JavaScript.

The recipes in this chapter will mainly focus on setting up a development environment to work with a MERN stack.

You are free to use the code editor or IDE of your choice. However, I would suggest you give Visual Studio Code a try if you have trouble deciding which IDE to use.

The MVC architectural pattern

Most modern web applications implement the MVC architectural pattern. It consists of three interconnected parts that separate the internal representation of information in a web application:

  • Model: Manages the business logic of an application that determines how data should be stored, created, and modified
  • View: Any visual representation of the data or information
  • Controller: Interprets user-generated events and transforms them into commands for the model and view to update accordingly:

The Separation of Concern (SoC) design pattern separates frontend from backend code. Following the MVC architectural pattern, developers are able to adhere to the SoC design pattern, resulting in a consistent and manageable application structure.

The recipes in the following chapters implement this architectural pattern to separate the frontend and the backend.

Installing and configuring MongoDB

The official MongoDB website provides up-to-date packages containing binaries for installing MongoDB on Linux, OS X, and Windows.

Getting ready

Visit the official website of MongoDB at https://www.mongodb.com/download-center, select Community Server, and then select your preferred operating system version of the software and download it.

Installing MongoDB and configuring it may require additional steps.

How to do it...

Visit the documentation website of MongoDB at https://docs.mongodb.com/master/installation/ for instructions and check the Tutorials section for your specific platform.

After installation, an instance of mongod-, the daemon process for MongoDB-, can be started in a standalone fashion:

  1. Open a new Terminal
  2. Create a new directory named data, which will contain the Mongo database
  3. Type mongod --port 27017 --dbpath /data/ to start a new instance and create a database
  4. Open another Terminal
  5. Type mongo --port 27017 to connect a Mongo shell to the instance

There's more...

As an alternative, you can opt to use a Database as a service (DBaaS) such as MongoDB Atlas, which, at the time of writing, allows you to create a free cluster with 512 MB of storage. Another simple alternative is mLab, although there are many other options.

Installing Node.js

The official Node.js website provides two packages containing LTS and Current (containing the latest features) binaries to install Node.js on Linux, OS X, and Windows.

Getting ready

For the purpose of this book, we will install Node.js v10.1.x.

How to do it...

Installing npm packages

The installation of Node.js includes a package manager called npm, which is the default and most widely used package manager for installing JavaScript/Node.js libraries.

NPM packages are listed in the NPM registry at https://registry.npmjs.org/, where you can search for packages and even publish your own.

There are other alternatives to NPM as well, such as Yarn, which is compatible with the public NPM registry. You are free to use the package manager of your choice; however, for the purpose of this book, the package manager used in the recipes will be NPM.

Getting ready

NPM expects to find a package.json file at the root of your project folder. This is a configuration file that describes the details of your project, such as its dependencies, the name of the project, and the author of the project.

Before you're able to install any packages in your project, you must create a package.json file. These are the steps you will usually take to create a project:

  1. Create a new project folder in your preferred location and either name it mern-cookbook or give it another name of your choice.
  2. Open a new Terminal.
  3. Change the current directory to the new folder you just created. This is usually done with the cd command in your Terminal.
  4. Run npm init to create a new package.json file, following the steps displayed in the Terminal.

After that, you should have a package.json file that will look something like the following:

{ 
    "name": "mern-cookbook", 
    "version": "1.0.0", 
    "description": "mern cookbook recipes", 
    "main": "index.js", 
    "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Eddy Wilson", 
    "license": "MIT" 
} 
 

After this, you will be able to use NPM to install new packages for your project.

How to do it...

  1. Open a new Terminal
  2. Change the current directory to where your newly created project folder is located
  3. Run the following line to install the chalk package:
      npm --save-exact install chalk

Now, you will be able to use the package in your project via require in Node.js. Go through the following steps to see how you can use it:

  1. Create a new file named index.js and add the following code:
      const chalk = require('chalk') 
      const { red, blue } = chalk 
      console.log(red('hello'), blue('world!')) 
  1. Then, open a new Terminal and run the following:
      node index.js  

How it works...

NPM will connect to and look in the NPM registry for the package named react, and will download it and install it if it exists.

The following are some useful flags that you can use NPM with:

  • --save: This will install and add the package name and version in the dependencies section of your package.json file. These dependencies are modules that your project will use while in production.
  • --save-dev: This works in the same way as the --save flag. It will install and add the package name in the devDependencies section of the package.json file. These dependencies are modules that your project will use during development.
  • --save-exact: This keeps the original version of the installed package. This means, if you share your project with other people, they will be able to install the exact same version of the package that you use.

While this book will provide you with a step-by-step guide to installing the necessary packages in every recipe, you are encouraged to visit the NPM documentation website at https://docs.npmjs.com/getting-started/using-a-package.json to learn more.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • • Build applications with the MERN stack
  • • Work with each component of the MERN stack
  • • Become confident with MERN and ready for more!

Description

The MERN stack is a collection of great tools—MongoDB, Express.js, React, and Node—that provide a strong base for a developer to build easily maintainable web applications. With each of them a JavaScript or JavaScript-based technology, having a shared programming language means it takes less time to develop web applications. This book focuses on providing key tasks that can help you get started, learn, understand, and build full-stack web applications. It walks you through the process of installing all the requirements and project setup to build client-side React web applications, managing synchronous and asynchronous data flows with Redux, and building real-time web applications with Socket.IO, RESTful APIs, and other concepts. This book gives you practical and clear hands-on experience so you can begin building a full-stack MERN web application. Quick Start Guides are focused, shorter titles that provide a faster paced introduction to a technology. They are for people who don't need all the detail at this point in their learning curve. The presentation has been streamlined to concentrate on the things you really need to know.

Who is this book for?

The book is for JavaScript developers who want to get stated with the MERN Stack.

What you will learn

  • • Get started with the MERN stack
  • • Install Node.js and configure MongoDB
  • • Build RESTful APIs with Express.js and Mongoose
  • • Build real-time applications with Socket.IO
  • • Manage synchronous and asynchronous data flows with Redux
  • • Build web applications with React

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : May 31, 2018
Length: 302 pages
Edition : 1st
Language : English
ISBN-13 : 9781787281080
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : May 31, 2018
Length: 302 pages
Edition : 1st
Language : English
ISBN-13 : 9781787281080
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
R$50 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
R$500 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just R$25 each
Feature tick icon Exclusive print discounts
R$800 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just R$25 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total R$ 729.97
Full-Stack React Projects
R$272.99
MERN Quick Start Guide
R$183.99
React Cookbook
R$272.99
Total R$ 729.97 Stars icon
Banner background image

Table of Contents

7 Chapters
Introduction to the MERN Stack Chevron down icon Chevron up icon
Building a Web server with ExpressJS Chevron down icon Chevron up icon
Building a RESTful API Chevron down icon Chevron up icon
Real-Time Communication with Socket.IO and ExpressJS Chevron down icon Chevron up icon
Managing State with Redux Chevron down icon Chevron up icon
Building Web Applications with React Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Half star icon Empty star icon Empty star icon 2.7
(6 Ratings)
5 star 33.3%
4 star 0%
3 star 16.7%
2 star 0%
1 star 50%
Filter icon Filter
Top Reviews

Filter reviews by




Alina Jun 21, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
It's helpful and up-to-date
Amazon Verified review Amazon
ps Feb 09, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I like this book as it does not go into too much details and cause distraction from the topic. It's the best book for fast paced learning. Off course you can google the stuff you are unable to grasp or want more information. As the name suggest - Its and MERN quick start guide.
Amazon Verified review Amazon
Gustavo Adolfo Feb 23, 2024
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
the version of mongoose is outdated and you have to research if you want to make it works
Subscriber review Packt
Jonathan Garcia Mar 06, 2019
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
Waste of money and time. Free instructions online are better than the content of this book. Save your time and money.
Amazon Verified review Amazon
Durga Srinivas Sep 12, 2020
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
Don't buy kindle edition
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.