I followed your instructions up till .."
LiveCode LessonsLiveCode LessonsHow To - Step-By-Step Guides To Tasks In LiveCode HTML5How Do I Put My First App On the Web
How Do I Put My First App On the Web
Introduction
From version 8.0 and onwards, LiveCode now allows you to build HTML5 apps that will run in a webpage. To do this 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 either need to use LiveCode Community, or have a purchased license for LiveCode HTML5.

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

an html file intended for quick testing of your build
html.mem file containing data to run your app
.js file which is the actual engine for running the app
standalone.zip which contains your app, any resources it needs and a virtual file structure for running in the browser.

For a quick test of your app, you can open the .html file straight away in your browser. Double click the file, making sure it is still in the same folder as the rest of the files. Note: it is recommended to use Safari for this test, as Chrome does not allow you to run local file:/ paths. You should see something like this:

It may take a moment or two to load. Then you should see this:

Putting it on the web
So far so good, but your app is still running from your desktop, and it has that LiveCode logo in it and some other things you probably don't want to see. 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 file on my server (you can of course also create an html file on your computer using any regular web editing tool).

I created a new folder called Poster_Child.
Then I created a file named poster_child_app.
Next I clicked edit to edit the file online.

Now I have a blank file, and I'm going to add the very minimum amount of code needed to run my LiveCode app. This is it:

var Module = { canvas: document.getElementById('canvas') };

Note, you must match the name of the .js file, highlighted in red, to the name of the engine you have created when you built your standalone. I'm using Indy 9.0.0 dp 9, so the name of the engine is standalone-commercial-9.0.0-dp-9.js. If you are using LiveCode Community, it will be named "standalone-community". This filename is the only part of the code you need to edit.

Your LiveCode app runs in a canvas, using a custom built javascript engine. Happily we need to know nothing about that at this stage, just copy this code into your webpage. It is not specific to this app, it will work for any LiveCode HTML5 app.

Now I'm going to upload the three files that my app needs to work, into the same folder as the file I've just created.

This is what it should look like:

Test Your App
Now go to the url you have uploaded your file to, in my case this is http://lainopik.on-rev.com/Poster_Child/poster_child_app" ...

How do I find my URL?
Do you have to save the 'poster_child_app' as an '.html'?

Thanks.

John Burnett

In the example, the file is not named to end in .html. However, if you name it ending in .html, then it will work, you just look for that url. So it could have been "http://lainopik.on-rev.com/Poster_Child/poster_child_app.html". You just need to look for the same filename that you put on your server.

Thanks for your reply and sorry about the long cut and paste.

I still dont understand how to find my uri.
your URL is -
http://lainopik.on-rev.com/Poster_Child/poster_child_app
How do i find mine?

Thanks.
John

Well, that would depend on where you put it and what you called it. If you put it on one of our LiveCode Hosting accounts then your url will be of the format

http://yoursubdomain.livecodehosting.com/yourappfolder/yourfilenamehere

I think if you are still confused, it might be better if you drop an email to hosting support and get some guidance on this.

And this is the problem, the 'yoursubdomain' -
on my cpanel main page, my main domain is 'lc4139285.on-rev.com'
my 'app' in in the folder 'Public_html' in a folder 'TestPage' and the app is 'TestPage'
so: http://lc4139285.on-rev.com/Public_html/TestPage/TestPage gives a 404 not found error
as well as http://lc4139285.livecodehosting.com/Public_html/TestPage/TestPage

I did drop an email to hosting support.

Im not so confused as to the structure of the domain, as to what is "yoursubdomain" and how to figure that out.
Any suggestions?
Thanks for trying.

remove "Public_html". If I go to http://lc4139285.livecodehosting.com/TestPage/TestPage it works :)

As I read in sooo many other posts in livecode, especially the forums, "It works!!"

Thank you so much. You ARE A GENIUS!

I appreciate it and want to publicly thank you!

28.3 MB for the Javascript file?! Good lord, I'll stick with native Javascript.

Hello Michael. The reason this is a big file is because it is a web app, rather than a serverside script. It includes the engine needed to run the scripts. If you want something lightweight that runs in a webpage, you might consider looking at LiveCode Server instead.

Hello,
HTML5 is a great feature to use at school. Children can practice at home easily.
I used the lesson and id exactly what was written there. But it doesn't work. What can go wrong? http:// 212.127.188.161/livecode/Poster_Child/Poster_Child_app.html
Please help me

I'm not sure what you were expecting to see - when I go to that url I see "Gelukt?" So something is happening...

If one checks the source code of the page, then two things are obvious:

(1) The word "gelukt?" is hard-coded into the HTML. It's not part of the LiveCode.

(2) The link to the engine is missing the ".js" at the end of the filename. (And Jaap, note in the lesson instructions that the name of your file might be different from what's in the lesson.)

Finally, Jaap, if this message isn't enough for you to fix the problem, you can get more help at https://forums.livecode.com

I cannot get the code to run in Firefox - using OSX Catalina. Also downloaded Poster_Child_Hello.zip and app could not be opened - States the developer needs to update the app.

When you say you cannot get the code to run, what exactly happens when you try? do you get any error messages and if so what are they?

The problem with Catalina is that it now requires all apps to be fully notarized and codesigned, which of course these little sample apps are not. To get the app to open you will need to follow the steps at the foot of this link:

https://support.apple.com/en-us/HT202491

That works, thanx!
Indeed, it is a big overload from such a tiny file ;-)*

http://medard.on-rev.com/Hazar/hazar_app

PS: doesn't work locally, even with Firefox…
So I was eager to see if it runs on the web :-)

* so for small files it is suitable to go with On-Rev (which gave me some woes recently)

DD, AKA Medard 8-)

Any reason why when i run the file in mozilla firefox, it doesnt work ?

Hi, how to make it work locally? Even when using firefox, it doesnt work. Also, after running it on the web, i still have a livecode logo on the btm right which allows download of the .zip file. Any idea how to remove or removing the downloadable .zip?

Hi Eddie. HTML5 deployment should work in Firefox. What version of LiveCode are you using, what version of Firefox are you running, and how are you deploying? Do you get any error messages? When you say "doesn't work" what do you mean exactly? What happens when you try?

If you are using an open source edition - Community or Community Plus - you cannot remove the downloadable zip file. You are required to share your source code by the terms of the EULA.

To test locally, use the "Test" button in the LiveCode tool bar. If you aren't using this, you need to make a change in the javascript to let Firefox run it locally.

In Firefox open about:config and set privacy.file_unique_origin to false. This should let you test it.

I deployed an app as standalone for HTML5 and it works correctly on desktop computers.
But on iPad (and iPhone), after every contact wherever, the online keyboard pops up, although for all fields locktext is set to "true" and traversalon to "false". Is it possible to set the keyboard inactive and only call it, when necessary (in my case 2 fields in the whole app).

Hello Gottfried,

What you describe sounds like an old bug which we fixed in LiveCode 10 DP-3. What version of LiveCode did you use to build the Web standalone?

Cheers,
Panos

Thank you, Panos, for your answer.
Since I am not a developer, I normally wait for stable releases. So I will do in this case.
Now I use Livecode 9.6.8.
Greetings
Gottfried

Hello Gottfried,

In LiveCode 10 the Web engine is much faster and has several features and bug fixes compared to LC 9.x. So I would suggest you give it a try :)

You can also have a look at this lesson: https://lessons.livecode.com/m/4071/l/1496056-how-do-i-put-my-first-app-on-the-web-lc-10-and-later