Search

Installation of React on Mac

Hello learners! In this tutorial we are going to learn the installation of React.js library on macOS. React.js is a library which helps developers to develop highly efficient data-driven SPA apps. It is based on functional programming, relies on the concept of immutability and encourages component-based architecture based on Single reusability principle.Before we perform the installation steps, we need to look at the prerequisites needed for installation.1. PrerequisiteSystem requirements: mac OS > 10.10Minimum RAM: 4 GBStorage space: 10 GB available spaceInternet browser: Chrome, Safari, Opera, Microsoft EdgeInternet connectivity: 512 kbps and above2. Introduction to ReactIn this tutorial, we will install the react library on macOS. Before the installation, we need to have a quick understanding of React.React is a library which helps web developers and architects to serve the needs of customers having demands of high data flow and fast responsive UIs in the context of data.It is based on the components-based architecture. The webpage can be represented in the form of Parent and Child based components.  It relies heavily on Virtual DOM, which acts as a performance optimization to DOM operations.A Web page which is composed of HTML has a DOM tree, with the help of which the web page is rendered by the browser.When the user is interacting on a page, it involves addition and insertion of information based on the user activity.  for e.g. A user has added an item to the cart. The cart is showing the updated item to reflect the user’s decision.Behind the scene, the HTML document undergoes a certain transform which helps to share the updated page. As we have mentioned, the HTML document is represented by the DOM tree. In the above scenario, the DOM needs some changes which involve addition and deletion of certain HTML nodes. This helps to show the relevant information which represents what a user is trying to achieve in the context of updating his buying choice.For this insertion and deletion operation on HTML DOM, there is a memory cost involved.Virtual DOM acts as a performance optimizer as far as the DOM update operations are concerned.  It maintains two copies; one is the real copy of the DOM (react DOM) and another one is the change to be done. The process by which minimal change takes place on the react DOM is also studied under the process called reconciliation.To understand the DOM we can visualise it as a tree.  The tree has roots and branches. In a similar manner the DOM has the HTML element at the top and down below there are nodes which are connected to the parent node. In terms of tree analogy, we can represent the parent node as the trunk, with various nodes connected to the trunk. And on these nodes, the insertion and deletion operations get optimized by using React.3. A short intro to Node.js & npmRyan Dahl is the inventor of Node.js.Node.js code is an open source, cross-platform, JavaScript runtime environment that runs JavaScript code. It is based on the Chrome V8 engine. Chrome V8 engine is written in C++. It runs on Windows, macOS and Linux.After installation of Node.js, we can run the react based project locally on our system during development. This also allows us to deploy our app on the production server.Some of the features of Node.js include:a. Uses JavaScript as primary languageb. Non-blocking I/Oc. Supports Asynchronous programmingd. Can handle multiple connections requests by using a single serverNode.js allows us to perform read, write operations on the server. It also provides the functionality to work with the databases.Npmjs.org is an online code repository of thousand modules (npm) and it allows us to install node modules using basic commands. Some modules are independent and some are interrelated to run effectively, due to dependencies between them.Node.js hosts several modules and instead of building functionality from scratch, it is easier for us to look for a module and reuse and extend its functionality. Developer projects generally have time and budget constraints. For the developer community, npmjs.org acts as a lifesaver as far as the Node.js based development is concerned.4. Download Node.js and installationTo install Node.js there are various steps.  It can be installed by visiting here.Once we have downloaded the Node.js version based on the operating system, we can perform the installation steps.One thing we need to note is that NPM is auto-installed with Node.js installation.We need to click on the package file which we have downloaded node-v14.15.1.pkgIn the below installation we can see it will install Node.js  v14.15.1 and npm v6.14.8When we click on the Continue button, the installer will ask to ‘Read Licence’.  It also shows two-buttons-- Disagree and Agree.To install the Node.js we need to click on Agree.To proceed further we need to specify the Login password to continue the installation.In the below screenshot the user has administrative rights for software installation. So, the admin needs to type the password in order to proceed further.After clicking on the Install Software button, click on the Install button.In the next screen, the progress bar will indicate the installation progress.Post-installation, it will provide us with a summary as below.After closing this window by clicking on the close button, we need to verify whether we have installed the said version of Node.jsTo open command terminal, press Command + Space barThis will open Spotlight search as below.We need to type Terminal and hit enter.Once the terminal is visible, we need to type the following commandnode - vAs we can see it is showing us the node version (v14.15.1) as in the screenshot.So, we have installed Node version 14. Each build is denoted by semantic versioning. The first digit, in this case, is 14, which represents a major release. The second digit represents new features with the release and the third digit represents patch and bug fixes as associated with the major release.Node.js installation by command line.As an alternative method, we can install node.js by the terminal as well. But as a prerequisite, we need to have homebrew in MacOS.We are assuming, we have homebrew installed in our system.And to proceed with the command-line installation, we need to open the terminal and type the following command.brew - vThe above command will inform us about the homebrew version.To update the brew, type the following commandbrew updateAfter the above command has been executed, we need to typebrew install nodeThe installation will take some time, so give some time to the system and be patient.To verify the Node.js installation usenode -vTo verify the npm installation usenpm -vCongratulations, we have installed Node.js and NPM.5. Create-react-app for react app on macOSNow, we are going to install create-react-app on macOS.Create-react-app is a quick way to set up a single page application code with minimal steps and no configuration.Let’s proceed with the installation steps.Please type the following command in the terminal to create a folder with the name react-app. mkdir react-appThen navigate to directory react-app as follows:cd react-appTo verify directory, type command and enter as belowpwdOnce we have confirmed that we are in the right directory type below command.npx create-react-app my-appnpx is a module which is included with npm.The installation steps as shown in the above screenshot will take some time.So, sit back and relax.Once the above command has been executed successfully....….navigate to my-app directorycd  my-appAnd typenpm startWhen the command is executed successfully, it will open the browser at localhost:3000 in the browser.And we can give ourselves a pat on back for the small win!6. Download and Install React (Explicit command)This step is for awareness only.In the previous step, we have not explicitly installed React.js as this is installed with the help of create-react-app package.We can also install the React.js  by using the following command.  And we may need to install the module dependencies on our own.npm install react --save7. File folder and structureWe can see that we have not touched the codebase but found the minimal single page web application running on our macOS.To see the code structure, we need to open the code editor e.g. Sublime, Atom etc.And open the folder my-appAs we can see, there are various folders and at a high level there are below folders:node_modules public srcIn the public folder, we can see index.html. This is the page template.The index.js in src folder is the JavaScript entry point.The app is displaying the code from the App.js in the src folder.In the my-app folder, the package.json is an important file which mentions the app name and module dependencies. Feel free to explore further.8. SummaryIn this tutorial, we have learnt about React.js, and the component-based architecture model in React.js. We also had a high-level overview of the virtual DOM.We touched on the concept of reconciliation, the usage of Node.js in the world of JavaScript and its capability to handle non-blocking I/O output to fulfil client connection requests simultaneously.We have checked two methods for Node.js installation, namely with the package manager and another one by using the command line.To install React.js, we have relied on the create-react-app module for a quick start. We can also install the React.js by command line. To prevent being overwhelmed with too many details we have picked the create-react-app method for this tutorial. We created our first react app and saw it running.To become familiar with the code in terms of development perspective, we quickly checked the important files which are running the app.

