Mid-Senior Engineers: Reinvent your career with Robotics, earning $100k-$200k+ in the next 90 days. Learn More

Control Devices using a Web Browser (NodeMCU)

Liz Miller Learn Robotics

About the Author, Liz Miller, Founder/CEO @ Learn Robotics

Liz graduated with a degree in Robotics Engineering from Worcester Polytechnic Institute and researched drones at UPenn's GRASP Lab. Liz is a former Raytheon Engineer, where she managed major $MM automation projects worldwide. Today, she's the driving force behind Learn Robotics, offering the Robotics Career Blueprint for Engineering Professionals and beginner courses through the Online Robotics Class. Liz is a third-generation entrepreneur who is all about the application of innovation in robotics, automation, and AI. Follow Liz on LinkedIn and Facebook.

Disclosure: Some of the links below are affiliate links. This means that, at zero cost to you, Learn Robotics will earn an affiliate commission if you click through the link and finalize a purchase. Learn Robotics is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a way for websites to earn advertising revenues by advertising and linking to Amazon.com.

Join our Private Discord Server, MakeRobots! Sign Up

In this post, I will show you how to connect your NodeMCU or ESP8266 development board to the Internet, and control devices using a web browser. You can use it for a number of projects like, automation, controlling robots over a long distance, and much more. Before you get started checkout the previous article on using ESP8266. So without wasting any more time, let’s get started.

What You Need to Control I/O with NodeMCU

Pick up a NodeMCU kit or grab the following components.

In addition to the hardware, you will also need software to program the controller. I’ll assume you already know how to work with Arduino and write simple programs.

  • Arduino IDE
  • RemoteMe.org (You need to create an account here)

I’ve also created some RemoteMe and Arduino example files. Download these, below, then continue on with the tutorial! We’ll use these files in a later sections.

[pretty-locker id=”339508″]

Access the RemoteMe project files

Download the Arduino Sketch

Create a Web Page using RemoteMe

If you have no idea what RemoteMe is, let me explain it in short.

RemoteMe.org is a free website where you can host web pages, create network devices and generate code. We’ll use RemoteMe to host our webpage to control I/O on our ESP8266.

The first step is to head over to RemoteMe.org. Goto Signup, and create an account. Now login using the username & password you created.


On the home page you will notice a menu on left side. Click on Device from that menu. A blank page will appear. Here you can create a new device.

Add NodeMCU to RemoteMe for connectivity

Next, from the drop-down list, select “New Web Page.” A pop-up window will appear. Provide a name, ID, and turn it on by toggling ‘active’.

You can name the device anything you want. But for this tutorial, name it the same as I have, below.

Name: LED
ID: 203
Template: componentsStarter

Finally, make sure the toggle is set to active and submit. A new device will appear at the top named LED.
Attach a component to RemoteMe device NodeMCU

Now click on the down arrow. You will see a drop down with 3 files. These are blank files. Feel free to edit this to customize your web page.

Remember the RemoteMe files you downloaded at the beginning of the tutorial? We’ll use them here. Delete the files that are created automatically. Then drag & drop the provided RemoteMe files into the browser.
Configure webpage for NodeMCU
Once that’s finished, the web page is ready. You can click on the “Index.html” file and open it in new page.

Configure the Arduino IDE

Before we can use the code, we need to setup the Arduino IDE with some libraries.
Here is a list of libraries you will need:

  1. RBD_Timer.h
  2. RBD_Button.h
  3. RemoteMe.h
  4. ESP8266WiFi.h
  5. ESP8266WiFiMulti.h
  6. ArduinoHttpClient.h

To install these libraries goto >> Sketch >> Include Library >> Manage Libraries.
Install Arduino NodeMCU libraries

Copy and paste the names of libraries above and install them. After all the libraries are installed just restart the IDE and move on to the next section.

Upload Code to your NodeMCU

I have provided the code to make the project work. Before you can upload the code, there are some minor changes you have to make.

Now open your Arduino sketch from before. Enter your WiFi name and password in the required field so the board can connect to your network. Make changes to the following code:

#define WIFI_NAME "Enter your WiFi name" 
#define WIFI_PASSWORD "Enter your WiFi password" 
#define DEVICE_ID 203 #define DEVICE_NAME "LED" 
#define TOKEN "Enter Authentication Token"

The token can be found on RemoteMe website >> Application >> Token. Copy and paste this token into the Arduino Sketch where it says “Enter Authentication Token.”Add in NodeMCU token

Now, we’re ready to move on to wiring up our ESP8266 circuit.

Wire your ESP8266 for Web Control

Use the Wiring Diagram, below to configure your ESP8266 for Web Control.

The LED is connected to Pin D5 of the NodeMCU. Connect a 220 ohm resistor in series with LED. The push button is connected to Pin D2. Be sure to ground both rails of the breadboard.

NodeMCU LED Wiring Diagram

Once that’s complete, we’re ready to test out the device!

Test the ESP8266 Web Control

First check to see if the connections are right. Press the push-button, and you should see the LED turn ON. Pressing the button again and verify that the LED turns OFF.

Next, head over to the RemoteMe website and open your application. Login using the account with which you signed in with.

Now Goto Devices, and select the device you just created. Notice the Connection link symbol on the left side before the device ID. It should have turned green, which indicates that the ESP board is connected to the server.

Then, click on the “index.html” file, and select “open in new tab.” A new web page will load with a circle. You can click on the circle to turn on and off the LED.

Now, let’s control your LED using a smartphone. Again, go to the device page, and click on “index.html”. This time select the last option, “Get anonymous link.” A pop-up window will appear with a link you can open in any smartphone to control the LED without having to login every time.

An even better option, is to use the QR feature. Then, you can scan the QR using your Android or iPhone, and you will be redirected to the web page with the circle.

Hope you liked this project! If you have any questions feel free to ask them in the comments, below. Do you have a friend who’d want to build this project? Share this article with them!

We’re also looking to grow our contributor group. Become a Learn Robotics Contributor, and post your own tutorials on our blog!

Would you like to learn how to build robots? Join our new Robotics eCourse.

Experienced Engineer (Mechanical, Electrical, Computer, Software): If I offered to help you upgrade your engineering career to robotics, earning $100k-$200k+ in the next 90 days, would you take me up on that offer? Click here for details.
Liz Miller Learn Robotics

🚀 Pre-Launch: Become a "MakeR" with MakeRobots!

Hey Reader, 👋

Liz Miller, Founder/CEO, here with some Exciting News!

Learn Robotics just acquired MakeRobots™, an Online Robotics Community, and are prepping its Official Learn Robotics Debut in Late 2023.

MakeRobots™ is your one-stop-shop for learning, gaining coding, electronics, and robotics skills, connecting, and building robots for one low monthly membership!

Join MakeRobots™ at our Special Pre-launch Rate!
🤖 Access our Private Community & Robotics Courses
💬 Network, Collaborate, Connect with Other Makers
🔓 Only $5.99/month – locked in for life
⏱️ Pre-launch deal is Limited to the first 1,000 subscribers

This is a perfect opportunity for you to get into the fastest growing robotics community on the internet, at our ground-level, pre-launch membership rates.

👇 Click the button below to Claim your Pre-launch Membership and become a MakeR in the MakeRobots Community, today!

Learn Robotics Botly Favicon