How Do I Put My First App On the Web - LC 10 and later
Introduction
This article applies to Web Apps built with LiveCode 10 dp-1 and above. If you are using an older version of LiveCode please see this article instead. To build your Web App you simply build your app in LiveCode like any other app, then when you are ready to deploy, you choose "Build for Web" in the standalone builder. This lesson steps you through the build process to get your app onto the web. To do this you need to have a purchased license for LiveCode Web.
Create Your App
First you need to create an app. For this tutorial I'm going to use a Hello World app I've made previously. It's a very simple app, which allows you to click a button and display the message "Hello". You can download the stack if you want to use it to test from this url: https://tinyurl.com/y89atm54
Open the Standalone Builder
Open the Standalone builder from the File menu.
Select Build for Web
In the standalone builder, click on Web (1) and then check the box Build for Web (2)
Save the Standalone
Select Save as Standalone Application from the File menu, and choose a location to save the files to. A dialog will appear asking you to save the application. Click Save. You should see some dialogs informing you of the progress of the build. If you only have a license for Web, you may see a message telling you that the app was not built for Mac, Windows or Linux.
Your Web Output
You should now see in your folder, a new folder containing 4 files. These are
- an html file intended for quick testing of your build
- .js file which is the actual engine for running the app
- .wasm file containing data to run your app
- standalone.zip which contains your app, any resources it needs and a virtual file structure for running in the browser.
Test Your App
For a quick test of your app, use the Test button inside LiveCode. First go to the Development menu and ensure you have selected a Test Target:
Note: in 10 dp-1 you must select Default Browser. In future releases you will be able to correctly select your desired browser from the list.
Once you have selected a browser, click the Test button:
After a brief pause you should see the app running in your browser, and if you click the button it will say "Localhost says Hello!".
Putting it on the web
So far so good, but your app is still running from your desktop. Lets fix that. For the next step you need a hosting account to upload your app to - I'm using our own LiveCode Hosting site, but you can upload to any regular hosting account. First, I'm going to create a new folder on my server, named Poster_Child2. Into this folder I'm uploading the files created by the Standalone Builder:
This is what it should look like:
Now all you have to do is go to the correct url to see your app running on the web.
Test Your App in the Browser
Now go to the url you have uploaded your file to, in my case this is https://lainopik.livecodehosting.com/Poster_Child2/Poster_Child_Hello.html. Wait for a moment or two while the engine loads - you won't see anything as we haven't added any feedback to tell us what is happening. After a few seconds, you should see this:
And if you click the button, you should get a dialog that says "Hello". Congratulations, you've uploaded your first LiveCode Web App.
Torsten
Hi,
thanks for the introdcution. I habe sucessfully created some stacks in LC10, but now I have some questions:
1. How to get rid of the Livecode Button upper left and the checkboxes on the upper rioght side?
2. Why did "put url theWebAdress into field 1" does not work in the browser?
Cheers
Torsten
Panos Merakos
Hello Torsten,
1. You can customise the html output, by editing the template html here:
/Applications/LiveCode 10.0.0 (dp 1).app/Contents/Tools/Runtime/Emscripten/wasm/standalone-10.0.0-dp-1.html
For example, you can remove the LiveCode logo by deleting the whole
tag
Similarly, to remove the various checkboxes at the top right you can delete these tags:
Resize canvas
Lock/hide mouse pointer
You get the idea.
2. Currently it seems that the inclusion of the Internet library breaks the URL calls (including put url ...). It might be worth trying without the Internet library inclusion, but this issue will be fixed in next releases of LC 10.
Cheers,
Panos
Torsten
Manually selecting inclusion and then de-checking internet library does not change the behavior :-/
When will the next release be available?
Cheers,
Torsten
Matthias Rebbe
Thorsten, 'put url' currently doesn't seem to work. There is already a report for this.
https://quality.livecode.com/show_bug.cgi?id=23470
You could add your email address to the CC list of that report to be informed about the status.
Torsten
Hi Panos,
I have played around with the html-tempate but i am still a bit confused. Is ist possible to have a template of the html-file whre only the app is running an no other things are visible?
Cheers,
Torsten
Heather Laine
Hi Torsten. Yes, this is possible, you need to edit the code on the html page to do this. We will look at making this easier in later releases of LiveCode 10. Right now, you need to identify the code that displays the LiveCode logo and loading symbols and delete it.
Torsten
Hi Heather,
"Right now, you need to identify the code that displays the LiveCode logo and loading symbols and delete it."
That is exactly the problem ;-) Just deleting some tags results in a blank screen, because there are some references in the Javascript code to these tags.
What I suggest is a very plan simple html-page, where only the stack itself appears and nothing else. Code I could also copy into another page where e.g. the usage of the app is explained.
My be this is very easy for someone who knows Javascript, but I don't :-)
Cheers,
Torsten
Panos Merakos
Hello Torsten,
If you want to remove the whole LC logo part from the html template, you have to remove the part starting from <a href="https://livecode.com">,
until the part </svg></a> (included)
Hope this helps.
Kind regards,
Panos
Torsten
Hi Panos,
this part is easy, but removing the "non functioning" buttons is more dangerous.
My best attempt was here: https://www.urban-codesign.com/projects/localstickers/index.html
But there is an error message I did not understand.
Cheers,
Torsten
Panos Merakos
I just realised that in one of my previous messages some text did not appear as I would expect, so some info is missing. So I am re-writing my reply here:
...
Similarly, to remove the various checkboxes at the top right you can delete these tags:
<span><input type=checkbox id=resize>Resize canvas</span>
<span><input type=checkbox id=pointerLock checked>Lock/hide mouse pointer </span>
<span><input type=button onclick='Module.requestFullScreen(document.getElementById("pointerLock").checked,document.getElementById("resize").checked)'value=Fullscreen></span>
You get the idea.
Jim Lambert
Thanks for this.
The browser seems to cache everything when fetching from remote site.
This is good for avoiding repeated downloads of the engine, but less helpful for testing.
What is the best way to post different versions of your LC HTML app?
For example, Is it possible to just change .js, .wasm files?
Thanks!
Heather Laine
To avoid the caching issue when developing, you can turn off caching for the page your app is on. In Chrome (but others will be similar) go to Developer Tools>Network and there is a “Disable Cache” checkbox. That should do it.
Jim Lambert
Thanks, Heather!
Philippe Coenen
Thank you very much for the article.
Can you provide the code showing the stack and only the stack?
I tried quite a lot until now without any success.
I also suggest to ass some options directly in the standalone settings, for example:
Scale the stack to the browser window.
Set the min-width of the stack
Set the max-width of the stack
Keep the stack aspect ratio
Set the browser background color
etc
But for now, the most important is to provide a strict minimal HTML instead of a pretty complex one.
Panos Merakos
Hello Philippe,
Assuming you use LC 10.0.0-dp-4, you can use something like this:
<html>
<body>
<canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type="text/javascript">
var Module = { canvas: document.getElementById('canvas') };
</script>
<script async type="text/javascript" src="standalone-10.0.0-dp-5.js"></script>
</body>
</html>
To test how this will look, you can create a file named "standalone.html" with this ^^ content, and add it to the Copy Files section. This "custom" html will replace the html template used by LC. Hope this helps!
Panos Merakos
Heh, sorry for the multiple comments - I was struggling to achieve proper html formatting.
In the html of the previous comment, the line:
<script async type="text/javascript" src="standalone-10.0.0-dp-5.js"></script>
should be:
<script async type="text/javascript" src="standalone-10.0.0-dp-4.js"></script>
Philippe Coenen
Hi,
Thank you very much for your answer.
Here is the full code I finally put:
body {
margin: 0;
padding: 0
}
var Module = { canvas: document.getElementById('canvas') };
To be able to test it I simply replace the "standalone-10.0.0-dp-4.html" file with it.
I still have two problems, though.
1) I still have a margin or padding. As you can see in the code, I attempt to style the body of the HTML but had no success on that. Any advise?
The other problem, more annmying I guess, is the style of the app is also very different than what I have in Livecode.
I made a screen copy:
https://nftstorage.link/ipfs/bafybeickadmwrsvcz2vgyvktm6fkfvscpfqv7v3hydpest7vic7bnyr35i
Panos Merakos
Hello Philippe,
RE (1), I think you could set the background of the webpage to match the one of the stack (or vice versa), so as to "mask" the margin/padding
RE (2), yeah, some elements are drawn differently on Web (they use the Motif theme) and can be ugly :) A solution for this would be to hide the scrollbars and use some javascript to allow scrolling. I'll try to write a lesson on this today - I'll post the link here when it is ready. Another difference is the fonts used - in this case you could just add the custom font in the Copy Files section of the standalone application settings.
Cheers,
Panos
--
Philippe Coenen
Hi Panos,
Thank you, your answer is laser sharp.
For the BG, that is already clear (not too annoying)
Now for the scrolling field, it's another matter:
It's even a problem within LiveCode itself.
When you style a field, it seems you have no way to style the scroll.
I'm working on an editor with a dark theme, and it's pretty ugly.
The insane thing is that it updates the interface faster than photoshop!
The real solution could be to develop a custom scroll bar.
We could have a group that contains the custom scroll and the field. With the code in the group.
The custom scroll will be made of a grc that would be the background and a button that would be the slider.
The height of the button would represent the size of the content of the field relative to the height of the grc.
We would slide the button with a simple grab and update the field using the loc of the btn collected in the mousemove (we will block the x moves in the mousemove).
I think it would be a wonderful lesson and I saw several comments about the problem of styling the scroll of a field. this would be an elegant solution. And will definitively prove the beauty of LiveCode.
I'll probably try again however my chances of success are quite low.
Best.
Panos Merakos
Hello Philippe,
Thanks. Indeed, implementing a custom scrollbar sounds like a nice solution.
BTW, the lesson about using javascript to scroll a LC text field on Web is here: https://lessons.livecode.com/m/2592/l/1595736-scrolling-a-livecode-text-field-on-web-using-javascript
Hopefully it will allow you to get rid of the ugly Motif scrollbars :)
Kind regards,
Panos
--
Philippe Coenen
Thanks, Panos. I have checked the solution
Mhhh... It's still pretty ugly... and it's still fairly complex.
Maybe it would be better to style the field using CSS? I guess there is a CSS that styles everything to keep the look and feel of Livecode.
So why not style the fields correctly when you build the standalone?
The idea of LiveCode is to have everything working without changing the code, right?
I know there are solutions to go around the problem, but what do you plan to fix it? And when can it be done?
A go-around is always not so easy and can cause trouble to maintain.
I thank you already for your answer :)
Panos Merakos
Hello Philippe,
The plan is to have both scrolling and appearance as well as all other functionalities to work "out of the box" when LC 10 goes GM. These all are just workarounds that will help users keep going until then.
Kind regards
Gottfried Schwemer
Thank you, Panos, for the encouragement to use Livecode 10. Using the discussion here above I suceeded in starting the app, and the iPad-keyboard now works well. But there is a new difficulty: My app has some cascade popup buttons with submenus and subsubmenus (and 1 subsubsub!). These too work well on desktop, but not on iPad. The first submenu works only by double fingertip, the deeper subsubmenus don't work at all. Perhaps you know this problem? I couldn't find a solution. Thank you already now!
Panos Merakos
Dear Gottfried,
What you describe sounds like a bug. Could you please file a report in https://quality.livecode.com, and ideally attach a simple sample stack that demonstrates the issue? We will then try to fix it asap and include it in the next LC 10 release.
Kind regards,
Panos
Gottfried Schwemer
Dear Panos,
I have another problem: polytonic Greek seems not to work in a standalone for web. The words ἐν ἀρχῇ ἦν ὁ λόγος, entered correctly in fields of an app are shown correctly in all other standalones, but not in the standalone for web. It shows Greek, but the special characters for old Greek are missing.
Panos Merakos
Hello Gottfried,
I have not tested this, but I think you have to include a custom font (in the Copy Files section of the standalone) that supports polytonic Greek, and set the textFont property of the field that contains the polytonic greek text to this font.
Kind regards,
Panos
Gottfried Schwemer
Dear Panos, thank you for your help. Now it works.
Kind regards
Gottfried
Thomas Seewald
I use the browser widget.
I can navigate to it and, for example, jump somewhere in a YouTube video with player.seelTo().
In the desktop version, I just read the position from the video during idle and let the user and YouTube control the video.
In the web version, I don't manage to read data from the video.
Help is gratefully accepted.
https://pravilo.icu/youTube-Learner32/youTube-Learner.html
Panos Merakos
Hello Thomas,
Could you share the script that reads the position from the video during idle?
Also, do you mean that you do this in the "on idle" message? If yes, this message is not supported in the Web standalone.
Kind regards,
Panos
--
Thomas Seewald
put "var element = player.getPlayerState();alert(element);liveCode.getLaeuft(element);" into dasscript
if the platform is "web" then
--put "console.log(228)" into dasscript
DO DASSCRIPT as javascript
else
DO DASSCRIPT IN WIDGET "BROWSER"
end if
And idle is supported in LC10 WEB - I thought that this could be the problem, but I can "alert(1)" via idle.
You can have the whole stack - and we try it for "the cloud". You are from LiveCode? Contact me directly and perhaps do not "post" this message
Panos Merakos
@Thomas
Oh, I had a look at the dictionary entry for the "idle" message and it does not include "Web" in the supported platforms - i guess we need to update these docs then.
RE your stack - I looked up your license and it does not include email support - so in this case we cannot accept your stack. You could ask for help in our user forums though: https://forums.livecode.com
Kind regards,
Panos
--
Andreas Bergendal
Just a hint that this helper tool/stack makes web deployment even easier and adds useful features: https://github.com/wheninspace/WIS_WebDeployHelper/releases/latest