Back to Blog

How to Host a Website on ESP32 Web-server with Microdot

5 min read

Want to host a website on a microcontroller? In this guide, I'll show you how to create and host a simple website on an ESP32 using Microdot, a lightweight web framework for MicroPython. Your website will be accessible from any device on your local network, and you can even expose it to the internet using ngrok!

What You'll Need

  • ESP32 development board
  • USB cable for programming
  • Computer with Thonny IDE or VS Code (with PlatformIO)
  • Wi-Fi network
  • MicroPython firmware
  • Microdot library

Step-by-Step Guide

1. Prepare Your ESP32

First, let's get your ESP32 ready:

  1. Flash MicroPython firmware onto your ESP32
  2. Connect the ESP32 to your computer via USB
  3. Open your IDE (Thonny or VS Code)
  4. Select the correct COM port for your ESP32
  5. Test communication through the terminal

2. Create the Web Server

Create a new file called boot.py in your ESP32's root directory with this code:

python
import network
import utime
from microdot import Microdot, send_file

# Wi-Fi credentials
SSID = "your_wifi_ssid"
SSI_PASSWORD = "your_wifi_password"

def do_connect():
    sta_if = network.WLAN(network.STA_IF)
    if not sta_if.isconnected():
        print('Connecting to network...')
        sta_if.active(True)
        sta_if.connect(SSID, SSI_PASSWORD)

        while not sta_if.isconnected():
            pass

    print('Connected! Network config:', sta_if.ifconfig())

# Initialize connection
print("Connecting to Wi-Fi...")
do_connect()

# Create web server
app = Microdot()

@app.route('/')
def index(request):
    return send_file('index.html')

# Start server
app.run(port=80)

3. Design Your Webpage

Create an index.html file with this simple responsive design:

html
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        line-height: 1.6;
      }

      h1 {
        color: #2196f3;
        text-align: center;
        margin: 40px 0;
      }

      button {
        display: block;
        margin: 30px auto;
        width: 200px;
        height: 50px;
        font-size: 18px;
        background-color: #2196f3;
        color: white;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        transition: transform 0.2s;
      }

      button:hover {
        transform: scale(1.05);
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my ESP32 website :)</h1>
    <button onclick="alert('Hello from ESP32!')">Click me</button>
  </body>
</html>

4. Set Up the Project

  1. Download the microdot.py library
  2. Copy it to your ESP32's root directory
  3. Verify your file structure looks like this:
📁 ESP32
├── boot.py
├── index.html
└── microdot.py

5. Launch Your Website

  1. Run boot.py and wait for the Wi-Fi connection
  2. Look for the ESP32's IP address in the terminal output
  3. Open a web browser on any device connected to your network
  4. Enter the ESP32's IP address in the address bar
  5. You should see your website! 🎉

Troubleshooting Tips

  • No Connection? Double-check your Wi-Fi credentials
  • Website Not Loading? Verify the ESP32's IP address
  • Errors? Check the terminal for debugging information

Next Steps

Now that you have a basic website running, you could:

  • Add more routes to your web server
  • Create a dynamic user interface
  • Implement sensor data display
  • Add WebSocket support for real-time updates
  • Use ngrok to make your site accessible from the internet

Pro Tip: For development, keep your ESP32 connected to your computer to see debug messages and errors in real-time.

← All Posts