How to Create and Run a Node.js Project in VS Code Editor ?

Visual Studio Code (VS Code) is a powerful and user-friendly code editor that is widely used for web development. It comes with features like syntax highlighting, code suggestions, and extensions that make coding easier. In this article, we'll show you how to quickly create and run a Node.js project using VS Code.

Prerequisites:

• How to Install Visual Studio Code on Windows?
• How to Download and Install Node.js and NPM?

Steps to create and run a Node.js project in VS code editor

Step 1: Create a New Project Directory

Create an empty folder and move it into that folder from your VS Code editor, use the following command.

mkdir demo
cd demo
code .

Step 2: Now create a file app.js file in your folder as shown below.

Step 3: Installing Module

Install the modules using the following command.

npm install express
npm install nodemon

• express is the web framework for Node.js.
• nodemon is an optional tool that automatically restarts your application when code changes (useful for development).

Step 4: Modify Package.json file

1. Open the package.json file (it should be automatically created after running npm init or installing any modules).

2. Add the following commands under the scripts section to run the application:

"scripts": {
 "start": "node app.js",
 "dev": "nodemon app.js"
}

Configuration of package.json File:

{
 "name": "demo",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "node app.js",
 "dev": "nodemon app.js"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
 "express": "^5.1.0",
 "nodemon": "^3.1.9"
 }
}

Step 5: Project Structure

The following is the project structure

Step 6: Write down the following code in app.js file

Step 7: Run the application using the following command

Go back to your terminal and run the following command to start the server with nodemon:

npm run dev

• npm run dev will run the server and automatically restart it when you make changes.

Output:

Step 8: Open On Browser

Now go to http://localhost:5000/ in your browser, you will see the following output: