Platformio ESP32 Starter Project (with ESP Web Tools)

I work on a lot of projects that involve ESP32.

For this I prefer to use Platformio than the Arduino IDE

• Uploads are faster
• Autocomplete is very useful
• Easier to distribute (library automatically install)
• Python scripts can be used before/after build/upload

We are going to see how I start a project in Platformio. With my starter kit, you will be able to distribute your code thought github really easily and use the serial monitor with the ESP32 Exception Decoder

You need to know a little about platformio / git to fully understand this tutorial.

Users won't need to use any software to test your program or view the serial console thanks to ESP Web Tools !

You can try the Hello World example here:
https://usini.github.io/esp32_platformio/

Unfortunately WebSerial doesn't work on Firefox, use Chrome/Chromium or Edge :-(

Download the Starter Kit

First of all, download my code on Github

https://github.com/usini/esp32_platformio

Open it inside Visual Studio Code

Platformio.ini - monitor flags

Most of the changes are inside platformio.ini

I added the monitor flag: esp32_exception_decoder

It changes every backtrace message into a comprehensive error message

monitor_flags =
--filter
esp32_exception_decoder

You can test it with this simple code

#include <Arduino.h>
int crasher = 0;
void setup() {
    delay(5000);
    Serial.begin(115200);
    crasher = crasher / 0;
}
void loop() {
}

Without esp32_exception_decoder

Backtrace: 0x400d0c53:0x3ffb1f80 0x400d1e66:0x3ffb1fb0 0x40086125:0x3ffb1fd0

With esp32_exception_decoder

Backtrace: 0x400d0c53:0x3ffb1f80 0x400d1e66:0x3ffb1fb0 0x40086125:0x3ffb1fd0
  #0  0x400d0c53:0x3ffb1f80 in setup() at src/main.cpp:6
  #1  0x400d1e66:0x3ffb1fb0 in loopTask(void*) at C:\Users\remi\.platformio\packages\framework-arduinoespressif32\cores\esp32/main.cpp:18
  #2  0x40086125:0x3ffb1fd0 in vPortTaskWrapper at /home/runner/work/esp32-arduino-lib-builder/esp32-arduino-lib-builder/esp-idf/components/freertos/port.c:355 (discriminator 1)

The other filters are used to make it possible to write message in the serial monitor

--filter
send_on_enter
--echo
--eol
CRLF

Platformio.ini - extra scripts

I also added a script named prepare_bin.py, it will copy firmware.bin and partitions.bin inside docs/bins

extra_scripts =
post:prepare_bin.py

Each time, you upload your code, these files will be modified.

--------- Save Firmware before upload -------------------
C:\Users\remi\Desktop\esp32_platformio-main\.pio\build/esp32doit-devkit-v1
C:\Users\remi\Desktop\esp32_platformio-main/docs/bins/
---------------------------------------------------------

Web uploader/Serial monitor

Inside docs/ there is an index.html file with a really basic implementation of ESP Web Tools

Inside the docs/bins are the files necessary for ESP Web Tools to works

• boot_app0.bin
• bootloader_dio_40m.bin
• firmware.bin
• partitions.bin
• manifest.json

You can find more information on these files, by Brian Lough here:https://github.com/witnessmenow/ESP-Web-Tools-Tutorial

Check out his Youtube channel!

Try the web uploader

You can't open the index.html file directly, it needs to be on a web server.

For this you can use the Live Server extension in Visual Studio Code

Click on Go Live on the bottom-right of the IDE.

It will open a web server on http://127.0.0.1:5500Click on docs

Et voilà! you can upload your code and open a serial monitor from here

Distribute on Github

Once your code is ready to be distributed you just have to upload it on Github using git (with Github Desktop for example).

Go to Settings

Goto Pages

In Source, choose Branchmain and /docs

Your uploader will then be published!