Engineers Garage

  • Electronic Projects & Tutorials
    • Electronic Projects
      • Arduino Projects
      • AVR
      • Raspberry pi
      • ESP8266
      • BeagleBone
      • 8051 Microcontroller
      • ARM
      • PIC Microcontroller
      • STM32
    • Tutorials
      • Audio Electronics
      • Battery Management
      • Brainwave
      • Electric Vehicles
      • EMI/EMC/RFI
      • Hardware Filters
      • IoT tutorials
      • Power Tutorials
      • Python
      • Sensors
      • USB
      • VHDL
    • Circuit Design
    • Project Videos
    • Components
  • Articles
    • Tech Articles
    • Insight
    • Invention Stories
    • How to
    • What Is
  • News
    • Electronic Product News
    • Business News
    • Company/Start-up News
    • DIY Reviews
    • Guest Post
  • Forums
    • EDABoard.com
    • Electro-Tech-Online
    • EG Forum Archive
  • DigiKey Store
    • Cables, Wires
    • Connectors, Interconnect
    • Discrete
    • Electromechanical
    • Embedded Computers
    • Enclosures, Hardware, Office
    • Integrated Circuits (ICs)
    • Isolators
    • LED/Optoelectronics
    • Passive
    • Power, Circuit Protection
    • Programmers
    • RF, Wireless
    • Semiconductors
    • Sensors, Transducers
    • Test Products
    • Tools
  • Learn
    • eBooks/Tech Tips
    • Design Guides
    • Learning Center
    • Tech Toolboxes
    • Webinars & Digital Events
  • Resources
    • Digital Issues
    • EE Training Days
    • LEAP Awards
    • Podcasts
    • Webinars / Digital Events
    • White Papers
    • Engineering Diversity & Inclusion
    • DesignFast
  • Guest Post Guidelines
  • Advertise
  • Subscribe

How to build a Node.js server to control Arduino from a webpage

By Nikhil Agnihotri January 6, 2023

Node.js is the most popular server at this time. Due to its asynchronous and non-blocking nature, Node is the obvious choice for real-time web applications like chat rooms, single-page applications, video streaming, etc. For the same reasons, Node is attracting IoT engineers. As web applications developed on Node operate in real-time, these are best suitable for implementing time-critical web-controlled embedded operations. Plus, with express.js added to Node, you can program both the back end and front end of the network application in the same language, i.e., JavaScript.

A popular framework called “Johny-five” is used to control microcontrollers from backend JavaScript. “Johny-five” is JavaScript Robotics & IoT Platform created by Rick Waldron in 2012. It is maintained by a community of passionate software developers and hardware engineers, with over 75 developers contributing to the framework. The framework can be used to control a variety of Arduino-compatible microcontrollers and SoC platforms, including Arduino, Raspberry Pi, Tessel 2, Particle Photon, Intel Edison, etc. For non-Arduino boards, platform-specific IO plugins are available. The IO plugin can make “johny-five” communicate with any hardware platform.

In this project, we will first set up a Node server and implement a backend JavaScript code to control Arduino directly. A “johny-five” backend JavaScript can be run on a Node server to directly control Arduino and Arduino-compatible, boards. This is demonstrated by blinking an LED on Arduino UNO by running JavaScript on a Node server.

Next, we expand the Node server with the help of Express.js and Socket.io to host a webpage and use the JavaScript SerialPort library to communicate data directly from a webpage to the Arduino. The Arduino will be programmed to read serial data directly from the webpage and fade an LED according to the received data stream.

Components required

  1. Arduino UNO x1
  2. LED x1
  3. Resistor 470Ω x1
  4. Breadboard x1
  5. Jumper wires x1
  6. USB cable to connect Arduino with computer x1

Setting up the Node server
First of all, we need to install Node.js on a computer. You can download Node.js for Microsoft Windows and mac OS from this link. Simply download and run the setup for Node.js on your computer. After installation is finished, you can check the current version of Node.js installed by executing the following command in the command prompt in the case of Windows or Terminal in the case of Linux/macOS.
node -v

Next, create a folder and name it “Arduino Control”. In the same folder, open the command prompt/Terminal and install the johny-five library by executing the following command.
npm install johny-five

