Full-Stack Web Development with Vue.js and Node E-Book

Aneeta Sharma

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 285

Veröffentlichungsjahr: 2018

Beschreibung

Bring the frontend and backend together with Vue, Vuex, and Node.js

Key Features

• Construct modern web applications with Node 10, Express.js, MongoDB, and Vue
  


• Leverage the latest web standards to increase code performance, readability, and cross-compatibility
  


• Harness the power of the JavaScript ecosystem to effectively run, build, and test your full stack applications
  

Book Description

Isomorphic JavaScript was the buzzword of the year 2017, allowing developers to utilize a single language throughout their web development stack and build cost-effective and scalable applications. MEVN is a one such modern web development stack consisting of web applications such as MongoDB, Express.js, Vue.js, and Node.js. Hands-On Full-Stack Web Development with Vue.js 2 and Node.js leverages the harmony of these technologies to help you create full-stack web applications.

Starting with the core frameworks, this example-based guide explains all the key concepts of frameworks, how to set them up properly, and how to use popular modules to connect them together and make them work cohesively. You will learn all this with the help of real-world examples. In addition to this, you will be able to scaffold web application architecture, add an authentication layer, and develop the MVC structure to support the development of your application. You'll explore how to create data models for your applications and then write REST APIs by exposing your data model to your application.

Solely orientated towards building a full, end-to-end application using the MEVN stack, this book will help you understand how your application development grows.

What you will learn

• Build an application with Express.js
  


• Create schemas using Mongoose
  


• Develop a single-page application using Vue.js and Express.js
  


• Create RESTful APIs using Express.js
  


• Add test cases to improve the reliability of the application
  


• Learn how to deploy apps on Heroku using GitHub
  


• Add authorization using passports
  

Who this book is for

If you are a web or a full-stack JavaScript developer, and have tried your hand at traditional stacks such as LAMP, MEAN or MERN, or wish to explore a new stack with modern web technologies, then this book is for you. Prior knowledge of HTML, CSS, and JavaScript would be an added advantage.

Leseprobe

Full-Stack Web Development with Vue.js and Node

Build scalable and powerful web apps with modern web stack: MongoDB, Vue, Node.js, and Express

Aneeta Sharma

BIRMINGHAM - MUMBAI

Full-Stack Web Development with Vue.js and Node

Copyright © 2018 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Commissioning Editor: Kunal ChaudhariAcquisition Editor:Nigel FernandesContent Development Editor:Jason PereiraTechnical Editor:Leena PatilCopy Editor: Safis EditingProject Coordinator:Sheejal ShahProofreader: Safis EditingIndexer:Pratik ShirodkarGraphics:Jason MonteiroProduction Coordinator:Shantanu Zagade

First published: May 2018

Production reference: 1100518

Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.

ISBN 978-1-78883-114-7

www.packtpub.com

mapt.io

Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe?

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals

Improve your learning with Skill Plans built especially for you

Get a free eBook or video every month

Mapt is fully searchable

Copy and paste, print, and bookmark content

PacktPub.com

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

Contributors

About the author

Aneeta Sharma is a software engineer from Kathmandu, Nepal who has been in the tech industry for more than seven years. She started her career as a Web Designer, before becoming a PHP Developer and then a Ruby on Rails engineer. She has been working on both frontend and backend aspects of web application development since she started her career and has been developing web applications professionally since 2009.

She likes to explore new technologies and has learned to work with lots of them over the years. Most recently, she has been working with full-stack solutions with Ruby on Rails, along with frontend frameworks such as Vue.js and React.js.

I am grateful to Packt Publishing for giving me the opportunity to write this book. I am thankful to the team with whom I worked and everyone who contributed to this book. Thank you all for spending your precious time in ensuring the quality of this book. I loved working with you. I am thankful for my family and friends, as well as my colleagues who supported and encouraged me on this journey. Thank you for being an inspiration.

About the reviewer

Anton de Regt is a programmer and blogger with a passion for making life better, faster, and easier. After graduating with a bachelor’s degree in Embedded Systems and Automation, he worked in the Netherlands, China, and the USA as a programmer and database admin. Anton now develops apps for small business owners to help them focus on the things that matter and make their impact bigger.

