search

h9419 / ESP_AP_Webserver

A ESP32 project template with a web interface built in React
GNU General Public License v3.0
39 stars 6 forks source link

Can you provide the data folder contents #1

Closed Tarek-Ragab-Abdelal closed 1 year ago

Tarek-Ragab-Abdelal commented 1 year ago

I need the files within the /data /data_src /data_react_src That you are ignoring by .gitigonre

h9419 commented 1 year ago

Those directories will be created when you follow step 2 in "Uploading to ESP32" section of the README

Triggering either Platform -> Upload Filesystem Image or Platform -> Build Filesystem Image will create those files. There is no reason to upload the minified html and js files when the source code and build scripts are integrated.

If you don't want to build every time you upload, feel free to comment out post:scripts/prepare_React.py and post:scripts/prepare_gzip.py in platformio.ini.

If you encounter compilation problem in LITTLEFS.cpp, you can try applying the following patch:

Tarek-Ragab-Abdelal commented 1 year ago

Thanks for being responsive, I really appreciate you're trying to help. I still got one error, I hope you can help me with it. I tried triggering Platform -> Upload Filesystem Image and Platform -> Build Filesystem Image but I got the following errors:

Building in release mode
Replace MKSPIFFSTOOL with mklittlefs
Building FS image from 'data' directory to .pio\build\esp32dev\littlefs.bin
warning: can't read source directory
*** [.pio\build\esp32dev\littlefs.bin] Error 1

When I upload to the ESP, The firmware runs and prints the following:

WiFi AP is now running
IP address:
192.168.2.1
Server Started

But once I connect to the AP created by the ESP, it encounters an error and the ESP resets. Here are the data it prints once I connect before it resets.

Serving file:  /index.html
[   724][E][vfs_api.cpp:104] open(): /littlefs/index.html does not exist, no permits for creation
[   725][E][vfs_api.cpp:104] open(): /littlefs/index.html.gz does not exist, no permits for creation
Guru Meditation Error: Core  1 panic'ed (LoadProhibited). Exception was unhandled.
Core  1 register dump:
PC      : 0x400d2d6c  PS      : 0x00060b30  A0      : 0x800db048  A1      : 0x3ffd12e0  
A2      : 0x00000000  A3      : 0x3ffd1d04  A4      : 0x3ffc35b0  A5      : 0x31dd903f
A6      : 0x0000000d  A7      : 0x00000000  A8      : 0x800d2d69  A9      : 0x3ffd12c0  
A10     : 0x3ffd12ec  A11     : 0x3f400145  A12     : 0x31dd903f  A13     : 0x3ffc35b0
A14     : 0x00000000  A15     : 0x3ffd130c  SAR     : 0x00000015  EXCCAUSE: 0x0000001c  
EXCVADDR: 0x00000000  LBEG    : 0x400898e9  LEND    : 0x400898f9  LCOUNT  : 0xfffffff9

Backtrace:0x400d2d69:0x3ffd12e00x400db045:0x3ffd1340 0x400d8ded:0x3ffd1390 0x400d8efd:0x3ffd13e0 0x400d90e5:0x3ffd1430 0x40143e61:0x3ffd1450 0x40143ed9:0x3ffd1480 0x4014469a:0x3ffd14a0

ELF file SHA256: 0000000000000000

Rebooting...

After that it resets and the cycle is repeated. I guess it is a problem with the added scripts, as the "/data" directory is not created while building, thus the ESP32 can not find the webserver files.

Tarek-Ragab-Abdelal commented 1 year ago

I need to mention that I modified one more thing, as by default when I cloned your repo and uploaded the sketch without any modifications, it ran, but once I connect to the AP of the ESP, an error occurs and it restarts. These are the data it prints before restarting.

.pio/libdeps/esp32dev/LittleFS_esp32/src/lfs.c:1242:error: Corrupted dir pair at {0x0, 0x1}
E (195) esp_littlefs: mount failed,  (-84)
E (195) esp_littlefs: Failed to initialize LittleFS
[   203][E][LITTLEFS.cpp:95] begin(): Mounting LITTLEFS failed! Error: -1

