[Question] Local Development

[kylebme]

I'm wondering if there is a setup for doing local development. In other words, developing without uploading the index.html.gz file every time you make a change.

I ran into a few issues with this. Ideally, I would like to develop on the pre-minified version. The index.html file in www doesn't work, so the gulp file must be doing some other important stuff.

The main issue is that the scripts and links all reference the URL in the bar as the server's address. But local development means the html/js/css is served locally, but everything else (sockets, get requests, etc.) gets forwarded to the ESP32 on your network.

If you don't have a setup for this already, then I'll look into setting something up.

[kylebme]

Ok I took a detailed look at the gulp file. The package2test task seems to be the answer to my first question. Still don't know the solution to the second question though.

[luc-github]

Hi sorry - just morning here. well yes in theory package2test generate offline page which simulate some queries it rely on code put between 2 tags

  //removeIf(production)
    connectsuccess("FW version:0.9.9X # FW target:Smoothieware # FW HW:Direct SD # primary : /sd/ # secondary : /ext/ # authentication: no");
    return;
    //endRemoveIf(production)

But I actually stopped to use it and maintained because 1 - I almost no need it ( I need to test live on different browser with different os)
2- it is very limited, specific answer for specific query. no upload...
3 - make code hard to read with visual pollution

So someone suggested me to use a nodejs server and a proxy, but I never had time to work on it, Also, now I am on rewrite of webUI for 3.0 which support this feature, there was no really point to do it for 2.1 as new UI will be in 3.0

So sorry no there is not such possibility in 2.1

[kylebme]

Gotcha. Do you have a list of planned features for 3.0?

Also, I have a relatively simple solution for this I think. In http.js, SendGetHttp, add a variable (hard_ip), which can be set by developers to their ESP32's ip. var cmd = { cmd: hard_ip + url, type: "GET", isupload: false, resultfn: result_fn, errorfn: error_fn, id: cmd_id };

The issue is that I think I'm getting CORS issues with the requests. Firefox is giving me a response code of 0 and an empty response, even though the Firefox network tool is showing that there is a response with code 200. So it might require a small modification to the ESP32 web_server code as well to send additional headers. I'll try that tomorrow.

Also, I modified package2test to remove the production tagged areas too, since I noticed those were simulated queries, which is not what I want.

[luc-github]

UI 3.0 is not yet really fixed -check here I spent some time to learn Preact and JSE6, now just on the code base: dialog box / http queries / translations / websocket,

The new UI need to support all feature requests and also new feature of ESP3D 3.0

but if still need the esp32 for websocket and upload to make it work why not directly upload on ESP32 ?

[luc-github]

@kylebme I do no know if you could use it, but I have just implemented the support for GET and Websocket in 3.0 https://github.com/luc-github/ESP3D-WEBUI/commit/26df66ea0ae2c36e8dfe0ad329191c3aeab238db

[Schytil]

Hi I’m making some machine like 3D printer + CNC in one. I like your WEB UI. I change somethings in version 2.1 for fitting for my machine, but I don’t know how debugging. I’m working with Visual Studio Code. Maybe is necessary change somethings in launch.json for successful debugging. I’m beginner in programing. I know nothing about Node.js , but I need generate new Index.html.gz Can you send mi some Instructions (or short video) how make it? Thank you very much.

[luc-github]

@Schytil did you read https://github.com/luc-github/ESP3D-WEBUI/wiki/Compilation---Development

[Schytil]

C:\Users\schyt>npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 7570 packages in 3.71s

17 packages are looking for funding run npm fund for details

found 4 vulnerabilities (2 low, 2 high) run npm audit fix to fix them, or npm audit for details

[Schytil]

C:\Users\schyt>npm audit

                   === npm audit security report ===

                             Manual Review
         Some vulnerabilities require your attention to resolve

      Visit https://go.npm.me/audit-guide for additional guidance

Low Prototype Pollution

Package lodash

Patched in >=4.17.5

Dependency of gulp-smoosher [dev]

Path gulp-smoosher > lodash

More info https://npmjs.com/advisories/577

High Prototype Pollution

Package lodash

Patched in >=4.17.11

Dependency of gulp-smoosher [dev]

Path gulp-smoosher > lodash

More info https://npmjs.com/advisories/782

High Prototype Pollution

Package lodash

Patched in >=4.17.12

Dependency of gulp-smoosher [dev]

Path gulp-smoosher > lodash

More info https://npmjs.com/advisories/1065

Low Prototype Pollution

Package minimist

Patched in >=0.2.1 <1.0.0 || >=1.2.3

Dependency of gulp-ng-annotate [dev]

Path gulp-ng-annotate > ng-annotate > optimist > minimist

More info https://npmjs.com/advisories/1179

found 4 vulnerabilities (2 low, 2 high) in 7570 scanned packages 4 vulnerabilities require manual review. See the full report for details.

C:\Users\schyt>

[Schytil]

Yes but something is wrong and I Don't know how continue.

[Schytil]

C:\Users\schyt>npm fund ESP3D-WebUI +-- rimraf@3.0.2, glob@7.1.6 | -- url: https://github.com/sponsors/isaacs +-- picomatch@2.2.2 |-- url: https://github.com/sponsors/jonschlinkert +-- resolve@1.15.1, has-symbols@1.0.1, is-date-object@1.0.2, is-symbol@1.0.3, es-to-primitive@1.2.1, is-callable@1.1.5, is-regex@1.0.5, object-inspect@1.7.0, string.prototype.trimleft@2.1.1, string.prototype.trimright@2.1.1, es-abstract@1.17.5 | -- url: https://github.com/sponsors/ljharb +-- is-finite@1.1.0 |-- url: https://github.com/sponsors/sindresorhus -- binaryextensions@2.2.0, textextensions@2.6.0 -- url: https://bevry.me/fund

C:\Users\schyt>

[luc-github]

ignore vulnerability I do not know what is npm fund

the command to build in wiki is clear : gulp package

[Schytil]

C:\Users\schyt>gulp package [23:01:55] No gulpfile found

C:\Users\schyt>

[luc-github]

are you in webui repository ?

[Schytil]

no.... Now is working. Thank you very much.

[luc-github]

@kylebme any update ?

[bferrarese]

@kylebme you can easily remove CORS by adding

web_interface->web_server.sendHeader("Access-Control-Allow-Origin", "*"); 

before any

web_interface->web_server.send(200...

in syncwebserver.cpp.

You don't really need it before every single "send(200...". If you read the code you will figure witch ones are really relevant, but this is optional.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.