On his tech blog, he writes about a variety of subjects, ranging from cybersecurity and data science, to hackathons and socially responsible programming. 

Packt is searching for authors like you

If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

Table of Contents

Title Page

Copyright and Credits

Full-Stack Web Development with Vue.js and Node

PacktPub.com

Why subscribe?

PacktPub.com

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Get in touch

Reviews

Introducing MEVN

Evolution of the technology stack in JavaScript

Introducing MEVN

Installing Node.js

Installing Node.js on macOS

Installing Node.js using the installer

Installing Node.js using the bash

Installing Node.js on Linux

Installing Node.js from the default distribution

Installing Node.js from NodeSource

Installing Node.js on Windows

Introducing NVM

Installing Node.js from NVM

Introducing npm

Module

Package

Installing npm

Using npm

Installing an npm package locally

Installing an npm package globally

Introducing package.json

Creating a package.json file

Installing MongoDB

The benefits of MongoDB compared to Relational Database Management Systems (RDBMS)

Installing MongoDB on macOS 

Installing MongoDB by downloading

Installing MongoDB via Homebrew

Installing MongoDB on Linux

Installing MongoDB using apt-get

Installing MongoDB using tarball

Installing MongoDB on Windows

Using MongoDB

Creating or using a MongoDB database

Creating documents

Fetching documents

Fetching all documents

Fetching a specific document

Updating documents

Deleting documents

Deleting documents that match a given criteria

Deleting a single document that matches the given criteria

Deleting all records

Introducing Git

Installing Git on Windows

Installing Git on Mac

Installing Git on Linux

Introducing GitHub

Why GitHub?

Using GitHub

Setting up a GitHub repository

Summary

Building an Express Application

Introduction to Node.js

Understanding Node.js

Node.js programming

Node.js modules

Node.js core modules

Custom modules

Introducing Express.js 

Installing Express.js

Creating an Express.js application

Express router

Request object

Response object

Introduction to MVC

Why MVC?

Changing the folder structure to incorporate MVC

File naming conventions

Creating view files for the Express.js application

Summary

Introducing MongoDB

Why MongoDB?

MongoDB queries

Creating documents

insertOne()

insertMany()

insert()

Retrieving documents

Finding all documents

Finding documents via filters

Updating documents

updateOne()

updateMany()

update()

Deleting documents

deleteOne()

deleteMany()

remove()

Introducing Mongoose

Installing Mongoose

Connecting Mongoose to MongoDB

Creating records in Mongoose

Fetching records from Mongoose

Fetching all records

Fetching a specific record

Updating records in Mongoose

findById() and save()

findOneAndUpdate()

findByIdAndUpdate()

Deleting records in Mongoose

remove()

findOneAndRemove

findByIdAndRemove()

Adding validation with Mongoose 

Default validations

required()

Type validation

String

Numbers

Custom validations

Summary

Introducing REST APIs

What is REST?

Introducing REST APIs

Benefits of REST API

HTTP verbs

GET

POST

PUT

DELETE

HTTP status codes

2XX codes

4XX codes

5XX codes

Introducing Postman

Installing Postman

Testing APIs with Postman

Adding a GET endpoint in the users controller

Fetching all users

Fetching a single user

Adding a POST endpoint in the users controller

Adding a PUT endpoint in the users controller

Adding a DELETE endpoint in the users controller

Summary

Building the Real Application

Introducing Vue.js

Installing Vue.js

Including it in a script tag

Using Content Delivery Network (CDN) links directly

Using Vue.js as an npm package

Introducing vue-cli

Initializing projects with vue-cli

Project folder structure

Building a static application with Vue.js

Redefining the home page

Segregating CSS

Introduction to Vuetify

Redesigning pages with Vuetify

Redesigning the home page

Redesigning the contact page

Understanding Vue.js components

Vue.js directives

v-text

v-on

Data binding

Handling forms with Vue.js

Creating a movies listing page

Creating an Add movie form

Communicating with servers

Adding express to our application

Adding a server file

Adding a Movie model

Adding movies controller

Connecting frontend and backend

