Okay Tamal, you hear a lot about the fancy new Node.js thing.
You have installed it on your computer many years ago but not really sure what it is and what it does.
Well, today is your treat Tamal! I am going to teach you the very basics of Node.js with this helpful beginner-friendly tutorial.
By the end of this tutorial, you will learn how to put some words on the screen in the browser. But don’t underestimate it, this little introduction will help you build a solid foundation for building future SaaS like applications you have always wanted to build.
So let’s get started!!
Node compared to PHP, Python, Ruby on Rails:
People like to compare Node.js with PHP, Python and many other languages. But one thing you should know first,
It’s a platform that runs on a computer. It lets you use JavaScript to do various tasks.
With Node.js you can automate various tedious tasks on a computer. You do it by writing JavaScript code.
Such a tedious task could be converting a SASS file to CSS file instantly on save. So you don’t have to recompile it again and again.
Another boring task could be refreshing the browser everytime you hit save on your HTML document.
Node.js let’s you do all these things and it’s more web developer-friendly.
With the same technology, you can write server-side web applications.
Applications such as Twitter, Reddit, an e-commerce site or even a social network.
With Node, it lets you write your code in JavaScript for both front end view and back end scripting. For a forgetful person like you, it’s easier to just stick with one language and its paradigms than having to switch between JS and PHP every now and then.
Installing Node and other tools
You have to simulate your computer to act like a server. Just like you used XAMPP to run WordPress and PHP files. Only this time, it’s slightly less cumbersome.
Node commands are issued using a command-line interface. The default CMD program which comes with Windows is not going to cut it and is too lame.
So go ahead and download and install Git on your computer.
This will give you a neat little Bash terminal which you can use to type in various commands.
Git bash terminal in Windows
You have already taken the command line course from Codecademy, so it won’t be a pain to learn how to move from one directory to another.
To make things even more easier, you can just right click on a folder and click on Git bash here, this will open the terminal window with the selected document path already typed in.
Git bash here -opens up a terminal with the same path
To build stuff with Node, you will need to install Node ..duh!
So go to the official page of Node.js, download the installer and install it on your computer. If you want to know which version of Node to use, here you go.
Open your terminal anywhere and type:
node -v
This will show the version of your node, and it means you have correctly installed it.
Do another command:
npm -v
This will show you another version. NPM stands from Node Package Manager and it’s like a plugin repository of Node.js. Anything you want to implement on your application, you have to use NPM to install that package.
Let’s say you want to build an app which gets tweets from a twitter account. Instead of writing all the configuration/authentication yourself, you can install an existing package that does it for you.
I will also need a code editor to edit the node files. I use Atom code editor so that’s taken care of, no worries.
Now that it’s ready let’s set up a basic application.
Creating a super lame, “Hello World” application?
I hate all these tutorials where they show me how to write “Hello world” on the screen. Big deal!
And I am really pissed to write one myself.
You know what Tamal… we are not going to write a lousy “Hello World” program. We will write something different.
Will write “Hello Tamal”
..hmm that’s a little bit appropriate because when I put some text on the screen, the world does not sees it. Only I will see it.
But it will still be pretty lame. And it’s not even a real application.
Trust me on this!
It’s going to help you learn the ropes of building a modern web application.
To start a new site, I am going to create a new folder, and just name it node
I will right click on the folder and open that folder in Atom editor.
Open folder with Atom editor
Inside the folder, I will create a new file called app.js
The app.js will act as the central index file of my application. I can call it anything I like but the general convention is to name it app.js or server.js (that’s what I know so far)
I am going to right click on the node folder once again, this time to open git bash.
From the Git Bash/Terminal:
Type in:
npm init --yes
And hit enter.
The npm init command will create a package.json file on my folder with these contents:
The package JSON file is just a simple configuration file. You don’t have to do anything at this moment and when you further build your application, it will auto-update itself with various package information.
The --yes at the end of the command will fill the configuration file with sample data. Otherwise, it will prompt you for the name, version etc.
You don’t have time to set all these for this draft application anyways!
Okay now we have the app.js file and package.json file in our node directory, it’s time to install the first module.
Go to the terminal and type in:
npm install express
After a few seconds the new express module will be installed on your project directory. You will see a new folder inside your project called node_modules with bunch of files. All these files came with the express module.
When building node applications, express is the GO TO module for building out bunch of stuff. You will learn it as you work your way through Node, here’s why Express JS is used in Node. For now, just know that it’s a very popular framework for building node based apps.
Write 4 new lines of code in app.js
Open up app.js and write these four lines of code..
First line (adding express into our project):
const express = require('express');
We are using the require function built into node.js to call the express module. Then saving it to a const called express.
Node will look for a module called express in the node_modules folder.
Second line (running express in our app):
Type:
const app = express();
This line will run an instance of express and save it to the const called app. This way we will now refer to this variable called app whenever we need to use various methods of express.
Third line (create a url and display some text on the screen):
You will love this one. You will create a url path and the text to display on that url. Type:
app.get('/', (req, res) => {
res.send('Hello Tamal');
});
This is called a route.
The app.get() method takes in two parameters. The first parameter is the url of the page to load. When I set '/' I am referring to the home or index page to route to.
The second argument is a function which takes an HTTP request, and a response as their parameters. (It’s the arrow function which I love to use)
Next I put the res.send() method and send some text to display when I will load that url.
This will display the lame text on the screen.
Fourth line (Run the app on a port):
Finally we write a method called listen() method on the app to listen on port number 3000:
app.listen(3000);
The final code will look like this in app.js file:
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello Tamal');
});
app.listen(3000);
Final step (Running your server to see the text):
Now go to your terminal (Git Bash) and type:
node app.js
This will run the app on this url of your computer -> localhost:3000
You will see the lame text displayed on screen:
Tada!!
I know it’s super lame. All this hard work just to show a lousy “Hello world” text?
But Tamal, you just learned how to take the biggest step for building complex web applications.
I’m proud of you!
Now that you know the ABCs of node, take your learning further by taking these resources:
- Express/Node Introduction from MDN (Mozilla Developer Network)
- Learning Node.js by Alexander Zanfir (Lynda)
- LearnNode from Wes Bos (Not ideal for beginners)
Found this post helpful? Please give it a CLAP!
Hey, I am writing new blog posts about Node JS and JavaScript on my blog. Go ahead and check them out here.