Book Image

MERN Quick Start Guide

By : Eddy Wilson Iriarte Koroliova
3 (1)
Book Image

MERN Quick Start Guide

3 (1)
By: Eddy Wilson Iriarte Koroliova

Overview of 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.
Table of Contents (8 chapters)

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.