Installing axios

Connecting all the pieces

Adding form validations

Adding a flash message 

Loading dynamic content on the homepage

API endpoint to fetch all movies

Modifying Home.vue to display dynamic content

Adding a movie profile page

Summary

Building Authentication with passport.js

Introduction to passport.js

JWT

Installing passport.js

Configuring passport

passport.js strategies

Installing the passport-jwt strategy

Configuring the passport-jwt strategy

Using the JWT strategy

Setting up user registration

Creating a User model

Installing bcryptjs

Adding API endpoint to register a user

Creating a register view page

Adding submit and clear methods in the register form

Introducing axios

Using axios

Setting up the user login

Modifying the User model

Adding an API endpoint to log a user in

Creating a register view page

Adding submit and clear methods to the login form

Authenticating our user in Home.vue

Serving static files for Vue components

Passport's Local Strategy

Installing Passport's Local Strategy

Configuring Passport's Local Strategy

Adding necessary routes for Local Authentication

Installing express-session

Configuring express-session

Configuring emit method

Summary

Building OAuth Strategies with passport.js

Passport's Facebook Strategy

Installing Passport's Facebook Strategy

Configuring Passport's Facebook Strategy

Creating and setting up a Facebook app

Adding a button to our login page that allows users to log in via Facebook

Adding configurations for Facebook app

Adding necessary routes for Facebook login

Passport's Twitter Strategy

Installing Passport's Twitter Strategy

Configuring Passport's Twitter Strategy

Creating and setting up a Twitter app

Adding a button to our login page that allows users to log in via Twitter

Adding configurations for Twitter App

Adding necessary routes for Twitter login

Passport's Google strategy

Installing Passport's Google strategy

Configuring Passport's Google strategy

Creating and setting up a Google app

Adding a button to our login page that allows users to log in via Google

Adding configurations for Google app

Adding necessary routes for Google login

Passport's LinkedIn strategy

Installing Passport's LinkedIn strategy

Configuring Passport's LinkedIn strategy

Creating and setting up a LinkedIn app

Adding a button to our login page that allows users to log in via LinkedIn

Adding configurations for LinkedIn app

Adding necessary routes for LinkedIn login

Summary

Introducing Vuex

Traditional multi-web page application

An introduction to SPAs

SPA versus MPA

Pros of using MPAs

Cons of using MPAs

Pros of using SPAs 

Cons of using  SPAs 

An introduction to Vuex

Core concepts of Vuex

Creating a simple Vuex application

Installing Vuex

Setting up Vuex

Creating a store file

State

Getters

mutations

Actions

Installing and using Vuex in a movie application

Defining a store

Modifying Home.vue 

Creating an action

Creating a mutation

Creating a getter

Summary

Testing an MEVN Application

Benefits of writing tests

Introduction to unit tests

Convention for writing unit tests

An introduction to end-to-end test

Convention for writing end-to-end tests

Technologies we will be using

Introducing Mocha

Introducing chai

Introducing sinon

Writing tests for Node.js server

Writing tests for controllers

Writing tests for models

Writing tests for Vue.js components

Writing e2e testing

Installing Nightwatch

Configuring Nightwatch

Summary

Going Live

Continuous integration

Workflow for CI

Benefits of CI

Introduction to Travis CI

Setting up Travis in the app

Activating the repository

Specifying the Node.js version

Building the script

Managing the dependencies

Introduction to Heroku

Setting up a Heroku account

Creating a Node.js app

Installing Heroku

Installing Heroku in Windows

Installing Heroku in Linux

Installing Heroku in macOS X 

Deploying to Heroku

Heroku error logs

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

Preface

JavaScript has become one of the most important languages of today and tomorrow. The rise of JavaScript in the past few years has been so drastic that it has become a powerful language in the development of modern web applications.

MEVN is one of the stacks for developing modern web applications in addition to MEAN and MERN. This book provides a step by step way of building a full-stack web application using the technology in MEVN, which is MongoDB, Express.js, Vue.js, and Node.js.

The book will provide the basic concepts of Node.js and MongoDB, continuing with building an Express.js application and implementing Vue.js.

