Web deployment helper tool

[SWEdeAndy]

Edit: WebDeployHelper is now officially released!
The latest version will always be here:
https://github.com/wheninspace/WIS_WebD ... ses/latest

The LiveCode 10 wasm-based web deployment feature is generally quite capable, but it is also lacking a number of very fundamental functions that really should be there out-of-the-box.

Many of them can be fixed with some html and javaScript tinkering, but even in the age of AI assistance, there are many pitfalls to avoid, and thresholds to overcome in order to get a functional LiveCode web app up and running.

I gather that many fellow LiveCoders have been discouraged to try out web deployment due to these obstacles.

Well, this tool tries to cover some of that gap. I hope some of you are willing to test this pre-release beta version of the WebDeployHelper tool. The current version can help you do the following:

- Modify the appearance of the web page that the LC stack resides on (your own logo, background colour etc)
- Add code that will make the stack resize when the browser window is resized, or make the stack stay centred on the web page
- Add code that enables pasting into fields, putting text into the clipboard and launch URLs
- Add code that will give you access to the localStorage functionality, which enables saving data between sessions
(More features will be added in future versions.)

Some of these features require javaScript inserts into the html file, some handler inserts into your stack script, and some both.

After selecting the features you want, the WebDeploymentHelper tool will package all that’s needed and produce an HTML file that replaces the one the standalone maker makes.

If you want, the tool also deletes the previous build folder, and triggers the standalone builder, before placing the enhanced html file in the build folder. In other words, it can automate some of the standard actions you would probably do anyway (if my own work process is anything to go by).

In future versions I may implement uploading to web server by ftp as well, but for now putting the deployment files on your web server is up to you to manage.

The stack requires LC10.0.0 dp7+ and naturally a web deployment license for LC10.
It can be used 'as is' or put into the plugins folder.

Feedback on everything is welcome!

[stam]

Thanks for sharing Andreas - looks like an absolutely essential stack and as you say should have been provided out of the box... but thank you for providing a great interim solution!

[grzkmo]

Oh, that's very interesting.
Thank you for sharing your tool.
It's very timely, as we planned to cancel our web (HTML5) license next week because too many functions have been missing for a long, long time and development is apparently not progressing.
We will test your tool as soon as possible. Thank you and
Best regards
Günter

[SWEdeAndy]

Just discovered a slight bug that is now fixed (attachment in first post updated).
Pasting in an LC field in a web browser apparently behaves differently on Mac and Windows.
On Mac I've found no way to intercept the 'v' that goes into the field when pasting with command + v.
So my script removes it. Turns out that on Windows no 'v' goes there on ctrl + v, so it deleted incorrectly.

The script now checks for the platform (with js, as "the platform" doesn't give the OS on web), and only deletes the sneaky 'v' if on Mac. I can't test how this behaves on Linux, so if someone is testing that please let me know if pasting behaves correctly.

Unfortunately, when running a web stack in a mobile browser, pasting is not currently possible (as there is no keyboard shortcut or menu, and it is also not a native mobile field so the OS field menu doesn't appear when poking the field).

[SWEdeAndy]

OK, so here's the next version. It still basically does the same thing, but now I have greatly improved the workflow when deploying.

The tool can now upload the standalone files via ftp to your server, if you enter the login credentials for an ftp upload account. In my case, I used cPanel at my web host to create a limited ftp user that only accepts uploads to one specific folder.

After entering these credentials in the tool, you can with one click set an automated workflow in motion that will:
- delete the previous build folder
- trigger the standalone builder
- replace the generic html file in the build folder with the enhanced one
- upload all the files (or just the changed ones, if not first upload) to the server
- launch the web page in your web browser

You have full control of the workflow and can run or skip every step independently, and even pause and resume at any point.

(One breaking change from the previous version - the prefs file is now encrypted (as it may contain ftp psw), so your settings from the previous version will not carry over. From now on though, they should be preserved for every new update (I hope).

For me this tool is such a time-saver already! But guys, do go ahead and break it, and tell me how you did, so it can be further improved!

Edit: Link to official latest release: https://github.com/wheninspace/WIS_WebD ... ses/latest

[SWEdeAndy]

Here are two screenshots to show how it looks "in action":

Settings tab:

Actions tab:

https://github.com/wheninspace/WIS_WebDeployHelper

[SWEdeAndy]

And here's a demo web app created with the help of WebDeployHelper 1.0.1:
https://wheninspace.com/WebDeployHelperTest/

Please report any bugs or enhancement requests here, or as an issue on GitHub.

[bobcole]

@SWEdeAndy:
Thank you for posting your WebDeployHelperTest program to the web. It has a lot of great features.
Using Safari the program crashes occasionally with this message:

Exception thrown, see JavaScript console

I see this error with my programs, too. Example: https://morrevbon.com/WordHelper/WordHelper.html
I have yet to figure out a recipe for this error, it seems to occur at random times.
It is a JavaScript error; it is beyond my level of programming.
If you can figure out what is going on, please let this list know.
Thanks,
Bob

[SWEdeAndy]

Thanks for the feedback, Bob!

Yes, the notorious "Exception thrown" error haunts the web deployments in various degrees.

For me it happens most often on Safari on iPhone, sometimes on Safari on Mac, and rarely on Firefox/Chrome on Mac (haven't had the chance to test much on Windows yet, and can't test on Android).

I too experience this as very random events - they can occur after doing the exact same thing twice, or in other unpredictable ways.
I hope future LC 10 releases will handle this better, or provide better debugging possibilities.

If I find out more in the meantime, I will for sure share the knowledge here.

[SWEdeAndy]

New release:

v1.0.2 (13 May 2024)
- Enhancement: It is now possible to use the built-in Test function to deploy locally and still get all the advanced features (the html file is added to the Copy files section in the standalone builder)
- Enhancement: Verdana (plain, bold, italic) added to web font CSS code
- Enhancement: Build folder no longer opens automatically on Create, to prevent stacking up of folder windows. Open it manually if needed by clicking the url in the event log.
- Other minor fixes

https://github.com/wheninspace/WIS_WebD ... ses/latest

[williamdesmet]

Just played with it and this is great.
Thank you!

I really hope 'print' and 'export screenshot from rect to image' can be added to LC10.
Then it will be perfect for my use case.