Hi there...

Introduction

Long time no see. Today I am resuming my writing journey once again. Hope my writing skill do not abandon me today. My first time writing a blog about the back end but with the same style. So, let's jump right in...

Prerequisites

I assume you do have a good knowledge of Html, CSS, and Javascript. If not, I suggest you have a good read of important topics of those subjects and then read my article(you may read my previous articles as well). If you are stubborn and like my articles way too much( no pun intended😂), then please go through and I will give a brief explanation of each and every keyword.

What is Backend?

Backend frameworks are required to connect the Ui to the database for data transfer and create a fully functional website. We can use many backend frameworks like Django, Ruby on rails, Spring, Laravel, etc. But here we are using express js which is created using Javascript and is a node js framework. Node js is the runtime environment for Javascript. For using any other framework, we have to know an additional programming language like we have to learn python for Django, ruby for Ruby on Rails, and PHP for Laravel. But we need to learn only Javascript for Express which we learned in the front end🥳. Very smart, isn't it? (or we are just lazy...)

Installation:

Now, enough reading... I want you to straighten up and switch to your own mac/pc setup. Now, you are going to code along. Coding is not a spectator sport. You are not going to learn to code if you do not hit the keyboard with your own fingers(harsh truth...)

Now that you are ready, open the express documentation in your browser. Go to "Getting started" from the navbar. If you do not have node js installed on your machine, you can go to Node js documentation.

Now follow the instructions one by one:-

1. Open your terminal app. If you are on windows, you can use "Git bash".

2. Make a directory/folder where we will create our App.

    mkdir myapp
   

3. Open the folder "myapp".

    cd myapp
   

   For those who do not know Linux commands,

   mkdir means to make a directory,

   cd means open directory.

   Now, you can practice other commands.

4. Now, it is time to create the package.json file in our application.

    npm init
   

   Here, npm means "Node package manager". It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. In layman's terms, it contains useful libraries. Init means to initialize that library.

5. After running the previous command, you will get many options and for now, do not change that press enter every time for the default behavior.

6. Congratulations, you have initialized your app. Now, you are ready to install express.

    npm install express
   

7. Now, Let's go for our first "Hello world" in express👌. Open the myapp folder in your favorite text editor.

8. Open the package.json file. Within the "scripts" change the "test" to "start" and on the left-hand side of the JSON object, please write "node index.js".

9. Create an "index.js" file within the myapp. Now, log the value "Hello world".

    console.log("hello world")
   

10. Now, open the terminal within your text editor and run "npm start".

11. Now, you have got your output as "hello world" in your terminal.

Congratulations, you have got your first hello world program...

Wait what...you guys want that in the browser?

Okay then, I will do that too...

Final process:

Now, this is the time to show "hello world" in the browser. We are going to follow five steps here. I will write them in simple words.

1. Bring express.

2. Assign the express to some variable. This variable will be used for all of the actions(we will learn that very soon).

3. Assign the port.

4. Get your app "listen" to the port.

5. Define routes.

Now, let's get our hands dirty...

In your app, delete the console.log line and start afresh.

Now, you have to follow the previous 5 steps and now we code that.

1. To bring express, we define a const (say express).

    const express = require('express')
   

2. Now, define a const app that holds all of the functionalities of the express.

    const app = express()
   

3. Now, let's define the port.

    const port = 3000
   

4. Now, do the "listening" task.

    app.listen(port, () => {
      console.log(`Example app listening on port ${port}`)
    })
   

5. The last and the most important part.

    app.get('/', (req, res) => {
      res.send('Hello World!')
    })
   

   The routing and the message to be shown are passed within the arrow function.

   A brief explanation for the newbies, get is an HTTP verb, and '/' is used as we want our results on our homepage. The arrow function has req(request) and res(response). We use the function to "send" the message which is going to be shown on the browser.

6. Now you can run "npm start".

Open "localhost:3000" in the browser.

Bonus:

We can use a subdomain as the destination of the route.

app.get('/game', (req, res)=>{
  const game = {
    user: "barun",
    rank: "grandmaster",
    stars: 200,
  }
  res.status(200).json({game})
})

Give a look at this little piece of code.

Here, instead of '/', we give '/game'. So, if you go to 'localhost:3000/game', you will find the JSON object(the cont game). Status code 200 denotes success. If you can use the Postman application, you can check it thoroughly. We are using "{}" to put any Javascript object within our program. Thus, we can create another route for a subdomain of the webpage.

Okay, then we will try not to go too much further. So, let's wrap up here.