Random Nerd Tutorials
Shares

ESP8266 Web Server with Arduino IDE

Shares

In this project you’ll create a standalone web server with an ESP8266 that can toggle two LEDs using Arduino IDE. This ESP8266 Web Server is mobile responsive and it can be accessed with any device that as a browser in your local network.

Note: for a more in depth and updated tutorial on how to create a web server, read this post ESP8266 Web Server Step-by-step

If you want to learn more about the ESP8266 module, first read my Getting Started Guide for the ESP8266 WiFi Module.

If you like the ESP and you want to do more projects you can read my eBook Home Automation Using ESP8266.

Let’s get started!

First, watch the video tutorial below


Uploading your ESP8266 code

Having the ESP8266 add-on for the Arduino IDE installed (How to Install the ESP8266 Board in Arduino IDE), go to Tools and select “Generic ESP8266 Module”.

Copy the sketch below to your Arduino IDE. Replace the SSID and password with your own credentials.

After modifying my sketch upload it to your ESP8266 (If you can’t upload code to your ESP8266, read this troubleshooting guide).

Upload code to ESP8266-01

If you’re using an ESP8266-01, you need an FTDI programmer to upload the code. Wire the ESP8266 to the FTDI programmer as shown in the following schematic diagram.

Flashing Firmware - FTDI Programmer

ESP8266 IP Address

Open the Arduino serial monitor at a baud rate of 115200.

  • If you’re using ESP8266-01, connect GPIO 0 of your ESP8266 to VCC and reset your board.
  • If you’re using ESP8266-12E, just press the RESET button.

After a few seconds your IP address should appear.

Parts Required

Here’s the hardware that you need to complete this project:

If you’re using an ESP8266-01, you need an FTDI programmer to upload code.

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Final Circuit

Now follow the schematics below to build the circuit you’ll control. With one LED connected to GPIO 4 and another connected to GPIO 5.

If you’re using the ESP8266-01, use the following schematic diagram as a reference, but you need change the GPIOs assignment in the code (to GPIO 2 and GPIO 0).

ESP-web-server_bb

Demonstration

For the final demonstration open any browser from a device that is connected to the same router that your ESP is. Then type the IP address and click Enter!

Now when you press the buttons in your web server you can control both sockets.

Wrapping Up

If you like the ESP8266 make sure you check our most popular projects:

Do you have any questions? Leave a comment down below!

Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog and my Facebook Page.

P.S. If you got stuck thoughout this tutorial make sure you read “ESP8266 Troubleshooting Guide


Learn ESP32 with Arduino IDE

This our complete guide to program the ESP32 with Arduino IDE, including projects, tips, and tricks! The registration closes soon, so SIGN UP NOW »

Recommended Resources

Home Automation using ESP8266 »
Build IoT projects and home automation gadgets with the ESP8266 Wi-Fi module.

Build a Home Automation System »
Learn how to build a automation system using open-source hardware and software from scratch.

Arduino Step-by-Step Projects »
Build 25 cool Arduino projects with our couse even with no prior experience!

Leave a Comment:

Add Your Reply

⏰ Registrations are open ⏰
Sign up for "Learn ESP32 with Arduino IDE" Course