After some research, I understood that I need to change 

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

to 

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

Then this way, the code ran and it encounters the problems I mentioned in the previous comment.

h9419 commented 1 year ago

/littlefs/index.html does not exist

Can you check a few things?

  1. The content of data_src/ includes an index.html, some css and js that can be opened as plain text documents
  2. The content of data/ has all the same files but smaller in size and cannot be opened as plain text documents because it is gzipped
  3. Your system is supported by the version of mklittlefs I bundled in the folder scripts\mklittlefs. Apple silicon and Windows on Arm are not supported
  4. You did upload the filesystem image

If there is no version of mklittlefs works for you, you can replace all instances of LITTLEFS with SPIFFS but it will be lower performance and doesn't support directories. I initially made the minify script to remove folders so it should work the same way.

h9419 commented 1 year ago

@Tarek-Ragab-Abdelal

LITTLEFS.begin(true)

The parameter you provided is named formatOnFail, which means you did not properly flash the littleFS partition and is making the ESP format it to an empty partition

Please check that your system supports mklittlefs or fall back to using SPIFFS. To do so, just revert all the changes I made in https://github.com/h9419/ESP_AP_Webserver/commit/b0845c04cd0bdb0f81a50710bd47cb1df990e37d#diff-4446afd728a4f34cbcddc306a9cb6be845d1a61c216076a295683bcc9c106724

Tarek-Ragab-Abdelal commented 1 year ago

Yes you are right, my arm based windows is not supported, thus I reverted back to https://github.com/h9419/ESP_AP_Webserver/commit/b0845c04cd0bdb0f81a50710bd47cb1df990e37d#diff-4446afd728a4f34cbcddc306a9cb6be845d1a61c216076a295683bcc9c106724 and It did not work also. It keeps giving me the same error

Tarek-Ragab-Abdelal commented 1 year ago
  1. data_src/
  2. data/

These directors are not created when I build, I believe this is the issue.

Tarek-Ragab-Abdelal commented 1 year ago

I got a dual boot, I tried to find out my machine type and I got these Windows_amd64 and this Linux_x86_64 for Ubuntu. Thus the program shall run for windows, but yet I can not find out where is the issue, may be it the scripts are not functional for my machine.

h9419 commented 1 year ago
  1. data_src/
  2. data/

These directors are not created when I build, I believe this is the issue.

Do you have node and npm installed like I specified in the README? The full log for building filesystem image would be helpful. It is my bad that I didn't make the script throw errors when the files are not found.

I'm also curious on which version of VS Code or VS Codium did you install? When I tried to install platformio on Windows arm version of Codium, it complained that windows arm is not supported. Did you actually install the x86 version of VS Code/Codium?

I'll summarize the state of Windows on Arm compared to Linux Arm in my limited experience of installing two libraries, numpy and platformio. Numpy does not have a distribution for WoA, but I got it working by installing tens of GBs of Visual Studio and compiling it myself. Platform IO straight out refused to install. So you may be better off installing WSL2 and VS Code for WoA, so that you can use the native arm version of VS Code frontend and Platform IO compilers

Tarek-Ragab-Abdelal commented 1 year ago

I am very grateful for you for being responsive. I am pretty sure that I got no problem with node and npm as I used to work on node projects. And I checked that they are both installed well by running 'node - v' and 'npm - v'

Also I have been working with vs code and PlatformIO for months and it's working fine.

One thing I want to mention, that when I open any script, it shows a warning that "Import" is not defined and also "env" is not defined.

Can this be the problem? I am not experienced with python, thus I don't know how to resolve this.

h9419 commented 1 year ago

@Tarek-Ragab-Abdelal

I still need the log for building/uploading filesystem and which architecture of VS Code and platform io is installed to help diagnose the issue you are facing.

Tarek-Ragab-Abdelal commented 1 year ago

Yes sure, here is the log for platformIO -> Build

 *  Executing task: C:\Users\admin\.platformio\penv\Scripts\platformio.exe run 

Processing esp32dev (platform: espressif32; board: esp32dev; framework: arduino)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------Verbose mode can be enabled via `-v, --verbose` option
CONFIGURATION: https://docs.platformio.org/page/boards/espressif32/esp32dev.html
PLATFORM: Espressif 32 (6.2.0) > Espressif ESP32 Dev Module
HARDWARE: ESP32 240MHz, 320KB RAM, 4MB Flash
DEBUG: Current (cmsis-dap) External (cmsis-dap, esp-bridge, esp-prog, iot-bus-jtag, jlink, minimodule, olimex-arm-usb-ocd, olimex-arm-usb-ocd-h, olimex-arm-usb-tiny-h, olimex-jtag-tiny, tumpa)
PACKAGES:
 - framework-arduinoespressif32 @ 3.20008.0 (2.0.8)
 - tool-esptoolpy @ 1.40501.0 (4.5.1)
 - toolchain-xtensa-esp32 @ 8.4.0+2021r2-patch5
LDF: Library Dependency Finder -> https://bit.ly/configure-pio-ldf
LDF Modes: Finder ~ chain, Compatibility ~ soft
Found 37 compatible libraries
Scanning dependencies...
Dependency Graph
|-- ESPAsyncWebServer-esphome @ 2.1.0
|   |-- AsyncTCP-esphome @ 2.0.0
|   |-- FS @ 2.0.0
|   |-- WiFi @ 2.0.0
|-- ArduinoJson @ 6.21.2
|-- LittleFS_esp32 @ 1.0.6
|   |-- FS @ 2.0.0
|-- DNSServer @ 2.0.0
|   |-- WiFi @ 2.0.0
|-- WiFi @ 2.0.0
Building in release mode
Replace MKSPIFFSTOOL with mklittlefs
./scripts/mklittlefs/Windows_amd64/mklittlefs
Retrieving maximum program size .pio\build\esp32dev\firmware.elf
Checking size .pio\build\esp32dev\firmware.elf
Advanced Memory Usage is available via "PlatformIO Home > Project Inspect"
RAM:   [=         ]  14.1% (used 46132 bytes from 327680 bytes)
Flash: [====      ]  39.8% (used 834265 bytes from 2097152 bytes)
==================================================================== [SUCCESS] Took 5.44 seconds ==================================================================== *  Terminal will be reused by tasks, press any key to close it.

After this, still no /data directory is created. And here is the log for PlatformIO -> Build Filesystem Image

 *  Executing task: C:\Users\admin\.platformio\penv\Scripts\platformio.exe run --target buildfs --environment esp32dev 

Processing esp32dev (platform: espressif32; board: esp32dev; framework: arduino)
----------------------------------------------------------------------------------------------------------------------------------------------------Verbose mode can be enabled via `-v, --verbose` option
CONFIGURATION: https://docs.platformio.org/page/boards/espressif32/esp32dev.html
PLATFORM: Espressif 32 (6.2.0) > Espressif ESP32 Dev Module
HARDWARE: ESP32 240MHz, 320KB RAM, 4MB Flash
DEBUG: Current (cmsis-dap) External (cmsis-dap, esp-bridge, esp-prog, iot-bus-jtag, jlink, minimodule, olimex-arm-usb-ocd, olimex-arm-usb-ocd-h, olimex-arm-usb-tiny-h, olimex-jtag-tiny, tumpa)
PACKAGES:
 - framework-arduinoespressif32 @ 3.20008.0 (2.0.8)
 - tool-esptoolpy @ 1.40501.0 (4.5.1)
 - tool-mklittlefs @ 1.203.210203 (2.3)
 - toolchain-xtensa-esp32 @ 8.4.0+2021r2-patch5
LDF: Library Dependency Finder -> https://bit.ly/configure-pio-ldf
LDF Modes: Finder ~ chain, Compatibility ~ soft
Found 37 compatible libraries
Scanning dependencies...
Dependency Graph
|-- ESPAsyncWebServer-esphome @ 2.1.0
|   |-- AsyncTCP-esphome @ 2.0.0
|   |-- FS @ 2.0.0
|   |-- WiFi @ 2.0.0
|-- ArduinoJson @ 6.21.2
|-- LittleFS_esp32 @ 1.0.6
|   |-- FS @ 2.0.0
|-- DNSServer @ 2.0.0
|   |-- WiFi @ 2.0.0
|-- WiFi @ 2.0.0
Building in release mode
Replace MKSPIFFSTOOL with mklittlefs
./scripts/mklittlefs/Windows_amd64/mklittlefs
Building FS image from 'data' directory to .pio\build\esp32dev\littlefs.bin
warning: can't read source directory
*** [.pio\build\esp32dev\littlefs.bin] Error 1
============================================================ [FAILED] Took 1.76 seconds ============================================================
 *  The terminal process "C:\Users\admin\.platformio\penv\Scripts\platformio.exe 'run', '--target', 'buildfs', '--environment', 'esp32dev'" terminated with exit code: 1. 
 *  Terminal will be reused by tasks, press any key to close it.
h9419 commented 1 year ago

@Tarek-Ragab-Abdelal

Ok, thank you for your logs. A few things to note first

  1. You did not revert to using SPIFFS, I hope that you are aware of it and we are on the same page
  2. The LITTLEFS script recognizes that your are using Windows_amd64 which means you are using win32 x86_64 version of VS Code and platformIO (not what I'd do for Windows on Arm because platformIO on WSL2 would be 2x as fast just by removing the emulation layer)
  3. As a result of using win32 x86_64, there should be no need to revert anything, please pull the latest master branch.

With those out of the way, I have figured out the issue. The two python script used to depend on environment variable ESP32_SPIFFS_IMAGE_NAME to specify when it should execute. However, since my last update over 2 years ago, platform io must have changed the naming of those variables.

I have made a new commit to set that to be static and the same as the one specified on platformio.ini. You should see the following log the next time your build the filesystem.

 *  Executing task: C:\Users\Harry\.platformio\penv\Scripts\platformio.exe run --target buildfs --environment esp32dev 

Processing esp32dev (platform: espressif32; board: esp32dev; framework: arduino)
----------------------------------------------------------------------------------------------------------------------------
Verbose mode can be enabled via `-v, --verbose` option
CONFIGURATION: https://docs.platformio.org/page/boards/espressif32/esp32dev.html
PLATFORM: Espressif 32 (6.1.0) > Espressif ESP32 Dev Module
HARDWARE: ESP32 240MHz, 320KB RAM, 4MB Flash
DEBUG: Current (cmsis-dap) External (cmsis-dap, esp-bridge, esp-prog, iot-bus-jtag, jlink, minimodule, olimex-arm-usb-ocd, olimex-arm-usb-ocd-h, olimex-arm-usb-tiny-h, olimex-jtag-tiny, tumpa)
PACKAGES: 
 - framework-arduinoespressif32 @ 3.20007.0 (2.0.7) 
 - tool-esptoolpy @ 1.40500.0 (4.5.0) 
 - tool-mklittlefs @ 1.203.210628 (2.3) 
 - toolchain-xtensa-esp32 @ 8.4.0+2021r2-patch5
LDF: Library Dependency Finder -> https://bit.ly/configure-pio-ldf
LDF Modes: Finder ~ chain, Compatibility ~ soft
Found 37 compatible libraries
Scanning dependencies...
Dependency Graph
|-- ESPAsyncWebServer-esphome @ 2.1.0
|   |-- AsyncTCP-esphome @ 1.2.2
|   |-- FS @ 2.0.0
|   |-- WiFi @ 2.0.0
|-- ArduinoJson @ 6.18.5
|-- LittleFS_esp32 @ 1.0.6
|   |-- FS @ 2.0.0
|-- DNSServer @ 2.0.0
|   |-- WiFi @ 2.0.0
|-- WiFi @ 2.0.0
Building in release mode
Replace MKSPIFFSTOOL with mklittlefs
renameReactAssets([".pio\build\esp32dev\littlefs.bin"], ["data"])

React build: Starting the build process for the React webapp...

Running `npm install`

up to date, audited 1311 packages in 2s

170 packages are looking for funding
  run `npm fund` for details

25 vulnerabilities (2 low, 2 moderate, 18 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Running `npm run build`

> react-websocket-client@0.1.0 build
> react-scripts build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiled successfully.

File sizes after gzip:

  69.05 kB  build\static\js\main.673b361c.js
  1.78 kB   build\static\js\787.a2b9829d.chunk.js
  553 B     build\static\css\main.9a2d3f6e.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Rename: Starting the renaming process for the SPIFFS image...

Rename: Re-creating an empty data directory C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src
Rename: Copying file: favicon.ico to the data directoryC:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src
Renaming references in index.html and move to index.html
Renaming references in static/css/main.9a2d3f6e.css and move to main.css
Renaming references in static/js/main.673b361c.js and move to main.js
Renaming references in static/js/787.a2b9829d.chunk.js and move to 787.chunk.js
gzip_webfiles([".pio\build\esp32dev\littlefs.bin"], ["data"])

GZIP: Starting the gzipping process for the SPIFFS image...

GZIP: Re-creating an empty data directory C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src\787.chunk.js
limex-arm-usb-ocd-h, olimex-arm-usb-tiny-h, olimex-jtag-tiny, tumpa)
PACKAGES:
 - framework-arduinoespressif32 @ 3.20007.0 (2.0.7)
 - tool-esptoolpy @ 1.40500.0 (4.5.0)
 - tool-mklittlefs @ 1.203.210628 (2.3)
 - toolchain-xtensa-esp32 @ 8.4.0+2021r2-patch5
LDF: Library Dependency Finder -> https://bit.ly/configure-pio-ldf
LDF Modes: Finder ~ chain, Compatibility ~ soft
Found 37 compatible libraries
Scanning dependencies...
Dependency Graph
|-- ESPAsyncWebServer-esphome @ 2.1.0
|   |-- AsyncTCP-esphome @ 1.2.2
|   |-- FS @ 2.0.0
|   |-- WiFi @ 2.0.0
|-- ArduinoJson @ 6.18.5
|-- LittleFS_esp32 @ 1.0.6
|   |-- FS @ 2.0.0
|-- DNSServer @ 2.0.0
|   |-- WiFi @ 2.0.0
|-- WiFi @ 2.0.0
Building in release mode
Replace MKSPIFFSTOOL with mklittlefs
renameReactAssets([".pio\build\esp32dev\littlefs.bin"], ["data"])

React build: Starting the build process for the React webapp...

Running `npm install`

up to date, audited 1311 packages in 4s

170 packages are looking for funding
  run `npm fund` for details

25 vulnerabilities (2 low, 2 moderate, 18 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Running `npm run build`

> react-websocket-client@0.1.0 build
> react-scripts build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiled successfully.

File sizes after gzip:

  69.05 kB  build\static\js\main.673b361c.js
  1.78 kB   build\static\js\787.a2b9829d.chunk.js
  553 B     build\static\css\main.9a2d3f6e.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Rename: Starting the renaming process for the SPIFFS image...

Rename: Deleting the "data" directory C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src
Rename: Re-creating an empty data directory C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src
Rename: Copying file: favicon.ico to the data directoryC:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src
Renaming references in index.html and move to index.html
Renaming references in static/css/main.9a2d3f6e.css and move to main.css
Renaming references in static/js/main.673b361c.js and move to main.js
Renaming references in static/js/787.a2b9829d.chunk.js and move to 787.chunk.js
gzip_webfiles([".pio\build\esp32dev\littlefs.bin"], ["data"])

GZIP: Starting the gzipping process for the SPIFFS image...

GZIP: Deleting the "data" directory C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data
GZIP: Re-creating an empty data directory C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src\787.chunk.js
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data\787.chunk.js
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src\favicon.ico
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data\favicon.ico
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src\index.html
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data\index.html
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src\main.css
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data\main.css
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data_src\main.js
GZIP: Compressing... C:\Users\Harry\Documents\PlatformIO\Projects\ESP_AP_Webserver\data\main.js
GZIP: Compressed correctly.

Building FS image from 'data' directory to .pio\build\esp32dev\littlefs.bin
/787.chunk.js
/favicon.ico
/index.html
/main.css
/main.js
=========================================================== [SUCCESS] Took 15.07 seconds ===========================================================
 *  Terminal will be reused by tasks, press any key to close it.

As the log suggests, the react web app has not been updated for over 2 years and has some security issues. Feel free to create PR to fix them

Tarek-Ragab-Abdelal commented 1 year ago

<Screenshot_2023-04-30-16-47-01-80_cbe8c7c25be320d0c6f8847e2dea9fd0.jpg

Here is the output up to the latest commit you did.

Tarek-Ragab-Abdelal commented 1 year ago

Awesome, it seems tat we are almost getting it working

 *  Executing task: C:\Users\admin\.platformio\penv\Scripts\platformio.exe run --target uploadfs --environment esp32dev 

Processing esp32dev (platform: espressif32; board: esp32dev; framework: arduino)
------------------------------------------------------------------------------------------------------------------------------------------------------Verbose mode can be enabled via `-v, --verbose` option
CONFIGURATION: https://docs.platformio.org/page/boards/espressif32/esp32dev.html
PLATFORM: Espressif 32 (6.2.0) > Espressif ESP32 Dev Module
HARDWARE: ESP32 240MHz, 320KB RAM, 4MB Flash
DEBUG: Current (cmsis-dap) External (cmsis-dap, esp-bridge, esp-prog, iot-bus-jtag, jlink, minimodule, olimex-arm-usb-ocd, olimex-arm-usb-ocd-h, olimex-arm-usb-tiny-h, olimex-jtag-tiny, tumpa)
PACKAGES:
 - framework-arduinoespressif32 @ 3.20008.0 (2.0.8) 
 - tool-esptoolpy @ 1.40501.0 (4.5.1)
 - tool-mkfatfs @ 2.0.1
 - tool-mklittlefs @ 1.203.210203 (2.3)
 - tool-mkspiffs @ 2.230.0 (2.30)
 - toolchain-xtensa-esp32 @ 8.4.0+2021r2-patch5     
LDF: Library Dependency Finder -> https://bit.ly/configure-pio-ldf
LDF Modes: Finder ~ chain, Compatibility ~ soft
Found 37 compatible libraries
Scanning dependencies...
Dependency Graph
|-- ESPAsyncWebServer-esphome @ 2.1.0
|-- ArduinoJson @ 6.21.2
|-- LittleFS_esp32 @ 1.0.6
|-- DNSServer @ 2.0.0
|-- WiFi @ 2.0.0
Building in release mode
Replace MKSPIFFSTOOL with mklittlefs
./scripts/mklittlefs/Windows_amd64/mklittlefs
renameReactAssets([".pio\build\esp32dev\littlefs.bin"], ["data"])

React build: Starting the build process for the React webapp...

Running `npm install`

up to date in 6s

170 packages are looking for funding
  run `npm fund` for details

Running `npm run build`

> react-websocket-client@0.1.0 build
> react-scripts build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiled successfully.

File sizes after gzip:

  69.05 kB  build\static\js\main.673b361c.js
  1.78 kB   build\static\js\787.a2b9829d.chunk.js
  553 B     build\static\css\main.9a2d3f6e.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Rename: Starting the renaming process for the SPIFFS image...

Rename: Deleting the "data" directory C:\Users\admin\Desktop\ESP_AP_Webserver\data_src
Rename: Re-creating an empty data directory C:\Users\admin\Desktop\ESP_AP_Webserver\data_src
Rename: Copying file: favicon.ico to the data directoryC:\Users\admin\Desktop\ESP_AP_Webserver\data_src
Renaming references in index.html and move to index.html
Renaming references in static/css/main.9a2d3f6e.css and move to main.css
Renaming references in static/js/main.673b361c.js and move to main.js
Renaming references in static/js/787.a2b9829d.chunk.js and move to 787.chunk.js
Building FS image from 'data' directory to .pio\build\esp32dev\littlefs.bin
/787.chunk.js
/favicon.ico
/index.html
/main.css
/main.js
gzip_webfiles([".pio\build\esp32dev\littlefs.bin"], ["data"])

GZIP: Starting the gzipping process for the SPIFFS image...

GZIP: Deleting the "data" directory C:\Users\admin\Desktop\ESP_AP_Webserver\data
GZIP: Re-creating an empty data directory C:\Users\admin\Desktop\ESP_AP_Webserver\data
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data_src\787.chunk.js
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data\787.chunk.js
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data_src\favicon.ico
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data\favicon.ico
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data_src\index.html
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data\index.html
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data_src\main.css
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data\main.css
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data_src\main.js
GZIP: Compressing... C:\Users\admin\Desktop\ESP_AP_Webserver\data\main.js
GZIP: Compressed correctly.

Looking for upload port...
Auto-detected: COM3
Uploading .pio\build\esp32dev\littlefs.bin
esptool.py v4.5.1
Serial port COM3
Connecting....
Chip is ESP32-D0WDQ6 (revision v1.0)
Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse, Coding Scheme None
Crystal is 40MHz
MAC: 08:3a:f2:ab:2f:e4
Uploading stub...
Running stub...
Stub running...
Changing baud rate to 921600
Changed.
Configuring flash size...
Flash will be erased from 0x00210000 to 0x003fffff...
Compressed 2031616 bytes to 79611...
Writing at 0x00210000... (20 %)
Writing at 0x00382abd... (40 %)
Writing at 0x00386ab8... (60 %)
Writing at 0x0038aab3... (80 %)
Writing at 0x0038ea66... (100 %)
Wrote 2031616 bytes (79611 compressed) at 0x00210000 in 6.4 seconds (effective 2554.1 kbit/s)...
Hash of data verified.

Leaving...
Hard resetting via RTS pin...
============================================================ [SUCCESS] Took 29.53 seconds ============================================================ *  Terminal will be reused by tasks, press any key to close it.

Now when I connect to the ESP AP, it loads nothing

Tarek-Ragab-Abdelal commented 1 year ago

image Here are the new files created by the scripts

h9419 commented 1 year ago

You are very close, but the problem is that Building FS image from 'data' directory to .pio\build\esp32dev\littlefs.bin executed before the GZIP part, thus packaging the non-gzipped files to the filesystem.

It is strange that platformio is not following the configurations. As a hack, you can do the following:

  1. Build the filesyetm image once to create data and data_src directories
    • Make sure the files in data are not plaintext, VS Code will tell you it is either binary or uses an unsupported text encoding
  2. In platformio.ini, comment out the following two lines to skip them
    • post:scripts/prepare_React.py
    • post:scripts/prepare_gzip.py
  3. Upload the filesystem again
Tarek-Ragab-Abdelal commented 1 year ago

I followed your instructions, but I still getting the same result. Here is the serial logs when the code run

E (318) esp_core_dump_flash: ��� core dump partition found!
E (318) esp_core_dump_flash: No core dump partition found!
Server Started

And I made sure that the contents of /data directory are not plaintext, VS Code told me as you mentioned.

h9419 commented 1 year ago

I have figured out the problem. Since Platform IO added support for LittleFS that wasn't present when I started the project, there are namespace conflicts now.

I have cooked up something that works, will make an update soon

h9419 commented 1 year ago

@Tarek-Ragab-Abdelal

In the version since I first implemented this, platformio's version of Arduino ESP32 has LittleFS built in and I no longer need to jump through all the hoops for the feature of folders. The namespace collision is what makes it problematic and I have reworked it to be even simpler now.

You can try again. As you can see, the blank slate I provide is just the bare minimum to connect between a web app running on more powerful devices and the GPIO of the ESP32. You can have up to 4 simultaneous connections to the websocket server since that is the number of wifi devices you can connect to the AP.