How Do I Put My First App On the Web - LC 10 and later
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.
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
In the standalone builder, click on Web (1) and then check the box Build for Web (2)
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.
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.
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!".
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.
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.