A Practical Introduction to Setting Up a NodeJs+Express web project with VSCode

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.-Node.Js

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.-Express

---

⚫ Download NodeJs

• Visit https://nodejs.org/en/ to download and install NodeJs on your machine.

After downloading and installing, you can check if it was successfully installed by running the command below⬇️ in your command line(How to open command line):

node -v

The command above should print the version of your NodeJS so you'll see something like this v14.7.0(Depending on the NodeJS version you installed)

Mission 1️⃣ Completed!!✔️✔️

__

⚫ Folder Structure

• Download, install and open VSCode here.
• Create a folder in your desktop... Name it MyNodeJsProject so as to locate it easily
• In your VSCode, Open the MyNodeJsProject folder📂. You can open the folder by clicking the file tab located at the upper left corner of VSCode. After clicking on file you'll see the Open Folder option... Click on it and locate your MyNodeJsProject folder📂 in your desktop, then open the folder📂.

In the left panel of your VSCode, the MyNodeJsProject folder📂 would be displayed.

• Still in your VSCode, Open the VSCode terminal by clicking the terminal tab located at the upper part of VSCode, then click the New Terminal option. A new panel would pop up at the bottom part of your VSCode:

NOTE: Open the MyNodeJsProject folder📂 through your VSCode before opening the VSCode terminal, so that you'll be automatically navigated to the folder in the terminal.

• In the terminal, run the command below:

npm init -y

After running the above command, a package.json and package-lock.json file would be created automatically in your MyNodeJsProject folder📂. The package.json file can be referred to as the Metadata of your project as it contains information that identifies the project as well as handling the project's dependencies. While the package-lock.json file is solely used to lock dependencies to a specific version number.

• In your MyNodeJsProject folder📂, create a index.js file, that'll be the entry point of your project. You can create the index.js file manually, or you can just run the command below in your terminal:

type NUL > index.js

Mission 2️⃣ Completed!!✔️✔️

⚫ Creating a server using ExpressJs

• In your terminal that's navigated to the MyNodeJsProject folder📂, run the command below to install express:

npm install express

If express was installed successfully, a new folder📂 called node_modules that'll be holding all your dependencies would be created automatically, and you'll also get a message in the terminal indicating that you've successfully installed express.

• Now, Open your index.js file
• In your index.js file enter the following lines of code below and save:

// Importing the express module
const express = require('express'); 
// calling the express function
const app = express(); 

// Creating a "/home" route for sending "Hello World!😎😎" to the clientSide(Browser)
app.get("/home", (req, res)=>{
    res.status(200).send("<h1>Hello World!😎😎</h1>")
})

// declaring our Port number variable
const PORT = process.env.PORT || 4000;

// Creating a server with the PORT variable declared above
app.listen(PORT, ()=>{
    console.log(`Listening to Port ${PORT}`)
});

• After saving those lines of codes to your index.js file, You'll need to get your server running first, before you can access the "/home" route. Now, to get your server running, run the following command in your terminal:

node index.js

• Open your browser, and enter "localhost:4000/home" in the url field

Voilà!!🎇🎇

And that's all.... Your Server is Up and Running!

Mission 3️⃣ Completed!!✔️✔️

NOTE: To close a server, in the terminal, use the ctrl+c shortcut.

---

🏁 If You like my Write ups, and would like to provide support to me and my work, and would also like to learn more about Programming/Software Development, Please do follow me on Twitter.