DEV Community

loading...
Cover image for Making your first express js server (with explanation)

Making your first express js server (with explanation)

codewithashish profile image code-withAshish ・3 min read

express js is a very popular framework built on node js itself and it provides an array of feature and is powerful to the extent that many major tech companies use it in their productions too so with all that in mind let's begin our first step in this express js series !!!

Step 1

Setting up Editor

First of all we will open any code editor, personally i use Vs Code you may use any available like Atom Sublime Text etc...

Alt Text


Step 2

Installing required packages using npm

I am assuming that you have downloaded and installed node js if not just click here and download it and set it up (it's very easy) then open up your terminal in the same directory you are working in and do the following

npm init -y
Enter fullscreen mode Exit fullscreen mode

npm comes with node js so don't worry, you don't have to install it seperately

and after it you should see a file called package.json created by it which looks like this

Alt Text

and after getting this done we again open our terminal and then install express js using npm by using following command

npm install express
Enter fullscreen mode Exit fullscreen mode

It should look like this if succesfully done and if any problem occurs try running it as sudo or for windows as an administrator and make sure you have an internet connection to download the package

Alt Text


Step 3

Writing the script for express js

Now simply make a file with .js extension (because we are working with javascript obviously) with any name , I am naming it server.js

Alt Text

Now copy this code in your file i will be explaining it below so don't worry :)


const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send("Hello world");
});

app.listen(3000, () => {
  console.log("Server is Running on Port 3000");
});

Enter fullscreen mode Exit fullscreen mode
Explanation
  • In the first line const express = require("express") we have included the package in our file it is similar to import in python if you are from python background.

  • Then we have initialized a variable called app in which we have stored all the functions of express const app = express() and now we will call app instead of writing express everytime just for ease you may use any other name for it.

  • Now we have used a function get which uses HTTPS GET method and a callback function which handles request and gives responses

app.get("/", (req , res) =>{
res.send("Hello world");
});
Enter fullscreen mode Exit fullscreen mode

"/" this means we are at home page of our webpage and if any get request is there we will send a response by using res.send() i have passed hello world in it which will show a html page there, we can also pass whole html files also( in detail in my next post).

  • In the last line we have used the function app.listen() which listens for a specific port that we pass there and a callback functions which logs that on which port server is running in our case it's Port 3000 ( you may use any available port on your machine).

Step 4

Finalizing our script and running it

After all this done just run our code by using either code runner extension of vs code or just go to terminal and type

node server.js
Enter fullscreen mode Exit fullscreen mode

and you should see somethig like this in your terminal if everything is fine

Alt Text
and now to see our work just open any browser preferably Chrome latest version and in the search bar just write localhost:3000 you will write the same port number as in your code ( as i used port 3000)
and you should see

Alt Text

Congratulations you just created your first web server in express js!!!!

That's it for now my lovely people stay tuned and happy coding ;)

Feel free to message me if you find any errors in my article there is always scope of error and correction too 😊.


Discussion (6)

pic
Editor guide
Collapse
abhinav280601 profile image
abhinav280601

Great Content. Informative

Collapse
codewithashish profile image
code-withAshish Author

thanks for the support dude ;)

Collapse
code2rithik profile image
Rithik Samanthula

Awesome Article! Really informative

Bonus: Why don't you learn about nodemon. Nodemon is an npm package that auto starts the localhost server when you save the server.js file.

Collapse
codewithashish profile image
code-withAshish Author

Yeah i know about nodemon and i personally use it also but it was a basic starting guide so i wanted to keep things plain and simple... well i have used nodemon in my next article coming up soon.
Thank You : )

Collapse
huntee profile image
huntee

Thanks for the great article!

Collapse
codewithashish profile image
code-withAshish Author

Thanks for your time man!!! Appreciate it : )