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.

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. html.mem file containing data to run your app
  3. .js file which is the actual engine for running the app
  4. 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).

  1. I created a new folder called Poster_Child.
  2. Then I created a file named poster_child_app.
  3. 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:

<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-commercial-9.0.0-dp-9.js"></script>

 </body>

</html>

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. 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 HTML5 app.

0 Comments

Add your comment

E-Mail me when someone replies to this comment