Installation of React on Mac

4K
Installation of React on Mac

Hello learners! In this tutorial we are going to learn the installation of React.js library on macOS. React.js is a library which helps developers to develop highly efficient data-driven SPA apps. It is based on functional programming, relies on the concept of immutability and encourages component-based architecture based on Single reusability principle.

Before we perform the installation steps, we need to look at the prerequisites needed for installation.

1. Prerequisite

  • System requirements: mac OS > 10.10
  • Minimum RAM: 4 GB
  • Storage space: 10 GB available space
  • Internet browser: Chrome, Safari, Opera, Microsoft Edge
  • Internet connectivity: 512 kbps and above

2. Introduction to React

In this tutorial, we will install the react library on macOS. Before the installation, we need to have a quick understanding of React.

React is a library which helps web developers and architects to serve the needs of customers having demands of high data flow and fast responsive UIs in the context of data.
It is based on the components-based architecture. The webpage can be represented in the form of Parent and Child based components.  
It relies heavily on Virtual DOM, which acts as a performance optimization to DOM operations.

A Web page which is composed of HTML has a DOM tree, with the help of which the web page is rendered by the browser.

When the user is interacting on a page, it involves addition and insertion of information based on the user activity.  for e.g. A user has added an item to the cart. The cart is showing the updated item to reflect the user’s decision.

