How do I PUT an HTML page READY IN THIS CODE?

Question

I wanted to put an already made website inside this script so I don't have to write the whole website again

ESP32 device model

#include <WiFi.h>
#include <DNSServer.h>
#include <WebServer.h>

const byte DNS_PORT = 53;
IPAddress apIP(172, 217, 28, 1);
DNSServer dnsServer;
WebServer webServer(80);

String responseHTML = ****""
                      "<!DOCTYPE html><html lang='en'><head>"
                      "<meta name='viewport' content='width=device-width'>"
                      "<title>CaptivePortal</title></head><body>"
                      "<h1>Hello World!</h1><p>This is a captive portal example."
                      " All requests will be redirected here.</p></body></html>";***
void setup() {
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("Vodafone");

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", apIP);

  // replay to all requests with same HTML
  webServer.onNotFound([]() {
    webServer.send(200, "text/html", responseHTML);
  });
  webServer.begin();
}

void loop() {
  dnsServer.processNextRequest();
  webServer.handleClient();
}

When running the code it will create the site with the html written.

But I wanted to put a more complete html without having to write the lines of this whole site

that is, it is as if we imported the file into the script?

score 0 · Answer 1 · answered Nov 17 '22 at 03:44

ESP allows you to partition part of the Flash memory to be a filesystem for data storage, and it can be used to keep content like html, css, Javascript files and retrieve it when you need it.

Download Arduino ESP32 filesystem uploader and following the instruction on the README.md to install the uploader plugin to your Arduino IDE.
Create a data directory under your Arduino project and put all your html files, css, and JavaScript into the directory.
On your Arduino IDE, select Tools > Partition Scheme to adjust the memory allocation between your Sketch and your FATFS(i.e. the size required for your data directory) if necessary.
Select Tools > ESP32 Sketch Data Upload menu item. This should start uploading the files into ESP32 flash file system. This does not upload your Sketch though, you still need to upload your sketch as usual.
On how to serve the page out from ESP32 filesystem, I recommend you switch to use ESPAsyncWebServer as it allows you to server static content out from the ESP32 filesystem. For example, you can serve the home page index.html on the route / like this:

    server.serveStatic("/", SPIFFS, "/")    // first '/' - html route, second '/' - root directory of 'data' directory in LITTLEFS
          .setDefaultFile("index.html")       // set html home page
          .setCacheControl("max-age=86400");  // set cache expire

I have an example on how to serve the content out from ESP32 filesystem using ESPAsynWebServer on my github that you could take a look for more detail implementation. My example is based SPIFFS which has been depreciated and replaced with LittleFS, but the API in general is compatible.

How do I PUT an HTML page READY IN THIS CODE?

1 Answers1