Web deployment helper tool

Bringing your stacks to the web

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 261
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Web deployment helper tool

Post by SWEdeAndy » Sun Mar 17, 2024 11:07 pm

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!
Last edited by SWEdeAndy on Thu Apr 04, 2024 8:24 pm, edited 2 times in total.
Andreas Bergendal
Independent app and system developer
WhenInSpace: https://wheninspace.se

stam
Posts: 2680
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Web deployment helper tool

Post by stam » Mon Mar 18, 2024 12:52 am

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
Posts: 8
Joined: Thu Aug 07, 2008 9:50 am

Re: Web deployment helper tool

Post by grzkmo » Mon Mar 18, 2024 1:00 am

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
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 261
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: Web deployment helper tool

Post by SWEdeAndy » Mon Mar 18, 2024 6:16 pm

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).
Andreas Bergendal
Independent app and system developer
WhenInSpace: https://wheninspace.se

SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 261
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: Web deployment helper tool

Post by SWEdeAndy » Sat Mar 30, 2024 8:28 pm

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! :D

Edit: Link to official latest release: https://github.com/wheninspace/WIS_WebD ... ses/latest
Last edited by SWEdeAndy on Thu Apr 04, 2024 8:26 pm, edited 1 time in total.
Andreas Bergendal
Independent app and system developer
WhenInSpace: https://wheninspace.se

SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 261
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: Web deployment helper tool

Post by SWEdeAndy » Sun Mar 31, 2024 11:24 am

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

Settings tab:
WDH settings.png
Actions tab:
WDH actions.png

https://github.com/wheninspace/WIS_WebDeployHelper
Andreas Bergendal
Independent app and system developer
WhenInSpace: https://wheninspace.se

SWEdeAndy
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 261
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: Web deployment helper tool

Post by SWEdeAndy » Fri Apr 05, 2024 4:48 pm

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.
Andreas Bergendal
Independent app and system developer
WhenInSpace: https://wheninspace.se

bobcole
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 135
Joined: Tue Feb 23, 2010 10:53 pm
Location: Saint Louis, Missouri USA

Re: Web deployment helper tool

Post by bobcole » Sat Apr 06, 2024 4:07 pm

@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
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 261
Joined: Sat Aug 16, 2008 9:48 am
Location: Stockholm, Sweden
Contact:

Re: Web deployment helper tool

Post by SWEdeAndy » Sat Apr 06, 2024 5:28 pm

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.
Andreas Bergendal
Independent app and system developer
WhenInSpace: https://wheninspace.se

Post Reply

Return to “HTML5”