Behind the scene, the HTML document undergoes a certain transform which helps to share the updated page. As we have mentioned, the HTML document is represented by the DOM tree. In the above scenario, the DOM needs some changes which involve addition and deletion of certain HTML nodes. This helps to show the relevant information which represents what a user is trying to achieve in the context of updating his buying choice.

For this insertion and deletion operation on HTML DOM, there is a memory cost involved.Virtual DOM acts as a performance optimizer as far as the DOM update operations are concerned.  

It maintains two copies; one is the real copy of the DOM (react DOM) and another one is the change to be done. The process by which minimal change takes place on the react DOM is also studied under the process called reconciliation.

To understand the DOM we can visualise it as a tree.  

The tree has roots and branches. In a similar manner the DOM has the HTML element at the top and down below there are nodes which are connected to the parent node. In terms of tree analogy, we can represent the parent node as the trunk, with various nodes connected to the trunk. And on these nodes, the insertion and deletion operations get optimized by using React.

3. A short intro to Node.js & npm

Ryan Dahl is the inventor of Node.js.
Node.js code is an open source, cross-platform, JavaScript runtime environment that runs JavaScript code. It is based on the Chrome V8 engine. Chrome V8 engine is written in C++. It runs on Windows, macOS and Linux.

After installation of Node.js, we can run the react based project locally on our system during development. This also allows us to deploy our app on the production server.

Some of the features of Node.js include:

a. Uses JavaScript as primary language
b. Non-blocking I/O
c. Supports Asynchronous programming
d. Can handle multiple connections requests by using a single server

Node.js allows us to perform read, write operations on the server. It also provides the functionality to work with the databases.

Npmjs.org is an online code repository of thousand modules (npm) and it allows us to install node modules using basic commands. Some modules are independent and some are interrelated to run effectively, due to dependencies between them.

Node.js hosts several modules and instead of building functionality from scratch, it is easier for us to look for a module and reuse and extend its functionality. Developer projects generally have time and budget constraints. For the developer community, npmjs.org acts as a lifesaver as far as the Node.js based development is concerned.

4. Download Node.js and installation

To install Node.js there are various steps.  

It can be installed by visiting here.

Once we have downloaded the Node.js version based on the operating system, we can perform the installation steps.
One thing we need to note is that NPM is auto-installed with Node.js installation.

We need to click on the package file which we have downloaded node-v14.15.1.pkg

In the below installation we can see it will install Node.js  v14.15.1 and npm v6.14.8

When we click on the Continue button, the installer will ask to ‘Read Licence’.  

It also shows two-buttons-- Disagree and Agree.

To install the Node.js we need to click on Agree.

To proceed further we need to specify the Login password to continue the installation.

In the below screenshot the user has administrative rights for software installation. So, the admin needs to type the password in order to proceed further.

After clicking on the Install Software button, click on the Install button.

In the next screen, the progress bar will indicate the installation progress.

Post-installation, it will provide us with a summary as below.

After closing this window by clicking on the close button, we need to verify whether we have installed the said version of Node.js

To open command terminal, press Command + Space bar

This will open Spotlight search as below.

We need to type Terminal and hit enter.

Once the terminal is visible, we need to type the following command

node - v

As we can see it is showing us the node version (v14.15.1) as in the screenshot.

So, we have installed Node version 14. Each build is denoted by semantic versioning. The first digit, in this case, is 14, which represents a major release. The second digit represents new features with the release and the third digit represents patch and bug fixes as associated with the major release.

