Home Web Development MERN Quick Start Guide

MERN Quick Start Guide

By Eddy Wilson Iriarte Koroliova
books-svg-icon Book
eBook $25.99 $17.99
Print $32.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $25.99 $17.99
Print $32.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
  1. Free Chapter
    Introduction to the MERN Stack
About this book
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.
Publication date:
May 2018
Publisher
Packt
Pages
302
ISBN
9781787281080

 

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.

About the Author
  • Eddy Wilson Iriarte Koroliova

    Eddy Wilson Iriarte Koroliova is a skilled software and full-stack web developer. He is skilled at creating and developing solutions by taking a client-focused approach. He maintains a good attitude under pressure and stress. He has the ability to work independently but is positive and collaborative on a team environment. He always provides on-time feedback and keeps an open mind. He loves learning new human languages and adapts fast to the existing and new technologies. He likes travelling, challenging experiences, drinking coffee and eating Chinese food, and loves to solve puzzles. He seeks new opportunities that allow him to use the skills that he has to develop solutions for simple or complex problems. He is also eager to learn new technologies in order to improve his current skills.

    Browse publications by this author
Latest Reviews (3 reviews total)
Muy práctico y claro....
Still working with it, but seems quite good and useful
The book takes a more hands on approach which is easy to follow. Will recommend to friends and colleagues.
MERN Quick Start Guide
Unlock this book and the full library FREE for 7 days
Start now