After installing the johny-five library in the given folder, the folder will have files and folders, as shown in the image below.

This folder is now a Node.js project. Next, install express.js in the Node project by executing the following command in the command prompt/Terminal in the same folder.
npm install express

Next, install socket.io in the Node project by executing the following command in the command prompt/Terminal in the same folder.
npm install socket.io

Next, install the JavaScript serialport library in the Node project by executing the following command in the command prompt/Terminal in the same folder.
npm install serialport

Now, our Node.js server is ready with johny-five, express, socket.io, and serialport packages installed in the Node project. All these modules are stored in the folder “node_modules”.

Preparing Arduino for communicating with the host computer
To make Arduino communicate with a host computer, we need to implement an intermediate protocol between Arduino and the host computer. Such a protocol is called the Firmata protocol. Fortunately, a Firmata library is available that implements the Firmata protocol on Arduino.

For this project, we simply need to upload a standard Firmata sketch to Arduino, so Arduino is receptive to what we send from our computer. Open Arduino IDE, navigate to File-> Examples->Firmata-> StandardFirmata. Compile and upload the example sketch to Arduino.

Now, Arduino is ready to receive commands from the host computer and dance on the JavaScript code we will run from the Node server.

Blinking LED on Arduino using “johny-five”
We can literary do anything on the Arduino board using JavaScript “johny-five” library. After uploading Firmata to Arduino, we have full control of Arduino from the host computer. Let us exercise this control by blinking a LED on Arduino through JavaScript coding. Interface a LED to any GPIO of Arduino. The following circuit diagram shows a LED interfaced to pin 3 of Arduino.

Now, create a file with the name “blink.js” in the folder “Arduino Control” and open it in any code editor of your choice, like Visual Studio Code, Atom, NotePad++, etc. Copy and paste the following code into the editor and save the file.
const {Board, Led} = require(“johnny-five”);
const board = new Board();
board.on(“ready”, () => {
     const led = new Led(5);
     led.blink(500);
});

To execute the project, open the command prompt/Terminal in the same folder and execute the following command to run the “blink.js” on the Node server.
Node blink.js
As the Javascript file “blink.js” executes, the LED connected to Arduino will start blinking, as shown in the following video.

[Link to demonstration video P34-DV01]

Creating a websocket server on Node
We have already seen how to control Arduino from JavaScript code running on a Node server. Now, let us create a web server that hosts a webpage and allows sending data from the webpage to Arduino. In this project, we will use the webpage to fade a LED on Arduino.

To build a web server, create a file named “fade.js” in the folder “Arduino Control”. Copy and paste the following code in fade.js.const express = require(‘express’);
const app = express();
const http = require(‘http’);
const server = http.createServer(app);
app.get(‘/’, (req, res) => {
     res.sendFile(__dirname + ‘/public/index.html’);
})

