Deploy react on an esp32 with 32 character file name limit

Question

I would like to deploy a react application on a web server on an esp32 micro controller, to control an api on that same micro controller.

The web server is working and can send files and receive requests. The only real problem is that file names of react apps are too long (i.e. ./build/static/js/988.78dc5abd.chunk.js), while the file system on an esp32 is limited to file names no longer than 31 characters.

I tried reducing the file names by editing webpack.config.js, but that doesn't appear to work anymore. I also tried bundling it in a single file which I also could not figure out. Increasing the file name limit also seems impossible.

Does anyone have an idea of how I could deploy a react app on a file system that is limited to file names with 32 characters?

Answer 1

EDIT: The actual best way is to create a custom react webpack and make a tarball with the result

I created a pretty terrible solution to this problem, so if you came across this post, ensure you have exhausted all other options before you attempt to copy this:

Basically I have created a script takes all the files recursively from the react app build directory (rapp/build) and copies them all to the data folder with a number and the correct extension (so the browser picks up the file type):

#!/bin/bash

cd rapp/build

i=0

#clear index and data folder
rm -rf ../../data/*
> ../../data/index


#grab all files and assign number
for f in $(find . -type f -printf '%P\n');
do 
    #pretty output
    RED='\033[0;31m'
    NC='\033[0m' # No Color


    #grab extension
    filename="${f##*/}"
    extension="${filename##*.}"

    #copy file with number
    cp $f "../../data/$i.$extension"



    #add original to index
    echo $f >> ../../data/index 
    #add copy to index
    echo $i.$extension >> ../../data/index 

    echo -e $i.$extension ${RED} mapped to ${NC} $f
    i=$((i+ 1))

done

then i have created a web server that will automatically redirect all the request to the copied numbered files:

#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"
#include <string> 

const char* ssid = "abcdef";
const char* password =  "";

AsyncWebServer server(80);

void mapRedirect(){

    File file = SPIFFS.open("/index");
    if (!file) {
        Serial.println("Failed to open file for reading");
        return;
    }

    Serial.println("Contents of file:");

    int i=0;
    while (file.available()) {
        String orig=file.readStringUntil('\n');
        String cop=file.readStringUntil('\n');

        Serial.print(cop);
        Serial.print("\tmapped to\t");
        Serial.println(orig);

        server.on(String("/"+orig).c_str(), HTTP_GET, [cop](AsyncWebServerRequest *request){


                request->redirect("/"+String(cop));
                }
                );

        i++;

    }


    file.close();


}

void setup(){
    Serial.begin(115200);

    if(!SPIFFS.begin(true)){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
    }

    WiFi.softAP(ssid,password);


    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
            request->redirect("/index.html");
            });

    server.serveStatic("/",SPIFFS,"/");


    //redirect react files to coressponding mappings (spiffs character file name limit)
    mapRedirect();


    server.onNotFound([](AsyncWebServerRequest *request){

            request->send(404, "text/plain", "The content you are looking for was not found.");
            });



    server.begin();


}


void loop(){}