Node.js installation by command line.

As an alternative method, we can install node.js by the terminal as well. 

But as a prerequisite, we need to have homebrew in MacOS.

We are assuming, we have homebrew installed in our system.

And to proceed with the command-line installation, we need to open the terminal and type the following command.

brew - v

The above command will inform us about the homebrew version.

To update the brew, type the following command

brew update

After the above command has been executed, we need to type

brew install node

The installation will take some time, so give some time to the system and be patient.

To verify the Node.js installation use

node -v

To verify the npm installation use

npm -v

Congratulations, we have installed Node.js and NPM.

5. Create-react-app for react app on macOS

Now, we are going to install create-react-app on macOS.

Create-react-app is a quick way to set up a single page application code with minimal steps and no configuration.

Let’s proceed with the installation steps.

Please type the following command in the terminal to create a folder with the name react-app. 

mkdir react-app

Then navigate to directory react-app as follows:

cd react-app

To verify directory, type command and enter as below

pwd

Once we have confirmed that we are in the right directory type below command.

npx create-react-app my-app


npx is a module which is included with npm.

The installation steps as shown in the above screenshot will take some time.

So, sit back and relax.

Once the above command has been executed successfully....

….navigate to my-app directory

cd  my-app

And type

npm start

When the command is executed successfully, it will open the browser at localhost:3000 in the browser.

And we can give ourselves a pat on back for the small win!

6. Download and Install React (Explicit command)

This step is for awareness only.

In the previous step, we have not explicitly installed React.js as this is installed with the help of create-react-app package.

We can also install the React.js  by using the following command.  And we may need to install the module dependencies on our own.

npm install react --save

7. File folder and structure

We can see that we have not touched the codebase but found the minimal single page web application running on our macOS.

To see the code structure, we need to open the code editor e.g. Sublime, Atom etc.

And open the folder my-app

As we can see, there are various folders and at a high level there are below folders:

node_modules
public
src

In the public folder, we can see index.html. This is the page template.

The index.js in src folder is the JavaScript entry point.

The app is displaying the code from the App.js in the src folder.

In the my-app folder, the package.json is an important file which mentions the app name and module dependencies. Feel free to explore further.

8. Summary

In this tutorial, we have learnt about React.js, and the component-based architecture model in React.js. We also had a high-level overview of the virtual DOM.

We touched on the concept of reconciliation, the usage of Node.js in the world of JavaScript and its capability to handle non-blocking I/O output to fulfil client connection requests simultaneously.

We have checked two methods for Node.js installation, namely with the package manager and another one by using the command line.

To install React.js, we have relied on the create-react-app module for a quick start. We can also install the React.js by command line. To prevent being overwhelmed with too many details we have picked the create-react-app method for this tutorial.
We created our first react app and saw it running.

To become familiar with the code in terms of development perspective, we quickly checked the important files which are running the app.

Gaurav

Gaurav Mishra

Author

Gaurav Mishra is an expert in user-interface development and user-experience design, with more than 13+ years of experience. Comfortable to work with any kind of technology, he has growth mindset and keep a beginner mind. He has provided workshops and training in UI development, UX design, and Drupal. He has mentored and trained various students around the world. Gaurav has played the key role in the success of many organizations and likes to build products and services from scratch which delight people.  He likes to challenge the status quo to bring out the best from team & reshape the organisation culture. He likes all genres of music, from Indian classical to club music. 

Join the Discussion

Your email address will not be published. Required fields are marked *

Suggested Blogs

How to Install Angular on Windows

