Nodejs and npm installation on Windows

Follow the steps carefully. This tutorial is especially created for Human-Computer Interaction CSCE436 Tamu, Spring 23 course. Yet, it will apply to anyone who wants to install nodejs and npm on windows machine, run a local server, and play around with p5.js.

Pre-requisite

Remove any prior installation of node or npm on your computer, including any WSL (ubuntu or other) terminal installation. To unistall node from terminal you can run sudo apt remove nodejs.

Download Nodejs

Go to Nodejs official site and download the latest version.

Run the installer

• Step 1: Press next and accept license agreement.

• Step 2 !!!IMPORTANT!!!: Click on the drive icon beside npm package manager and select Entire feature will be installed on local hard drive.

• Step 3 !!!IMPORTANT!!!: Do the same for Add to PATH.

• Step 4 !!!IMPORTANT!!!: Select the Automatically install ... option and click Next.

• Step 5: You will prompted with Press any key to continue, press any button on your keyboard.

• Step 6: Once done, you have type ENTER on the terminal and then press the ENTER button on your keyboard.

Testing Installation

• Step 1: Search for Terminal or Power Shell and open it.

• Step 2: Type the following commands one by one:

npm -v

node -v

They should produce output something like this:

If there is any error go back to the beginning of the tutorial and follow the instructions again.

Running local server for p5js:

• Step 1: Download the pre-configured p5js zip from HERE and extract the zip. DO NOT change the folder structure for now, it is already pre-structured.
• Step 2: Inside the extracted folder press Shift Key and Right Click to open the dialog box and select Open PoerShell window here. Alternately, you can run powershell from the start menu and navigate to the directory of the extracted folder.

• Step 3: Run the following commands one by one:

npm install npm@latest -g

npm install express --save

• Step 4: Now run the local server by typing the following command (you do not need to change or create app.js, it is already pre-configured):

node app.js

!!! if you are asked to allow firewall, select both the checkbox and click Allow access. !!!

• Step 5: Open a browser (Chrome Preferred) and enter the url 127.0.0.1:3000 and click on click me. It should bring a logo similar to the following figure:

Editing p5js:

Similar to the tutorial shown in the class, you can edit the sketch.js file and refresh the browser to reflect the changes.

Additional Troubleshooting:

Turning off and on your computer (restart) is always an option 😉.