Setting up development environment

To learn and practice JavaScript, you need to run JavaScript locally. There are many ways to run JavaScript locally. In this article, we will learn how to run JS locally using Node.js, and also we will learn how to run JS locally using the browser.

Running JS locally

We can run JS using multiple ways, here are some of them:

Using Node.js
Using Browser
Using Online IDEs

tip

You need to download and install IDE or code editor to develop your project. You can use VS Code, WebStorm, or anyone else. I use VS Code, it's a very popular code editor. It is lightweight and easy to manage. You can download it from the link.

Using Node.js

Node.js is a JavaScript runtime environment that allows you to run JavaScript on your computer. Node.js runs on the V8 engine, which is the same engine that runs in Google Chrome. Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.

To use Node.js, you need to download and install it from the link first.

After installing, you need to create a file with a .js extension, for example, hello-world.js, and then write your JS code in that file like this:

hello-world.js
console.log("Hello World!");

Then, you need to open a command prompt or terminal window, navigate to the directory where the file is located, and then type:

Command Prompt
node hello-world.js

This will run the JavaScript file and print Hello World! to the console.

Using Browser

In the browser, we can run JS in two ways:

Using console in inspect element
Using script tag in HTML

Using Console

You can run JS locally using the browser. You just need to open your browser, and then write your JS code in the browser console. You can open the browser console by pressing F12, or by right-clicking on empty space in the browser, and then clicking on Inspect. Then, click on the Console tab. Then, write your JS code in the console.

Safari Developer Tools

Safari supports the JS console via Developer Tools, but you need to enable it first: go to Safari → Settings → Advanced and check "Show features for web developers". Then open the console with ⌥ ⌘ C.

Using script tag

First, you need to create a file with the .html extension. For example, index.html. Then, you need to add the following code to the file:

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>How to run JS locally</title>
  </head>
  <body>
    <script>
      const name = "Muhammad Rizwan Ashiq";
      console.log(`Hello, ${name}!`);
    </script>
  </body>
</html>

Then, you need to open the index.html file in the browser. You can use any browser you want. I use Google Chrome. Then, you will see the following result in the console:

Console output
Hello, Rizwan Ashiq!

You can also add a separate file for the JS code. For example, create a file named script.js and then add the following code to the file:

script.js
const name = "Rizwan Ashiq";
console.log(`Hello, ${name}!`);

Then, you need to add the following code to the index.html file:

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>How to run JS locally</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

It will run the script.js file in the browser console. So, you will see the following result in the console:

Console output
Hello, Rizwan Ashiq!

And then whatever you write in the script.js file, it will be executed in the browser console. For example, if you write the following code in the script.js file:

const name = "Rizwan Ashiq";
const age = 20;

if (age > 18) {
  console.log(`${name} is an adult.`);
} else {
  console.log(`${name} is a child.`);
}

Then, you will see the following result in the console:

Console output
Rizwan Ashiq is an adult.

Using Online IDEs

You can run JS locally using online IDEs like JS Fiddle, JS Bin, CodePen, Repl.it, and many others.

You can create a new project on any of these online IDEs, and then write your JS code in that project. You can run your JS code using the Run button.

What do I prefer?

I prefer node.js as it is easy to use, no need to go back and forth between the browser and the code editor. Can run JS code directly from the terminal.

Steps:

Download and install node.js
Install nodemon by this command on the terminal, it is optional:
Terminal
```
npm install -g nodemon
```
Download and Install VS Code
Open VS Code
Create a new file with the .js extension, I am naming it index.js
Open terminal in VS Code using Ctrl + ~ or View > Terminal
Run the JS file using nodemon <file-name>.js or node <file-name>.js. As I named my file index.js so will write node index.js
1. If you are using nodemon, then you don't need to run the file again and again. It will automatically run the file when you save it.
2. If you are using node, then you need to run the file again and again manually using node <file-name>.js
If using nodemon, and want to stop the file from running, then press Ctrl + C in the terminal.
Done!

Simple, right? 😄

You'll be using this method in the upcoming articles.

Conclusion

In this article, we have learned how to run JS locally using Node.js, and also we have learned how to run JS locally using a browser. We have also learned how to run JS locally using online IDEs.

Running JS locally​

Using Node.js​

Using Browser​

Using Console​

Using script tag​

Using Online IDEs​

What do I prefer?​

Conclusion​