In this article, you will learn how you can install Angular CLI on your Windows machine and use it to create real-life Angular Applications/Projects.As you know, Angular is popularly used to create SPAs (Single page applications). Angular is an in-demand, open-source, and modern web application development framework by Google, as compared to all other Libraries and Frameworks like ReactJs, VueJs, MithrilJs, etc.The reasons behind this are many. Angular provides you full access to use all its sub-packages like routing, Async calls, Security, etc.Introduction — What  you will learnIn this blog, we will cover the installation of Angular on Windows. By end of the article, you will understand how to -Install Node/npm on your machine.Use and install Angular CLI globally.Run Angular CLI commands.Create an initial workspace for the application.Run the Angular application in Browser.We assume you are already aware of the basics of web development including HTML, CSS, and JavaScript. (if so, please proceed otherwise we strongly recommand to learn those first before jumping into Angular).In order to continue, you must have — Windows MachineGood Internet ConnectivityWindows user account with all/admin installation privileges where you can install any packages freely.PS: While working with Angular, knowledge of TypeScript is good to have, but is not mandatory. A brief note about Node.jsThe very first thing required to install is Node.js. (If already installed, skip this part and jump to the next part of this blog.)Node.js is again an open-source and cross-platform JavaScript run-time environment that allows to execute JavaScript code outside of a browser (on the Server-side). Node.js is responsible to manage and install all npm dependencies for your Angular application. It provides the required libraries to run the Angular project. Node.js acts as a run-time environment for any Angular application which uses servers over localhost. For more information on Node.js refer to official docs.Angular requires the latest/stable version of Node.js in order to continue. Go to the official website in order to install Node.js on your machine locally.You can install any version, the current one or latest stable version, as per your need. Just click on the button and it will start downloading the package on your machine. Once downloaded click on the icons downloaded and follow the steps, till the installation is completed. To check the version installed of Node.js you can use the following command in a terminal/console window. —node -vornode — — versionNeed for NPM for Angular development As Node.js serves as Run time environment for the application, similarly NPM(node package manager) is used as a dependency management tool for any JavaScript application. NPM will allow us to install the libraries required for any Angular application; for example jQuery, angular-router, angular-http, bootstrap, and many more. You can explore a number of packages available in the npm store here.Note: Once you have installed Node.js it will automatically install NPM on your machine, and you can check the version installed using the below command. npm -vAngular CLI — What it is and complete Installation guideEarlier in the initial days of Angular, developers used to create whole architecture, webpack files, build process, etc for any project on their own from scratch which was quite a time-consuming and lengthy process. To make it easier for the developer, Angular team come up with the easy-to-use tool named Angular CLI. As the name suggests CLI (command line interface) provides a user (developer) friendly interface where you can run commands to make your development life easier and faster. Angular CLI comes with a number of commands available to use from creating a new project, to creating components, creating a routing configuration file, services, and many more.Installation Process of Angular CLITo install the Angular CLI on your machine, open the terminal window and run the following command: npm install -g @angular/cli where -g denotes that CLI is being installed globally to your machine, which means you can create or run any command of CLI anywhere on your machine. Once you run the above command CLI will be installed on your machine, and you can verify the version installed using the following command: ng version To know more about Angular CLI commands, you can refer to this blog which contains a number of commands to use. Creating a Project using Angular CLINow, let’s create our first ever Angular project using Angular CLI. Open your terminal window and type the command below on your machine.ng new hello-world Here ng is our CLI prefix, new denotes that we are creating a new project and hello-world is our project name. You can choose any name you want.After running this command you will find the full architecture of the project in the directory where you run this command. The project folder will be something like below in the image -Angular Project architecture The first file to render on running this application will be index.html which present in the src folder. src folder contains Source files for the root-level application project. assets folder contains all the static assets like images, fonts, etc. node_modules This folder is created while you run npm installby package manager (npm) and it contains all the project dependencies or any third party modules required for the project.  e2e folder contains all the source code related to Test Cases.You can customise it as per your requirements. README.md file is being used as documentation for the app. Package.json configures npm dependencies which are available for the project in the workspace along with their versions specified.  For more details about components/Service and source code you can explore this link. Run the application  one with the installation process of Angular application via CLI, it’s time to run the application locally. Angular CLI comes with complete tool-chain/commands for the development of front-end applications on your machine.Run the following command on the terminal (Navigate to the project directory if you are not in that directory).ng serve or ng serve --open The --open (or just -o) option automatically opens your browser to http://localhost:4200/. ng servecommand will serve your application on localhost server which you can check by navigating to your browser with the below URL http://localhost:4200/. You can customise the port as per your requirement. Accessing Angular Web Interfaceng serve command may take a few seconds to run your application, and once completed, you should see a web page similar to the following. And we are done!Now you can make changes in the default component’s template which is app.component.html .Also, moving forward, you can generate a number of components/service/routing files using CLI commands as per your requirements and keep learning.ConclusionIn this blog you have learnt - What is Node/NPM and how you can install and use it,  What is Angular CLI and how you can use it after installing it on your Windows machine, How to create a new Angular project from scratch using CLI commands and run it. Now that you have basic hands-on knowledge of getting started with an Angular application, you can start exploring Angular further. If you have any questions/doubts related to this blog, please let us know in the comment box below...we would be more than happy to help you out!  
9556
How to Install Angular on Windows