In this book, we'll cover the following things:

Learning about the technology stack—MongoDB, Node.js, Express.js, and Vue.js

Building an Express.js application

Learning what REST APIs are and how to implement them

Learning to use Vue.js as the frontend layer in the Express.js application

Adding an authentication layer in the application

Adding the automation scripts and tests

Who this book is for

This book is designed for web developers who are interested in learning how to build a full-stack application with only one programming language as JavaScript using the technology stack: Mongo DB, Express.js, Vue.js, and Node.js.

This book is suitable for beginners and intermediate developers with a basic knowledge of HTML, CSS, and JavaScript. If you are a web or full-stack JavaScript developer JavaScript developer and has tried hands on the traditional stacks, such as LAMP, MEAN, or MERN, and wish to explore a new stack with modern web technologies, then this book is for you.

What this book covers

Chapter 1, Introduction to MEVN, gives an introduction to the MEVN  stack and the installation of different tools required to build the foundation for the application.

Chapter 2, Building an Express Application, provides an introduction to Express.js, an idea of what Model, Views, Controller (MVC) structure is, and shows you how to set up an application using Express.js and MVC structure.

Chapter 3, Introduction to MongoDB, focuses on the introduction of Mongo and its queries, introduction to Mongoose and performance of Create, Read, Update, and Delete (CRUD) operations using Mongoose.

Chapter 4, REST APIs, gives an idea of what REST architecture is and what RESTful APIs are. This chapter also gives an idea of different HTTP verbs and developing REST APIs.

Chapter 5, Building the Real Application, introduces Vue.js  and shows you how to build a fully working dynamic application using all technologies in MEVN.

Chapter 6, Authentication with Passport.js, deals with what Passport.js and describes how to implement JWT and local strategy to add an authentication layer in the application. 

Chapter 7, Passport.js OAuth Strategies, gives idea about what OAuth strategies and guides you through the implementation of Facebook, Twitter, Google, and LinkedIn Passport.js strategies.

Chapter 8, Introduction to Vuex, gives an idea about core concepts of Vuex – states, getters, mutations, and actions. It also describes how you can implement them in the application.

Chapter 9, Testing an MEVN Application, explains what unit tests and end-to-end tests are and guides you through writing both unit tests and automation tests for the different aspects of the application.

Chapter 10, Go Live, explains what  Continuous Integration is, guiding you through how to set up a Continuous Integration service with the application and deploy the application on Heroku.

To get the most out of this book

This book will be of most benefit if you have the following skills:

A knowledge of HTML, CSS, and JavaScript

A knowledge of Vue.js and Node.js is a plus

A knowledge on how to build web applications using MEAN and MERN stacks

is a plus

Download the example code files

You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

Log in or register at

www.packtpub.com

.

Select the

SUPPORT

tab.

Click on

Code Downloads & Errata

.

Enter the name of the book in the

Search

box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR/7-Zip for Windows

Zipeg/iZip/UnRarX for Mac

7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Vue.js-and-Node. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packtpub.com.

Introducing MEVN

Mongo, Express, Vue.js, and Node.js (MEVN) is a collection of JavaScript technologies just like MongoDB, Express, Angular, and Node.js (MEAN), and like MongoDB, Express, React, and Node.js (MERN). It is a full-stack solution for building web-based applications that use MongoDB as data storage, Express.js as the backend framework (which is built on top of Node.js), Vue.js as the JavaScript framework for the frontend, and Node.js as the main engine for the backend.

This book is for web developers who are interested in learning to build a full-stack JavaScript application using MongoDB, Express.js, Vue.js, and Node.js. It is suitable for beginners and intermediate developers with a basic knowledge of HTML, CSS, and JavaScript.

The term MEVN may be new, but the technologies used in it are not new. The only new technology that is being introduced here is Vue.js. Vue.js is an open source JavaScript framework, and its popularity is growing rapidly. There's not much of a learning curve with Vue.js and it is also a fierce competitor of other JavaScript frameworks such as AngularJS and ReactJS.

