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 HTML5" 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

Poster_Child_Hello.zip

Open the Standalone Builder

Open the Standalone builder from the File menu.

Select Build for HTML5

In the standalone builder, click on HTML5 (1) and then check the box Build for HTML5 (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 HTML5, you may see a message telling you that the app was not built for Mac, Windows or Linux.

Your HTML5 Output

You should now see in your folder, a new folder containing 4 files. These are

  1. an html file intended for quick testing of your build
  2. .js file which is the actual engine for running the app
  3. .wasm file containing data to run your app
  4. 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.

13 Comments

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!

Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.