In this article, you will learn how you can instal... Read More

What is NPM in Node JS?

If you have ever worked with Node or any JavaScript framework, then you have already worked with NPM directly or indirectly. Let’s get into the details to understand more about NPM, and learn how to install the latest versions and manage different versions using NVM. In later articles we can discuss mastering basic tools like adding, updating or removing a package. We can also touch base on some advanced features like cache, audits, scripting and more. What is NPM ? To build an application with JavaScript or any other frameworks like Angular, React, Express or Node.js, we rely on a Package Manager to install its dependencies. This package manager is called as NPM. Note: Dependencies are the packages that are used in our projects and part of the package.json. NPM comes with Node.js and is pre-installed with Node. Package.json is the file containing the details of your project such as who created it, and what is the version of node and packages that your project is dependent on. A package is basically a set of files combined together to serve a specific interest of function. If we visit then we can search for different packages based on the functionality we need. For example, if you search for ‘date format’ to support multiple locales, we get 1171 packages (as on the date this article was written) with the topmost package being ‘moment’.  In short, if you are thinking of a functionality to build, then there is a high chance that there is a package already available in NPM for the same. As of January 2021, the current count is 1,493,231 packages.  NPM is used for building lightweight projects that can be easily shared across multiple development teams without dependencies being shared. It allows free use of resources and installs the dependencies only when needed. Install npm Node/npm can be installed on Mac, Windows or Linux as well. Let’s go through the steps involved in installing it on Mac. The approach should be similar for the other Operating systems. For Linux, refer to this. Navigate to and you will see the download section. Under the download, there is the other downloads link which will display different operating systems. Download the one specific to your Operating System. Double click on the node-v**.**.*.pkg to install the node. It is a simple wizard with straightforward steps. npm is installed with Node.js If you are wondering why we are installing node instead of NPM, this is because Node.js installs NPM along with it. This is evident from the below snapshot. How to check that you have node and npm installed The most common way to check if node or npm is installed is by looking at the terminal. Open terminal and Type in `node -v` and you should see the same version display in the installation wizard. The same applies to npm; i.e. You can type in ‘npm -v’ in terminal. On Versions - A note on versions, npm versions, Node versions and Long-Term Support When we are downloading the node.js from, we have two options; i.e. LTS and Current, both pointing to different versions, and currently on the higher version. LTS stands for ‘long time support’ and Current is the version that has the latest features, and offers support for 6 months. After 6 months, odd-numbered releases will become unsupported and even numbered ones will be given LTS status with support for 30 months. So, for all production applications, one should rely on Active LTS or Maintenance LTS releases. Current can be used for any trainings or by source contributors i.e. library authors.  Use a Node.js version manager Imagine you are working on an Enterprise application for an organization which uses a specific version of Node LTS. Also imagine that there is another app (it could be your pet project) that you are working on, for which you prefer to work on the latest version. But how can we have two different versions of Node in the same machine?  To achieve the same, we have NVM (Node.js version manager). Here is the official site for Mac and Linux users. Windows users can visit this link. Follow the installation steps to install the NVM on your machine.  To verify if NVM is installed correctly, open the terminal and type in ‘nvm --version.’ Type in ‘nvm list’ to display all the node.js versions that are installed on your machine. For now, you should be seeing only one version. Say you want to install an outdated version of Node.js, say 12. Type in ‘nvm install 12’ in terminal and it should install the 12 version of Node.js for you.  Now, type in ‘nvm list’ to see both the versions of node that are available for use. To switch to a specific version of node, type in ‘nvm use 12’. To check if it is the active one, type in ‘node -v’. Now you are good to go ahead with your project for that specific version of node.js. ConclusionNPM is one of the world's largest software registries. The Source contributors or developers are from across the world, and use npm to share or use packages. Many organizations/firms use npm for private development as well. NPM has 3 components i.e. Website, Command Line Interface and Registry.  We used the website to identify the package for ‘date format’ above. We learnt to set up private packages as well alongside public. The Command Line Interface is run from the terminal and is used by most of the developers, and the Registry is the public database of the JavaScript software.  
5636
What is NPM in Node JS?