Modern web applications need to be fast and easily scalable. In the past, JavaScript was used in web applications only when there was a need to add some visual effects or animations that normal HTML and CSS could not achieve. But today, JavaScript has changed. Today, JavaScript is used in almost every web-based application, from small- to large-scale apps. JavaScript is chosen when the application needs to be much faster and more interactive.

Building a full-stack application using JavaScript as the sole programming language has its own benefits:

If you are just starting out and learning how to program, you only have to master one language: JavaScript. 

Full-stack engineers are high in demand. Becoming a full-stack developer means that you have an idea of how databases work, you know how to build both the backend and the frontend, and you also have the skills for UI/UX.

In this book, we will build the application using these technology stacks. 

We will cover the following topics in this chapter:

An introduction to the MEVN technology 

stack

An introduction to 

Node.js

and its installation on Windows, Linux, and macOS

An overview of

npm

and its installation

An introduction to MongoDB and its installation and a few basic commands used in MongoDB

An introduction to GitHub version control and how it helps software engineers in terms of easy access to code history and collaboration

Evolution of the technology stack in JavaScript

JavaScript is one of the most important programming languages today. Founded by Brendan Eich in 1995, it has done superbly well, not only in maintaining its status, but also in rising above all other programming languages.

The popularity of JavaScript is ever growing with no end in sight. Building web applications with JavaScript as the sole programming language has always been popular. And with this fast growing pace, the need for software engineers to have knowledge of JavaScript is only increasing. No matter what programming language you choose to excel at, JavaScript always crawls its way in to get involved with other programming languages as well, one way or the other.

There are a lot of technologies to choose from for the frontend and backend while developing an application. While this book uses Express.js for the backend, there are other frameworks as well, which you can learn if you want.

The other available backend frameworks are Meteor.js, Sails.js, Hapi.js, Mojito, Koa.js, and many others.

Similarly, for the frontend, the technologies include Vue.js, React, Angular, Backbone, and many more.

For databases, the options, other than MongoDB, are MySQL, PostgreSQL, Cassandra, and others.

Introducing MEVN

JavaScript frameworks are rising day by day, both in terms of numbers and their usage. JavaScript used to be implemented only for the client-side logic but, over the years, it has seen significant growth and now it is used both on frontends and backends.

Express.js in the MEVN stack is used to manage all the backend-related stuff and Vue.js handles all the view-related stuff. The advantages of using an MEVN stack are as follows:

One language is used throughout the whole application, which means the only language you need to know is JavaScript

Understanding the client side and server side is very easy with one language

Its very fast and reliable application with the non-blocking I/O of Node.js

Its a great way to keep updated on the growing ecosystem of JavaScript

Installing Node.js

To get started, we need to add all the dependencies that are required for an MEVN stack application. We can also refer to the documentation on the official website (https://nodejs.org/) for details on how to install Node.js in any operating system. 

Installing Node.js on macOS

There are two ways to install Node.js on macOS: using the installer or using the bash.

Installing Node.js using the installer

To install Node.js using the installer, perform the steps:

Install the installer: We can download the installer for macOS from the official website's download page (

https://nodejs.org/en/#download

). We will be installing the latest

node

version, which is

10.0.0

. You can install any

node

version you want, but the application that we will be building in this book will require the

node

version

>= 6.0.0

. Run the installer and follow the instructions given. When we download and run the installer, we will be prompted with the following dialog box:

Just hit

Continue

until the installation finishes. Once the installation is complete, we will be able to see the following dialog box:

Just hit Close and we will be done.

Installing Node.js using the bash

Node.js can be easily installed using Homebrew in macOS. Homebrew is a free and open source software package manager that is used to install software on macOS. I personally prefer Homebrew because it makes it very easy to install different software on Mac:

To

install

Homebrew

, type the following command:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Now, use

Homebrew

to install Node.js with the following command:

$ brew install node

Installing Node.js on Linux

For Linux, we can either install the default distribution of Node.js or we can download it from NodeSource to use the latest version.

Installing Node.js from the default distribution

To install from the default distribution, we can install Node.js on Linux by using this command:

$ sudo apt-get install -y nodejs

Installing Node.js from NodeSource

To install Node.js from NodeSource, perform the following steps:

