MERN Quick Start Guide

Build web applications with MongoDB, Express.js, React, and Node

Eddy Wilson Iriarte Koroliova

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781787280045
• Edition: 1
• Topic: Informatique
• Subtopic: Programmation Open Source

Build web applications with MongoDB, ExpressJS, React, and NodeAbout This Book• Build applications with the MERN stack• Work with each component of the MERN stack• Become confident with MERN and ready for more!Who This Book Is ForThe 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 In DetailThe 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.Style and approachThis guide shows you how to use your JavaScript knowledge to build web applications that use the MERN stack in both client-side and in server-side environments.

Building a Web server with ExpressJS

In this chapter, we will cover the following recipes:

• Routing in ExpressJS
• Modular route handlers
• Writing middleware functions
• Writing configurable middleware functions
• Writing router-level middleware functions
• Writing error-handler middleware functions
• Using ExpressJS' built-in middleware function to serve static assets
• Parsing the HTTP request body
• Compressing HTTP responses
• Using an HTTP request logger
• Managing and creating virtual domains
• Securing an ExpressJS web application with helmet
• Using template engines
• Debugging your ExpressJS web application

Technical requirements

You will be required to have an IDE, Visual Studio Code, Node.js and MongoDB. You will also need to install Git, in order use the Git repository of this book.

The code files of this chapter can be found on GitHub:
https://github.com/PacktPublishing/MERN-Quick-Start-Guide/tree/master/Chapter02

Check out the following video to see the code in action:
https://goo.gl/xXhqWK

Introduction

ExpressJS is the preferred de facto Node.js web application framework for building robust web applications and APIs.

In this chapter, the recipes will focus on building a fully functional web server and understanding the core fundamentals.

Routing in ExpressJS

Routing refers to how an application responds or acts when a resource is requested via an HTTP verb or HTTP method.

HTTP stands for Hypertext Transfer Protocol and it's the basis of data communication for the World Wide Web (WWW). All documents and data in the WWW are identified by a Uniform Resource Locator (URL).

HTTP verbs or HTTP methods are a client-server model. Typically, a web browser serves as a client, and in our case ExpressJS is the framework that allows us to create a server capable of understanding these requests. Every request expects a response to be sent to the client to recognize the status of the resource that it is requesting.

Request methods can be:

• Safe: An HTTP verb that performs read-only operations on the server. In other words, it does not alter the server state. For example: GET.
• Idempotent: An HTTP verb that has the same effect on the server when identical requests are made. For instance, sending a PUT request to modify a user's first name should have the same effect on the server if implemented correctly when multiple identical requests are sent. All safe methods are also idempotent. For example, the GET, PUT, and DELETE methods are idempotent.
• Cacheable: An HTTP response that can be cached. Not all methods or HTTP verbs can be cached. A response is cacheable only if the status code of the response and the method used to make the request are both cacheable. For example, the GET method is cacheable and the following status codes: 200 (Request succeeded), 204 (No content), 206 (Partial content), 301 (Moved permanently), 404 (Not found), 405 (Method not allowed), 410 (Gone or Content permanently removed from server), and 414 (URI too long).

Getting ready

Understanding routing is one of the most important core aspects in building robust RESTful APIs.

In this recipe, we will see how ExpressJS handles or interprets HTTP requests. Before you start, create a new package.json file with the following content:

{ "dependencies": { "express": "4.16.3" } } 

Then, install the dependencies by opening a Terminal and running:

 npm install 

ExpressJS does the whole job of understanding a client's request. The request may come from a browser, for instance. Once the request has been interpreted, ExpressJS saves all the information in two objects:

• Request: This contains all the data and information about the client's request. For instance, ExpressJS parses the URI and makes its parameters available on request.query.
• Response: This contains data and information that will be sent to the client. The response's headers can be modified as well before sending the information to the client. The response object has several methods available for sending the status code and data to the client. For instance: response.status(200).send('Some Data!').

How to do it...

Request and Response objects are passed as arguments to the route handlers defined inside a route method.

Route methods

These are derived from HTTP verbs or HTTP methods. A route method is used to define the response that an application will have for a specific HTTP verb.

ExpressJS route methods have equivalent names to HTTP verbs. For instance: app.get() for the GET HTTP verb or app.delete() for the DELETE HTTP verb.

A very basic route can be written as the following:

1. Create a new file named 1-basic-route.js
2. Include the ExpressJS library first and initialize a new ExpressJS application:

 const express = require('express') const app = express() 

3. Add a new route method to handle requests for the path "/". The first argument specifies the path or URL, the next argument is the route handler. Inside the route handler, let's use the response object to send a status code 200 (OK) and text to the client:

 app.get('/', (request, response, nextHandler) => { response.status(200).send('Hello from ExpressJS') }) 

4. Finally, use the listen method to accept new connections on port 1337:

 app.listen( 1337, () => console.log('Web Server running on port 1337'), ) 

5. Save the file
6. Open a Terminal and run the following command:

 node 1-basic-route.js 

7. Open a new tab on your browser and visit localhost on port 1337 in your web browser to see the results:

 http://localhost:1337/

For more information about which HTTP methods are supported by ExpressJS, visit the official ExpressJS website at https://expressjs.com/en/guide/routing.html#route-methods.

Route handlers

Route handlers are callback functions that accept three arguments. The first one is the request object, the second one is the response object, and the last one is a callback, which passes the handler to the next request handler in the chain. Multiple callback functions can be used inside a route method as well.

Let's see a working example of how we could write route handlers inside route methods:

1. Create a new file named 2-route-handlers.js
2. Include the ExpressJS libr...