Book Image

Full-Stack Web Development with Vue.js and Node

By : Aneeta Sharma
Book Image

Full-Stack Web Development with Vue.js and Node

By: Aneeta Sharma

Overview of this book

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

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: