A Practical Introduction to Setting Up a NodeJs+Express web project with VSCode
Tags: javascript, express, node, newbie
Published: 2020-11-23 07:30:04

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.-[_Node.Js_](https://NodeJS.org)

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.-[_Express_](https://expressjs.com)
_____
#⚫ **Download NodeJs**
* Visit [https://nodejs.org/en/](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](https://www.wikihow.com/Open-the-Command-Prompt-in-Windows)):
```
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)_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zf9ti9wlb52365a1lyg3.png)
######Mission 1️⃣ Completed!!✔️✔️

__

#⚫ **Folder Structure**
* **Download**, **install** and **open** VSCode [here.](https://code.visualstudio.com/download)
* 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dk8mer6ggtmj6mbxmnmw.jpg)

* 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**: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9kd2dmnly5histyzhtwn.jpg)

######**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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q34orz5yoc2ej1q8nrw9.jpg)
* Now, Open your `index.js` file
* In your `index.js` file enter the following lines of code below and save:
```javascript
// 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à!!🎇🎇**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i7uxf72r1etwrsk7hw43.jpg)
####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](https://twitter.com/mccauley_json).