Development Environment in JavaScript

Before you can start building your own projects, you need the right setup. Here we will learn how to set up the effective environment or tools where you can write, run, and test your JavaScript code.

Install Node.js and npm

Even though JavaScript runs in the browser, we need Node.js to run JS code outside the browser (like on your terminal), and npm (Node Package Manager) to install JavaScript libraries.

Step 1: Install Node.js:

• Go to the official site: https://nodejs.org/en
• Download the LTS (Recommended for Most Users) version.

Step 2: Verify installation

After installing Node.js, verify the installation by running the following commands:

node -v
npm -v

For more details follow this article =>How to Install Node.js on your System

Set Up a Code Editor

We recommend Visual Studio Code (VS Code) a powerful, beginner-friendly editor.

Steps:

• Download from https://code.visualstudio.com/
• Install it
• Launch the editor

Recommended Extensions:

• ESLint (for spotting errors)
• Prettier (for code formatting)
• Live Server (for auto-refresh in browser)

For more details follow this article => How to Install Visual Studio Code on Windows?

Create Your First Project

Now that you have Node.js and Visual Studio Code set up, let’s create a simple project to make sure everything is working. Follow below steps to create your project:

Step 1: Set Up Your Project Folder

• Open your terminal (Command Prompt on Windows, Terminal on macOS/Linux).
• Navigate to the location where you want your project to live. For example, let's create a folder called my-js-app:

mkdir my-js-app
cd my-js-app

• This will create a new folder and navigate into it.

Step 2: Create HTML and JavaScript Files

Inside the my-js-app folder, you need two files:

• index.html: This is where the structure of your web page will live.
• script.js: This is where your JavaScript code will go.

Step 3: Run the Project in the Browser

• Now, go to the index.html file in your project folder.
• Double-click on the file, and it will open in your default browser.
• To see the result, press F12 (or Cmd + Option + I on macOS) to open the browser's Developer Tools, then go to the Console tab. You should see: