Node.js Tutorial for Beginners in Visual Studio Code
With the evolution of web development, faster and better technologies are coming day by day to enhance our workflow. Node.js is one of them.
Previously, JavaScript programming language was only restricted inside a client-side web browser environment. But with the advent of Node.js, it provides us the ability to execute JavaScript code on the server.
This significant invention opens up a door for hundreds of possibilities for JavaScript front-end developers. Now, you don’t have to learn a separate language in order to become a full-stack developer. You can simply use your existing JavaScript skills on both front-end as well as the back-end of a website.
This tutorial will cover the “What, Why and How” for beginners who are completely unfamiliar with the word Node.js. So, let’s jump into the actual content of this article to understand it.
What is Node.js?
Different web browsers use some kind of an engine to understand the code written in JavaScript programming language. Google Chrome uses “V8”, Microsoft Edge has its own “Chakra” while Mozilla Firefox is packed with “SpiderMonkey”.
The idea behind the development of Node.js is that a software engineer named Ryan Dahl wants to use the engine of web browsers for any kind of JavaScript-based software development. So, he reviewed the pros and cons of different browser engines and found that Chrome’s V8 is way better than its competitors. He decided to use it for his ambitious project.
Ryan Dahl uses C++ programming language to create a runtime environment for JavaScript that is completely built on top of Google Chrome’s V8 engine. He named this new project “Node.js”. Now, through Node.js you can use JavaScript code to create a website or a full-fledged desktop application, the ball is in your court now.
What can I do with it?
Mostly Node.js is suitable for creating real-time applications like online games or chat systems. But, in general, it can be used for any kind of software development. It provides complete flexibility for creating a Content Management System (CMS), Blog, Social media or an eCommerce store.
A lot of companies prefer Node.js for developing their RESTful API’s. The reason is simple, unlike other web programming languages or frameworks it supports non-blocking asynchronous programming. In turn, it makes our apps very memory efficient.
Let’s Setup Node.js
To start writing server-side code in JavaScript we first need to download and then install Node.js on our computer system. You can use their official website to download the original software.
On their home page, you might have noticed two buttons. One for the “LTS” version and the other one is for the “Current” version. In most cases, we only need to download the LTS (Long Term Support) version because it is very stable. But, if you want to try bleeding-edge features of Node.js then I would recommend you to install its “Current” release.
A point to be noted is that these days the developers of Node.js have integrated npm (Node Package Manager) inside Node. It is a great utility tool that helps you automatically manage the dependencies of your projects. So, from now onwards you will get both software under one roof.
Download and Install Visual Studio Code
There are tons of code editors and IDE’s (Integrated Development Environment) that allows you to write JavaScript code. Among them, Visual Studio Code is a popular choice of many Node.js developers. It is powered by the tech giant Microsoft and is completely free for personal or commercial use.
It comes with a lot of advanced features that are necessary to increase the productivity of a programmer. Some of them include real-time debugging, IntelliSense, ability to add extensions as well as built-in support for version control using Git.
Hello World Program Using Node.js
At this point, you have Node.js and Visual Studio Code installed on your computer. So, let’s get started by writing a hello world program.
First of all, create a project directory where you will store all of your code files. For now, we’ll only create one file.
Let’s name that file “index.js”, after all, it will contain JavaScript code. Now, put the below source code inside it and save the file.
console.log('Hello World');
To see the above code in action, simply open a command prompt or terminal window in the project folder and execute the below command. It will display “Hello World” in the console.
node index.js
Mini Project
Node.js is packed with a lot of commonly used modules which allows us to do plenty of stuff. For example, it has an “http” module that provides us a head start if we want to create a server. This core module is mostly used when we develop web-based services using Node.js.
Let’s move ahead and use it to set up a local server on our computer so that we can view some output in a web browser.
At first, create a folder that will be used to hold this project’s source code files. Then, create a file named “server.js” where we’ll write the code. For now, type below code inside this file, I’ll explain it in a moment.
const http = require('http')
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.write('This output will display in a web browser')
res.end()
}
})
server.listen(5000)
console.log('Listening on port 5000')
At the beginning of the above code, I’ve included an “http” module which will be used to create localhost or a local development environment.
Then, I created a server using createServer() method of http module. It accepts 2 parameters, one for “request” and another for a “response”.
The request contains the metadata or the header that provides information like what page to visit etc. Whereas response is used to return data towards the user.
In the conditional statement, I check the URL path of request and if it is from the root page then simply display output using write() function of response. Finally, I closed the response by calling its end() method.
Later on, I ordered the Node.js server to listen on port 5000 and display a console message if everything works as expected. You may change the port if you like, but for the purpose of this tutorial, let’s use it as it is.
It’s time to see our code in action. To do so, open the terminal inside the project folder and run the below command.
node server.js
Now open below URL in any web browser to view the output of our mini-project.
http://localhost:5000/