Create awesome Wifi Chat with Captive Portal using NodeMcu ESP8266

February 10th, 2019 by

In this tutorial, you will learn how to create a wifi chat with a captive portal using NodeMcuESP8266. You will also learn how to read and write to files in NodeMcu SPIFFS and to serve a web server.

Video Demonstration



NodeMcu ESP8266
Arduino IDE
Arduino ESP8266 filesystem uploader
Download the Source Code Here:  ChatApp with Captive Portal Node Mcu Source Code (1513 downloads)


Environment Setup

We need to add NodeMcu ESP 12 to our Arduino IDE. Open up your IDE then go to “File -> Preferences” or simply hit “Ctrl + comma”

Paste in additional board manager URLs.

Go to “Tools -> Board -> Boards Manager” search and install esp8266

Close and restart your Arduino IDE

Plug in your NodeMcu to your computer.

Selecting Port and Board

Go to Tools -> Port and select the COM Port of your NodeMCU. If you are not sure what port your NodeMcu is plugged in, go to Device Manager -> Ports (COM & LPT)

Now select NodeMcu 1.0 (ESP-12E Module) by clicking Tools -> Board. Scroll down until you find it.


Arduino ESP8266 Filesystem Uploader

Download Arduino ESP8266 Filesystem Uploader (direct link)  Unpack the tool in your sketchbook directory (the path will look like <sketchbook directory>/tools/ESP8266FS/tool/esp8266fs.jar).

Restart your Arduino IDE (If opened). You will notice an option in Tools drop down. (ESP8266 Sketch Data Upload)

If you want to learn more about the NodeMCU File System. You can visit this documentation. Arduino File System


Source Code

Unpack the downloaded source code.  You will notice the data folder. This is where we will put all codes/files that we want to upload to the file system.

Open the ChatApp.ino into your Arduino IDE.

The first thing you should do is to upload the HTML file and messages.txt in your File System.

Go to Tools -> and click (ESP8266 Sketch Data Upload).  Uploading the file may take awhile.

After uploading the file. Upload the ChatApp.ino. The code will compile and will be uploaded to your NodeMcu.

Connect to your WIFI. Notice that a notification, sign in to Wifi Network appears. This is the default behavior of android when connected to wifi with a captive portal.

Now try chatting. The design is responsive so you do not need to worry about its appearance.

To delete the messages. Simply double click the Chat App header. Click the red button that says “Delete Messages”.

You can also change your user name.


Code Explanation



Spread the love



  1. yugan

    January 4, 2020 at 2:40 am

    instead of wifi we can use lora modules by interfacing them in urat pins

    • Widya Febriandaru

      October 7, 2020 at 3:28 pm

      bro can u tell me how we attach lora modules to this project? can u share the script?

  2. Keith

    February 13, 2020 at 6:42 pm

    This is almost exactly what I have been trying to get my ESP to do: I can see massive potential for self contained chat portals.
    The challenge now is of whether we can run a full bulletin board on an ESP…

  3. Keith

    February 13, 2020 at 9:00 pm

    Do you think it would be difficult to have the ESP recognise visitors by (I guess) their MAC address?

  4. Andrew

    April 4, 2021 at 8:11 pm

    merci pour ce tutoriel.


Leave a Reply

Your email address will not be published.