Demo-VSCode.md

# Introduction to Node.js #

---

## Overview ##

Node.js is a runtime environment and library for running JavaScript applications outside the browser. It is mostly used to run real-time server applications and its performance shines with non-blocking I/O and asynchronous events.

In this demo we will show simple code examples from the classic Hello World app to a basic HTTP and TCP server. We will write code to read a file asynchronously. Finally, we'll show the use of Node Package Manager to install/update Node.js packages in Node project.

### Goals ### In this demo, you will see how to:

1. Create a simple Hello World application using Node

2. Create a basic HTTP server

3. Create a basic TCP server

4. Read files asynchronously vs synchronously

5. Install and update Node packages through the Node Package Manager

### Key Technologies ###

• Node.js
• Visual Studio Code

### Setup and Configuration ### Follow these steps to set up your environment for the demo.

1. Download Visual Studio Code for your platform and follow the installation and setting up instructions.
2. Install Node.js.
3. Open File Explorer and browse to the source/Setup folder.
4. Copy the nodecamp-introtonodejs-snippets folder and paste it into the Visual Studio Code Extensions folder to install the JavaScript snippets for this demo. Depending on your platform it is located:

• Windows: %USERPROFILE%\.vscode\extensions
• Mac: $HOME/.vscode/extensions
• Linux: $HOME/.vscode/extensions

### Using the Code Snippets ###

Throughout the demo document, you will be instructed to insert code blocks. For your convenience, most of this code is provided as code snippets, which you can access from within Visual Studio Code to avoid having to add it manually.

Note: Inside the source code you will also find an End folder containing the code that results from completing the steps in the demo. You can use this folder as guidance if you need additional help as you work through this demo.

---

## Demo ## This demo is composed of the following segments:

1. Creating our first Node.js application
2. Creating a basic HTTP server
3. Creating a basic TCP server
4. Reading file content synchronously vs asynchronously
5. Introducing Node Package Manager

### Creating our first Node.js application ###

1. Open a command prompt/terminal according to your platform.

2. Run mkdir NodejsConsoleApp to create a new directory and then cd NodejsConsoleApp to navigate to it.

   

   Creating a new working directory for a Node.js Console Application

3. Run npm init -f to initialize the current folder with a package.json file.

   

   Initializing a Node.js Console Application with a package.json file

4. Run code . to open the current directory with Visual Studio Code.

5. In the Explore view, create a new app.js file by clicking the New File icon and fill its content with the following code snippet.

   (Code Snippet - NodeJsIntroduction-HelloWorld)

   console.log('Hello world');

   

   Creating the app.js file

6. Go back to the command prompt/terminal and run node app.js to execute the Node.js console application.

   

   Running the Node.js console app

### Creating a basic HTTP server ###

1. Go back to Visual Studio Code and replace the content of the app.js file with the following code snippet:

   (Code Snippet - NodeJsIntroduction-CreateHttpServer)

   var http = require('http');
   
   var server = http.createServer(function (request, response) {
   	 response.writeHead(200, { "Content-Type": "text/plain" });
   	 response.end("Hello World\n");
   });
   
   server.listen(7000);
   
   console.log('Navigate to http://localhost:7000');

2. Switch back to the command prompt/terminal and run the node app.js command again.

   

   Running the Node.js HTTP server

3. Open your browser and navigate to http://localhost:7000.

   

   Navigating to the HTTP server

4. Stop the HTTP server by pressing Ctrl + C in the command prompt.

### Creating a basic TCP server ###

1. Switch back to Visual Studio Code. In the Explore view, create a new server.js file by clicking the New File icon and fill its content with the following code snippet.

   (Code Snippet - NodeJsIntroduction-TcpServer)

   var net = require('net');
   
   // The handler argument is automatically set as a listener for the 'connection' event
   var server = net.createServer(function (socket) {
   	 console.log("Connection from " + socket.remoteAddress);
   	 socket.end("Hello World\n");
   });
   
   server.listen(7000, "127.0.0.1");
   
   console.log('TCP server running at 127.0.0.1:7000');

   

   Creating a server.js file

2. Add another JavaScript file named client.js and copy the following code snippet in it:

   (Code Snippet - NodeJsIntroduction-TcpClient)

   var net = require('net');
   
   var client = new net.Socket();
   
   client.connect(7000, "127.0.0.1");
   
   client.on('data', function (data) {
   	 console.log('Data: ' + data);
   	 client.destroy();
   });
   
   // Add a 'close' event handler for the client socket
   client.on('close', function () {
   	 console.log('Connection closed');
   });

   

   Creating a client.js file

3. Back in the command prompt/terminal, run node server.js.

   

   Running the TCP server

4. Open a second command prompt/terminal in the same directory and run node client.js.

   

   Running the TCP client

5. Close the client command prompt/terminal and stop the TCP server by pressing Ctrl + C in the command prompt/terminal running the server.

### Reading file content synchronously vs asynchronously ###

1. Switch back to Visual Studio Code and add a new JavaScript file named file-reader-sync.js.

2. Copy the following code snippet in the file-reader-sync.js file you created.

   (Code Snippet - NodeJsIntroduction-FileReaderSync)

   var fs = require('fs');
   
   var contents = fs.readFileSync('package.json').toString();
   console.log(contents);

3. Switch back to the command prompt/terminal and run node file-reader-sync.js.

   

   Reading a file synchronously

4. Now, back in Visual Studio code, add another JavaScript file named file-reader-async.js.

5. Copy the following code snippet to the file-reader-async.js file.

   (Code Snippet - NodeJsIntroduction-FileReaderAsync)

   var fs = require('fs');
   
   fs.readFile('package.json', function (err, buf) {
   	 console.log(buf.toString());
   });

6. Run the node file-reader-async.js command.

   

   Reading a file asynchronously

### Introducing Node Package Manager ### Node Package Manager (NPM) is the official package manager for Node.js. It is bundled and installed automatically with the environment. NPM runs through the command line and manages dependencies for an application. It reads the **package.json** file and installs the dependencies found there in the **node_modules** folder.

Running npm install <package-name> --save installs the package and saves the dependency in the package.json file.

1. In the command prompt/terminal, run npm install express --save.

   

   Installing express dependency using npm

2. In Visual Studio Code show the new express dependency in the package.json file and in the node_modules folder in the Explore view.

   

   Showing the installed dependency in Visual Studio Code

---

## Summary ##

By completing this demo, you have learned how to create a new Node.js project by using Visual Studio Code as well as how to create a basic HTTP and TCP server and read files asynchronously. Additionally, you have seen how to use the Node Package Manager to install/update Node packages in your project.

---