Node.js: Setting up a Server ๐Ÿ”Œ โšก๐Ÿ˜Ž

๐Ÿฅ” ๐Ÿฅ” ๐Ÿฅ” Who needs optimum? Iโ€™ve got a case of 60 count GPODs in my truck ๐Ÿ‘ฉโ€๐ŸŒพ ๐Ÿ‘จโ€๐ŸŒพ ๐Ÿง‘โ€๐ŸŒพ .

Introduction

Everyone has a moment in their coding career where they realize they generally enjoy programming. We all have our own cherished experiences making for great anecdotes in super cool social settings. For me, one of these experiences was linking my back-end server(Ruby on rails ๐Ÿš‚ ๐Ÿ’Ž ๐Ÿ‘ ) with my front-end javascript(๐Ÿ“œ ๐Ÿ–Š ๐Ÿ˜Š ) client. It was one of the most satisfying and self-validating things I had done so far. This โ€œDr. Frankenstein-sequeโ€ experience was like electricity! I was inspired to build more, optimize more, and add more features! ๐Ÿ˜ˆ

Today in this blog, Iโ€™ll be covering how to set up a server with vanilla Node.js. I will go through each step and explain how things work. Hopefully, this under the hood approach will help frame up your understanding for even more complex concepts and abstractions using Node.js. Setting up a Server is a fundamental building block, so spend time on the concept is really key ๐Ÿ”‘ to understanding why things work. It will pay off down the line when you dive into choosing a Web-framework like Express.js(popular).

Letโ€™s dig in! ๐Ÿ•ณ ๐Ÿ‡ ๐Ÿฆก

Installing Node.js

Link to Super Cool Node.js Blog ๐Ÿ˜Ž ๐Ÿช ๐ŸงŠ:https://ineedmoreplates.medium.com/learning-node-js-8288e0411957

In case you havenโ€™t been keeping up with all my blogs. I wrote a nice blog + setup guide for installing Node.js. I highly encourage you to give it a read. It explains Node.js in more detail. You get an easy-to-follow step-by-step guide on how to install Node.js(towards the bottom).

Letโ€™s talk about Setup :

Shameless Chrome Promo ๐Ÿคฆโ€โ™€๏ธ ๐Ÿคฆโ€โ™‚๏ธ ๐Ÿคฆ
In case you forget:User/Client(Browser): Think of what's on your Device. Example: "Safari", "Chrome","Mozilla", etc.URL: Think of this an encoded and human-readable address. Well all use it when typing in a web address on our browsers. Domain: an identification string that defines a realm of administrative autonomy, authority or control within the Internet.Request: The Domain sends a request to the server with an IP address belonging to that Domain.IP address: unique ID used to identify each device on a Domain(DNS).Server: Hardware, We will be writing our code for it.

Before we start writing any code, letโ€™s quickly review how a web page works. Imagine a User types in a URL address. Letโ€™s say itโ€™s something pretty common, like googling cat videos ๐Ÿˆ , read a tech blog ๐Ÿค“ , buy a cast iron-pot on Amazon ๐Ÿฅ˜ ! Whatโ€™s happening?

Yup, itโ€™s Meta, but hear me out. This will bring additional understanding with each keystroke we take. Itโ€™s easy to remember patterns in coding, but the skill lies in understanding and conveying what the heck we just did?

User types in URL for a Webpage:

  1. User hops on a browser
  2. The User enters in a URL
  3. URL is passed to a Domain
  4. Domain sends a request to a server (HTTP)
  5. The Server receives the request
  6. If everything passes, the Server grabs data from the Database
  7. The Server returns a response ( HTTP page)

Wow, there are a few steps, then you realize, huh? There are even more when we talk about log-in, cookies, security, etc. The idea is we want a basic understanding here.

Since Node.js is a back-end run-time for Javascript will be writing our code to the Server(Back-end)itself. In this list, that would be step 5.

Judging by this list, we can expect to deal with Incoming requests, Outgoing responses, and some communication with a Database. We also know what will be sending back to the User will be an HTTP page.