server.listen(8080, () => {
     console.log(‘listening on *:8080’);
});
console.log(“Web Server Started go to ‘http://localhost:8080’ in your Browser.”);

This is a simple web server on Node.js built using express.js. The server simply fetches index.html from the “/public/” folder and publishes the webpage as a response when port 8080 is opened on localhost.

The JavaScript code for the express web server starts by importing express.js. A new application is instantiated using the express module. The HTTP module is imported to handle HTTP requests. A server object is instantiated by calling http.createServer() method on the express object “app”. To send index.html from the “public” folder as http response, the app.get() method is called. The IP address and port are set to localhost and port 8080 for the Node server to listen from by calling the server.listen() method. The callback also prints a message to the console. Finally, it is notified that the server is running on localhost:8080 by printing another message to the console. These messages will be printed in the command prompt/Terminal from where the server application will be run.

Create a folder “public” within the folder “Arduino Control” and create a file with the name “index.html”. The index.html contains a slider to control the brightness of the LED. It uses socket.io to send or emit (in socket.io terminology) slider values from the browser to the Node server. Open index.html in a code editor of your choice and paste the following HTML code.

Save and close index.html. Note how the socket.io object is instantiated using the connect.io() method, and a listener function “led” is defined using the socket.on the () method to communicate slider value from the browser to the Node server.

The HTML page can be better presented by adding some CSS. Open style.css in any code editor of your choice and paste the following stylesheet code. In the same “public” folder containing “index.html”, create a file with the name “style.css”.

Save and close style.css. Now the webpage looks like the following.

Preparing Arduino to receive serial data
We are not directly fading LED from JavaScript running on the Node server. Instead, the Node server hosts a webpage at localhost:8080. The webpage takes input from the user and communicates the input data from the browser to the Node server. Then Node server wraps received data into a buffer object and communicate to the serial port Arduino is connected to on the host computer. So, Arduino must be programmed to read serial data from the host computer and fade LED by generating a PWM signal at the respective pin. Instead of Firmata, now upload the following sketch to Arduino.

void setup()
{
    Serial.begin(9600);
     pinMode(3, OUTPUT);
}

void loop()
{
  while(!Serial.available());
  analogWrite(3, Serial.read());
}

The LED is connected to pin 3 of Arduino, as shown in the circuit diagram above. The GPIO3 is also a PWM pin, so it can fade LED using the analogWrite() method.

Fading LED on Arduino from Node.js server
For fading LED on Arduino, we need to send data from the serial port of the host computer to Arduino. For this, JavaScript serialport library is used. The library is already installed in the node project during the setup of the Node server.

Now, add the following lines to “fade.js” to instantiate a serial port in the backend script.

const { SerialPort } = require(‘serialport’);
const port = new SerialPort({
     path: ‘COM4’,
     baudRate: 9600,
});

In our case, Arduino is connected to a Windows PC’s serial port, “COM4”. The port can be different in your case. Replace the port name after the path variable according to your system, whether it be Linux or macOS or a different communication port on Windows PC. In Microsoft Windows, you can find the port Arduino is connected to by opening “Device Manager” and navigating to “Ports”. Expand the port showing Arduino.

In macOS and Linux, to know which port Arduino is connected to, open Terminal and execute the following command.
ls /dev/tty*
Look for /dev/tty.usbmodem* or /dev/tty.usbserial* in the case of macOS or /dev/ttyUSB* or /dev/ttyACM* in the case of Linux.

Create a global variable “brightness” to store LED brightness. Finally, use socket.io to communicate slider value from the Node server to the serial port of the host computer. Add the following JavaScript code to fade.js to instantiate a socket.io object.

Note how the same backend script is hosting a webpage on localhost, receiving input from the webpage on a browser, transferring the data to the server, and communicating the data from the server to the serial port of the host computer.

To execute the project, open the command prompt/Terminal in the same folder, “Arduino Control” and execute the following command to run the “fade.js” on the Node server.
Node fade.js
As the Javascript file “fade.js” will execute, open the URL “localhost:8080” in a web browser and move the slider to control the brightness of the LED connected to Arduino. The project execution is demonstrated in the following video.

You can download the complete project files from the following link.
Arduino-Control.ZIP

 

You may also like:


  • How to send MQTT data from ESP32/ESP8266 to Raspberry Pi

  • How to get input from USB mouse on Arduino

  • Arduino Based IoT Garden Monitoring System

  • How to read input from USB keyboard on Arduino
  • Getting Started With Arduino With Simple LED Blinking Code Circuit Setup On Breadboard
    Getting started with Arduino – (Part 1/49)
  • Using Digital Input And Out Of Arduino Using Push Button And LED Circuit Setup On Breadboard
    How To Use Digital Input And Digital Output Of Arduino-…

Filed Under: Arduino Projects, Electronic Projects

 

Next Article

← Previous Article
Next Article →

Questions related to this article?
👉Ask and discuss on Electro-Tech-Online.com and EDAboard.com forums.



Tell Us What You Think!! Cancel reply

You must be logged in to post a comment.

EE TECH TOOLBOX

“ee
Tech Toolbox: 5G Technology
This Tech Toolbox covers the basics of 5G technology plus a story about how engineers designed and built a prototype DSL router mostly from old cellphone parts. Download this first 5G/wired/wireless communications Tech Toolbox to learn more!

EE Learning Center

EE Learning Center
“engineers
EXPAND YOUR KNOWLEDGE AND STAY CONNECTED
Get the latest info on technologies, tools and strategies for EE professionals.

HAVE A QUESTION?

Have a technical question about an article or other engineering questions? Check out our engineering forums EDABoard.com and Electro-Tech-Online.com where you can get those questions asked and answered by your peers!


RSS EDABOARD.com Discussions

  • Right Half Plane Zero
  • dc-dc converter in series
  • Single ended measuring ports and balanced antenna
  • Thermal modelling of repetitive power pulse
  • Permittivity and Permealibility in CST

RSS Electro-Tech-Online.com Discussions

  • Fun with AI and swordfish basic
  • Microinverters and storeage batteries?
  • FFC connector white
  • Is AI making embedded software developers more productive?
  • Can I make two inputs from one??

Featured – LoRa/LoRaWan Series

  • What is the LoRaWAN network and how does it work?
  • Understanding LoRa architecture: nodes, gateways, and servers
  • Revolutionizing RF: LoRa applications and advantages
  • How to build a LoRa gateway using Raspberry Pi
  • How LoRa enables long-range communication
  • How communication works between two LoRa end-node devices

Recent Articles

  • RPi Python Programming 21: The SIM900A AT commands
  • RPi Python Programming 22: Calls & SMS using a SIM900A GSM-GPRS modem
  • RPi Python Programming 23: Interfacing a NEO-6MV2 GPS module with Raspberry Pi
  • RPi Python Programming 24: I2C explained
  • RPi Python Programming 25 – Synchronous serial communication in Raspberry Pi using I2C protocol

EE ENGINEERING TRAINING DAYS

engineering

Submit a Guest Post

submit a guest post
Engineers Garage
  • Analog IC TIps
  • Connector Tips
  • Battery Power Tips
  • DesignFast
  • EDABoard Forums
  • EE World Online
  • Electro-Tech-Online Forums
  • EV Engineering
  • Microcontroller Tips
  • Power Electronic Tips
  • Sensor Tips
  • Test and Measurement Tips
  • 5G Technology World
  • Subscribe to our newsletter
  • About Us
  • Contact Us
  • Advertise

Copyright © 2025 WTWH Media LLC. All Rights Reserved. The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of WTWH Media
Privacy Policy

Search Engineers Garage

  • Electronic Projects & Tutorials
    • Electronic Projects
      • Arduino Projects
      • AVR
      • Raspberry pi
      • ESP8266
      • BeagleBone
      • 8051 Microcontroller
      • ARM
      • PIC Microcontroller
      • STM32
    • Tutorials
      • Audio Electronics
      • Battery Management
      • Brainwave
      • Electric Vehicles
      • EMI/EMC/RFI
      • Hardware Filters
      • IoT tutorials
      • Power Tutorials
      • Python
      • Sensors
      • USB
      • VHDL
    • Circuit Design
    • Project Videos
    • Components
  • Articles
    • Tech Articles
    • Insight
    • Invention Stories
    • How to
    • What Is
  • News
    • Electronic Product News
    • Business News
    • Company/Start-up News
    • DIY Reviews
    • Guest Post
  • Forums
    • EDABoard.com
    • Electro-Tech-Online
    • EG Forum Archive
  • DigiKey Store
    • Cables, Wires
    • Connectors, Interconnect
    • Discrete
    • Electromechanical
    • Embedded Computers
    • Enclosures, Hardware, Office
    • Integrated Circuits (ICs)
    • Isolators
    • LED/Optoelectronics
    • Passive
    • Power, Circuit Protection
    • Programmers
    • RF, Wireless
    • Semiconductors
    • Sensors, Transducers
    • Test Products
    • Tools
  • Learn
    • eBooks/Tech Tips
    • Design Guides
    • Learning Center
    • Tech Toolboxes
    • Webinars & Digital Events
  • Resources
    • Digital Issues
    • EE Training Days
    • LEAP Awards
    • Podcasts
    • Webinars / Digital Events
    • White Papers
    • Engineering Diversity & Inclusion
    • DesignFast
  • Guest Post Guidelines
  • Advertise
  • Subscribe