If you have ever worked with Node or any JavaSc... Read More

Node.Js - Net Module

Node.js has a ‘net’ module which provides an asynchronous network API for creating stream-based TCP/IPC servers and clients. It can be accessed using: const net = require('net');  To create a TCP/IPC based server, we use the createServer method. var server = net.createServer(); The ‘server' object is of type net.Server. Let’s explore a few properties, events and methods on this class. First and foremost, the method needed is ‘listen’ which starts the server for listening to connections in async, firing the ‘listening’ event. server.listen(9000, () => {    console.log('opened server on port: ', 9000);  }); To find out on which address a server is running, we can use the address() method on the net.Server instance. If we need to log the port on which the server is running, then we can get this info as well without hardcoding. server.listen(9000, () => {    console.log('opened server on %j', server.address().port);  }); The first parameter of listen is the port in which the server starts listening, and a callback which gets called once it has started listening. A few of the common errors raised are:  ERR_SERVER_ALREADY_LISTEN – server is already listening and hasn’t been closed. EADDRINUSE – another server is already listening on the given port/handle/path. Whenever an error happens, an ‘error’ event is raised. We can hook to it and capture the errors accordingly. server.on('error', (e) => {    if (e.code === 'EADDRINUSE') {      console.log('Address in use, retrying...');      setTimeout(() => {        server.close();        server.listen(PORT, HOST);      }, 1000);    }  }); Whenever a client connects to this server then a 'connection' event is raised and in the callback we can get hold of the client object for communicating data. server.on("connection", (socket) => {    console.log("new client connection is made");  }); The second parameter is actually a callback which has the reference to the connection object, and the client object is of type ‘net.Socket’. To get the details like address and port, we can rely on remoteAddress, and remotePort properties respectively.   server.on("connection", (socket) => {    console.log("Client connection details - ", socket.remoteAddress + ":" + socket.remotePort);  }); Let’s assume that we are developing an application server like bot which needs to take inputs from clients and respond to the client. We can get hold of the client object and send messages to it from the server. As soon as the client is connected, we can send a sample return message on successful connection. server.on("connection", (socket) => {    console.log("Client connection details - ", socket.remoteAddress + ":" + socket.remotePort);    socket.write('SERVER: Hello! Connection successfully made.');  }); Now if there is any data being sent by client, we can capture that data on the server by subscribing to ‘data’ event on the client socket object.  socket.on('data', (data) => {    console.log(data.toString());// since data is streamed in bytes, toString is used.  }); Some of the most commonly used events on ‘net.Socket’ are data, error and close. As the names suggest, data is for listening to any data sent, error when there is an error happens and close event is raised when a connection is closed which happens once. Here is an example in server.js file: const net = require('net');  var server = net.createServer();  server.on("connection", (socket) => {    console.log("new client connection is made", socket.remoteAddress + ":" + socket.remotePort);    socket.on("data", (data) => {      console.log(data.toString());    });    socket.once("close", () => {      console.log("client connection closed.");    });    socket.on("error", (err) => {      console.log("client connection got errored out.")    });    socket.write('SERVER: Hello! Connection successfully made.');  });  server.on('error', (e) => {    if (e.code === 'EADDRINUSE') {      console.log('Address in use, retrying...');      setTimeout(() => {        server.close();        server.listen(PORT, HOST);      }, 1000);    }    else {      console.log("Server failed.")    }  });  server.listen(9000, () => {    console.log('opened server on %j', server.address().port);  }); ‘net’ module also has another class type net.BlockList. This helps in controlling or disabling the inbound or outbound traffic based on rules from any specific IP addresses, IP ranges, or IP subnets. Here is an example snippet from the documentation: const blockList = new net.BlockList();  blockList.addAddress('123.123.123.123');  blockList.addRange('10.0.0.1', '10.0.0.10');  blockList.addSubnet('8592:757c:efae:4e45::', 64, 'ipv6');  console.log(blockList.check('123.123.123.123')); // Prints: true  console.log(blockList.check('10.0.0.3')); // Prints: true  console.log(blockList.check('222.111.111.222')); // Prints: false  // IPv6 notation for IPv4 addresses works:  console.log(blockList.check('::ffff:7b7b:7b7b', 'ipv6')); // Prints: true  console.log(blockList.check('::ffff:123.123.123.123', 'ipv6')); // Prints: true Now that we have the server up and running, we can build a client to connect to the server and start sending bi-directional data. This client could be another node.js application, java/c# application working with TCP sockets, asp.net MVC application talking to node.js TCP server or any other client application. But that client application should have TCP based communication mechanism support. Since we are talking about ‘net’ module, let’s build the client application as well using net module. Moreover, it supports TCP based communication as well. 'net’ module has a factory function called ‘createConnection’ which immediately creates a socket and establishes a connection with the server running on the specified port.  Let's create another client.js file and create a connection. const net = require('net');  const client = net.createConnection({ port: 9000 }, () => {    console.log('CLIENT: I connected to the server.');  }); The first parameter contains the details of the server. Since we are running the server locally, providing the port number would suffice for us as the host default address is localhost for TCP connections. The second parameter is the callback called once the connection is made successfully with the server. The returned value is of type net.Socket which we have learnt about earlier. Let’s hook to ‘data’ event and console log the information sent by the server. client.on('data', (data) => {    console.log(data.toString());    client.end();  }); Here we are not persisting the TCP connection and ending it once we receive a message from the server. We can subscribe to close event and handle any clean up needed. client.on('end', () => {    console.log('CLIENT: I disconnected from the server.');  }) The output on the client terminal has to be:  CLIENT: I connected to the server.  SERVER: Hello! This is server speaking.  CLIENT: I disconnected from the server. Output on server terminal will be: new client connection is made ::ffff:127.0.0.1:51680  CLIENT: Hello this is client!  client connection closed. In case we want to continue the client instance till the server is alive, we can comment out the ‘client.end()’ call. Any message in the terminal can be processed and sent to the server. For reading the text from terminal we use the readline module. Here is a complete example: const net = require('net');  const readline = require('readline');  const rl = readline.createInterface({    input: process.stdin,    output: process.stdout  });  const client = net.createConnection({ port: 9000 }, () => {  console.log('CLIENT: I connected to the server.');    client.write('CLIENT: Hello this is client!');  });  client.on('data', (data) => {    console.log(data.toString());    //client.end();  });  client.on('end', () => {    console.log('CLIENT: I disconnected from the server.');  })  rl.on('line', (input) => {    client.write(`CLIENT: ${input}`);  }); Both client and server now can communicate. When we type any text in client terminal, that is communicated to the server, and the server can respond back to the client via terminal.  ConclusionWebsockets help in creating a full-duplex connection for sending messages from client to server and vice-versa. Some of the real-time use cases that you may be familiar with are chat apps, IoT devices and so on. The Node.js net module helps you to create a server application easily, which can communicate to any type of client application like a web browser, mobile app, IoT device, Node.js client, or anything that knows TCP where the messaging need is bi-directional with streams. ‘net’ module can be used to communicate among child processes within a node.js server as well. 
5630
Node.Js - Net Module

Node.js has a ‘net’ module which provide... Read More