Just a friend reminder: HTTP and HTTPSHTTP: Hyper Text Transfer Protocol, it's a Protocol or way of transfering Data which your Browser or Server can understand.HTTPS: ๐Ÿ”’ Hyper Text Tranfer Protocol Secure, It's HTTP + Data Encrpytion during Transmission. Way more secure, great for online banks, E-trading, etc. ! (look at the ๐Ÿ”’ icon next to your URL, that's HTTPS ๐Ÿ˜‰ )

Letโ€™s Build ๐Ÿ”จ ๐Ÿงฐ ๐Ÿ›  :

Today Iโ€™m building with :1. OS operating system(if not, just keep reading) ๐ŸŽ ๐Ÿ› ๐Ÿ 2. Vscode ๐Ÿค“ ๐ŸŽน ๐Ÿญ 3. Node.js ๐Ÿ‘ฉโ€๐Ÿ”ฌ ๐Ÿ‘จโ€๐Ÿ”ฌ ๐Ÿง‘โ€๐Ÿ”ฌ4. Basic Understanding of Javascript ๐Ÿ“œ ๐Ÿชถ ๐Ÿ˜Š 

Pre-steps:

  1. Letโ€™s start by creating a new folder in our file directory. You can name it whatever you like. I prefer something short and easy to recognize.

2. Letโ€™s open up our code editor. Iโ€™m a Vscode junkie. Feel free to use whatever you like.

3. Letโ€™s open a terminal and navigate our way to the create folder

Step-by-Step:

Now that we are all setup. Letโ€™s dive into some step-by-step coding -paired with some helpful explanations. Donโ€™t be afraid to test things out on your own. Itโ€™s the best way to understand things work.

Step 1: letโ€™s create a file called app.js. This will be creating our server here.

Step 2: We Will be importing a baked-in Core Module found in Node.js.

Looks like this:const http = require('http'); <-- This is a global scope

*** require(), Node.js syntax for importing, it takes a string argument

Step 3: The HTTP Module has a fair selection of methods. Will be using the .createServer() method.

Looks like this: const http = require('http') <-- importhttp.createServer(); <-- access method, JS style

Step4: .createServer() is a special function that takes a function as an argument. This function needs to take 2 arguments as a response and a request. We can also name this function and its arguments whatever we want. Yet Iโ€™m a huge fan of arrow syntax + anonymous functions. Itโ€™s worth looking into as itโ€™s easier to read and cuts down on writing code. Check out my example below.

const http = require('http')http.createServer((req,res) => {}); <-- clean & easy to readres = response
req = request

Step5: .createServer() as the name implies outputs a server. Will save that to a const variable and have our function return a response.

const http = require('http')const server = http.createServer((req,res) => {console.log(res) <-- let's just console.log for now ๐Ÿ˜Š}); <-- clean & easy to read

Step6: Letโ€™s find a Port ๐Ÿšข . We will be listening for our Server variable. This method will listen for a port address. Letโ€™s plug in the standard 3000 as an argument. Will also return a console.log of the res argument.

const http = require('http')const server = http.createServer((req,res) => {console.log(res) <-- let's just console.log for now ๐Ÿ˜Š});server.listen(3000); ๐Ÿงšโ€โ™€๏ธ "Hello, hey!!!"

Step7: In our terminal will run our file named app.js. Your server should spin up. Note the blinking cursor. If you need to end, the server uses the shortcut โ€œCtrl + cโ€ to end the server.

Looks like this:node app.js <-- ctrl + c kills server! 

Step8: Letโ€™s run our Server and open up a browser. After that will move back to our terminal and take a peek. You should see some new activity in your terminal.

localhost: 3000 <-- type in URL field of your browser!

Conclusion

AHHHHHHHHH YEAHHHHHH; Itโ€™s Server Time!!! ๐Ÿ’ƒ

Congrats! ๐ŸŽŠ Youโ€™ve deployed your first Server on Node.js. Can you feel that inspirational energy! Now go build something cool! The power of a javascript run-time environment is yours to command. If you liked this blog, donโ€™t be afraid to give me some claps. Happy Coding all ๐Ÿ˜† ๐ŸŽน ๐Ÿญ!

Links:

Great Course on Node.js: https://www.udemy.com/course/nodejs-the-complete-guide/My Node.js: https://ineedmoreplates.medium.com/learning-node-js-8288e0411957Require function: https://nodejs.org/en/knowledge/getting-started/what-is-require/Create server method: https://www.w3schools.com/nodejs/met_http_createserver.aspListen method: https://www.w3schools.com/nodejs/met_server_listen.asp

Career Changer, Software Engineer & Web Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store