First download the latest version of Node.js from NodeSource:

$ curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash

Then, install Node.js with the command:

$ sudo apt-get install -y nodejs

The apt is a short form of Advanced Package Tool that is used to install software on Debian and Linux distributions. Basically, this is equivalent to the Homebrew command in macOS.

Installing Node.js on Windows

We can install Node.js on Windows by following these steps:

Download the Node.js installer from the official website (

https://nodejs.org/en/download/

).

Run the installer and follow the given instructions.

Click on the 

Close

/

Finish

button.

Installing Node.js for Windows via an installer is almost the same as on macOS. Once we download and run the installer, we will be prompted with a dialog box. Just click on Continue until the installation completes. When we finally see a dialog with a confirmation, we hit Close. Node.js will be installed!

Introducing NVM

NVM stands for Node Version Manager. NVM keeps track of all the node versions that we installed and also lets us switch between different versions. This is handy when the application that we built for one version of Node.js does not become compatible with the other versions, and we need that specific node version to make things work. NVM allows us to manage these versions easily. This is also very helpful when we need to upgrade or downgrade the node versions.

Installing Node.js from NVM

To download NVM, use the following command:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

We can also use the following command:

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

Check whether

nvm

has successfully installed using the following command:

$ nvm --version

Now, to install

node

via

nvm

, use this command:

$ nvm install node

Introducing npm

The npm is the acronym for Node Package Manager. Basically, it is a tool that takes care of all the packages that we install for Node.js. We can find all the existing packages on the official website (https://www.npmjs.com/). npm makes it easy for developers to keep their code updated and to reuse code shared by many other developers.

Developers are often confused by the terms package and modules. However, there is a clear distinction between these two.

Module

A module is something that can be loaded by Node.js with a require command and has a namespace. A module has a package.json file associated with it. 

Package

A package is just a file, or group of files, that is capable of functioning on its own. Every package also has a package.json file that contains all the metadata-related information that describes that package. A combination of modules makes up a node package.

Installing npm

When we install Node.js from the installer itself, npm is installed as a part of the node. We can check whether npm is installed or not by using the following command:

$ npm --version

If npm is not installed, the command displays an error, whereas if installed, it just prints out the version of the installed npm.

Using npm

npm is used to install different packages in our application. There are two ways to install packages: locally and globally. When we want to install a certain package specific to our application, we want to install that package locally. However, if we want to use a certain package as a command-line tool or be able to access it outside our application as well, we will want to install it as a global package.

Installing an npm package locally

To install a package specific to our application only, we can use this command:

$ npm install <package_name> --save

Installing an npm package globally

To install a package globally, we can use this command:

$ npm install -g <package_name>

Introducing package.json

All the node packages and modules consist of a file called package.json. The main function of this file is to carry all the meta information associated with that package or module. A package.json file requires the content to be a JSON object.

As a minimum, a package.json file consists of the following things:

name

:

The name of the package. This is an important part of a 

package.json

file as it is the main thing that distinguishes it from other packages and, hence, it is a required field.

version

:

The version of the package. This is also a required field. To be able to install our package, the 

name

and

version

fields need to be given.

description

: A short summary of the package.

main

:

This is the primary entry point used to look for the package. Basically, it is a file path, so when a user installs this package, it knows where to start looking for the modules.

scripts

:

This field consists of commands that can be run for various states in the application. It has a key-value pair. The

key

is the event at which the command should be run and the

value

is the actual command.

author/contributors

: The author and contributors are the people. It contains an identifier of the person. An author is a single person, whereas contributors can be a group of people.

license

: The license field, when provided, makes it easy for the users to use our package. This helps in identifying the permissions and restrictions when using the package.

Creating a package.json file

We can manually create a package.json file and specify the options ourselves, or we can use a command to create it interactively from the command prompt. 

Let's go ahead and initialize a sample application with a package.json using npm.

First, create a folder in your projects directory using the command:

$ mkdir testproject

To create a package.json file, run the following command in the application that we created:

$ npm init

Running this command will ask us a bunch of questions that we can answer interactively from the command line:

In the end, it will create a package.json file, which will have the following content:

Installing MongoDB