The perfect LiveCode cloud server

So what does it take to build the perfect cloud server? Everyone has their own ideas, preferences and software requirements. Many developers also need a server solution but want to just focus on coding and not having to worry about the intricacies of setting up and managing their own server.

While the following solution may not solve everyone’s needs, I think it comes pretty close to being the perfect cloud server and if you are also wanting to get started with your own cloud based server – this is well worth considering. Easy to setup, easy to manage combined with great performance. And if you follow the walk through below – it won’t cost you anything to get started.

So how did I go about setting up the perfect cloud server? Let me walk you through everything.

Part 1 – The server

For the server, we need to setup a droplet with Digital Ocean. Starting at only $5 – they are a great value wise and work fantastically. (My last server has run for 2 years since I first booted it up, without any issues or reboots)

If you are just starting with running your own server, I would suggest starting with the $5 option as you can scale it up when ever you need, or even migrate to a new server. There is one requirements in terms of the operating system, you need to make sure that you use Ubuntu 16.04.2 x64. Don’t underestimate what you can run on a $5 server.

Part 2 – Setting up the server & the control panel

So now we have a server, we still need to configure everything and setup a web server, MySQL and install a control panel to manage the server. Don’t worry this is much easier than it sounds – and you won’t have to manually edit anything on the server. You won’t even need to login to the server until we need to configure LiveCode.

I have gone with ServerPilot. It’s a simple, easy to use control panel designed for Digital Ocean server’s. It includes Nginx in front of Apache and supports PHP 5.4, 5.5, 5.6, 7.0, and 7.1. and best of all – there is no manual configuration we need to do. And the performance is great.

While ServerPilot is designed for PHP and WordPress based websites, once we are setup, we can install LiveCode on a per app basis (Server Pilot calls sites “apps”) – giving an almost perfect cloud based solution for hosting LiveCode.

Once you have signed up for a an account at ServerPilot you simply add the details or your newly created droplet and they will automatically do everything we need to get our server up and running. Best of all, we will be using their free option – so setting up our control panel and configuring our server costs us nothing and take only a minute or two.

While the free option does have some limitations it is perfect to get going and once you start hosting a few sites and apps, it may well be worth upgrading the control panel.

While the server we are creating is indeed powerful and apps can send email, ServerPilot does not install a mail server and does not advice it either. If you are needing to host email address you will need to use an external provider.

The servers also do not handle DNS. You can use Digital Oceans DNS service for this, or a service like CloudFlare. One of the advantages of CloudFlare is their free SSL solution.

Part 3 – LiveCode

So after giving this a bit of thought, I have gone with setting up LiveCode on an site by site (app by app) basis. The advantage of this approach is being able to run different version LiveCode on different apps. While the installation does require that it is setup for each app and means logging into the server and editing a file or two, restarting Apache etc, it is not to difficult to do.

The Walk Through

I have used affiliate links below – as both Digital Ocean and ServerPatrol offer a $10 credit – perfect for trying out everything – at no cost.

Step 1. Sign up for Digital Ocean

Sign up for an account at Digital Ocean. Use the link below and receive $10 in credit

Signup and get $10 credit

Step 2. Create a droplet

Once you have signed up at Digital Ocean, create a droplet, by clicking “Create Droplet”

You need a blank server running Ubuntu 16.04.2 x64

Choose any region

Choose any extra’s you may want – for now, I would recommend taking the backups option.

Ignore the SSH Keys

Finalise and create your droplet. Once your droplet is created, you will receive an email with the login details for the server.

Step 3. Sign up at ServerPilot

Sign up at serverpilot.io. Use the link below and receive $10 in credit.

Signup and get $10 credit

Step 4. Link your droplet

Now we need to link the droplet in step 2 to Server Pilot. Login in to Server Pilot and click “connect server”.

Enter in the details for your server you received via email from Digital Ocean.Once you gone through this, you will now be able to administer your newly created cloud server through Server Pilot’s admin panel.

From here you can add websites and look after your server

Step 5. Adding your first site / app

In ServerPilot, click the server link to manage servers and select your server from the server list.

Click the “Create App” button

Fill in the form on the next page with all your details of your app / web site.

When you click “Create App” the hosting for your app will be created. From here you can create databases and SSH / SFTP into the server, and of course enable LiveCode.

Step 6. Enabling LiveCode

By now, we have created a phenomenal web server, setup a great control panel and not have to edit any configuration files.

Unfortunately to get LiveCode running, we have no choice but too. Time to dust off the old SSH client and get to work.

For the first part, we need to create and enable the CGI-BIN directory.

You need to SSH into the server as root and create the following file:

/etc/apache-sp/vhosts.d/APPNAME.d/cgi-bin.conf

replacing APPNAME with the name of your app.

Once the file has been created, you need to edit the file and add the following:

Define CGI_BIN ${DOCUMENT_ROOT}/../cgi-bin/
ScriptAlias /cgi-bin/ ${CGI_BIN}
<Directory ${CGI_BIN}>
 Require all granted
</Directory>

Once the file has been created,  you need to restart Apache by running this command as root:

sudo service apache-sp restart

And logout of SSH.

Now we need to create the actual cgi-bin directory and to do so we must now SSH in as the app’s system user. If you have a default / free installation, it is “serverpilot”

Once logged in as serverpilot, create the cgi-bin directory with these commands:

mkdir ~/apps/APPNAME/cgi-bin
chmod 755 ~/apps/APPNAME/cgi-bin

You can now upload the LiveCode community server into the newly created cgi-bin directory. I just FTP’d it. You can download it from http://downloads.livecode.com/livecode/ and make sure you take the Linux 64 option.

Once its downloaded, you can change to the cgi-bin directory , once again substituting APPNAME for the name of your app and then running chmod

cd ~/apps/APPNAME/cgi-bin
chmod 755 livecode-community-server

The last step is to create an .htaccess file in the site root of our app, with the following contents.

Options +ExecCGI
AddHandler livecode-script .lc
Action livecode-script /cgi-bin/livecode-community-server

We can now create a simple LiveCode file and test to see if LiveCode is running – good luck

 

Installing LiveCode on Windows

Currently I have been in the process of setting myself up on a new PC and that has meant reinstalling everything – including a locally hosted dev server.

Typically you need to install their own local development server to test and build websites locally – unless you want to work online – which is not always practical. If your internet connection fails – it can cost you huge amounts of precious time that most of us already don’t have and working local means everything is faster making you more productive.

Two of the most popular local servers for Windows are XAMPP and WAMP – both letting you install a combination of Apache, PHP, MySQL and also a few other bits and pieces.  Installation is usually pretty simple with a few extra steps needed for integrating LiveCode server.

Here is how to install either XAMPP or WAMP – both work well and the choice is yours.

Here is how I did it.

Before starting – neither WAMP or XAMPP

1. XAMPP

Firstly you need to download the installer from https://www.apachefriends.org/download.html

Once it is downloaded – run through the installer and follow the instructions. I did not encounter any problems, so to save a bit of time, I won’t go through the entire installation process. As per the installation recommendations, I have installed to C:\xampp\

XAMPP gives you a handy little control panel so you can choose when to load it and what services you are running.

Once XAMPP is installed, it is time to download LiveCode Community server from http://downloads.livecode.com/livecode/

Once its downloaded, you need to extract it from the zip file and copy it somewhere. I suggest to C:\xampp\livecode

Now the fun part – getting it setup with Apache. To do this, you need to edit the C:\xampp\apache\conf\httpd.conf file. I like to use Sublime Text – it is a great text editor.

The following is all based on my XAMPP installation path, C:\xampp, so you will have to adapt the following if you used a different location

In the <Directory “C:/xampp/htdocs”> (line 247) section, add:

AddHandler livecode-script .lc
Action livecode-script /livecode-cgi/livecode-community-server.exe

just before the closing “</Directory>”

and then after the “</Directory>” add:

<Directory "C:/xampp/livecode">
Options All
AllowOverride All
Require all granted
</Directory>

ScriptAlias /livecode-cgi/livecode-community-server.exe "C:/xampp/livecode/livecode-community-server.exe"

You should now be able to successfully start or restart Apache via the XAMPP Control panel.

You can test to see if LiveCode is working by creating a text file containing a simple script e.g.

<?lc
put “This is a test script”
?>

Save it as: C:\xampp\htdocs\test.lc and then fire up your browser and browse to: http://localhost/test.lc – the browser should display “This is a test script”

2. WAMP

You can download WAMP from http://www.wampserver.com/en/

Install WAMP Server, like XAMPP its a painless process.

When trying to run Wampserver, I had an error about MSVCR110.dll being missing and needed to download the Visual C++ Redistributable for Visual Studio 2012 Update 4 to fix the problem.

Like XAMPP you just need to edit the httpd conf file

Edit the

C:\wamp64\bin\apache\apache2.4.23\conf\httpd.conf file – its nearly the same as XAMPP.

In the <Directory “${INSTALL_DIR}/www/”> section add:

AddHandler livecode-script .lc
Action livecode-script /livecode-cgi/livecode-community-server.exe

just before the closing “</Directory>”

and then after the “</Directory>” add:

<Directory "C:/xampp/livecode">
Options All
AllowOverride All
Require all granted
</Directory>

 

And there we go – to ways to get LiveCode up and running on your Window’s PC.

Any problems, just post them in the comments below and I will see what I can do to help you.

Using LiveCode inside the WordPress backend

Recently I have had a couple of questions about being able to use LiveCode and other languages/frameworks from inside the WordPress backend. Is this even possible or is there a work around.

The advantage of doing this for the developer is that they can use a programming language of their choice to build tools and services and still deliver a solution that appears as part of the WordPress environment. The user would not even notice that a different programming language is being used as all they are seeing is a seamless WordPress experience.

The problem though is that you cannot mix languages – PHP can only run PHP and LiveCode can only run LiveCode, you cannot mix LiveCode and PHP.

After thinking about this for a bit, our solution is very simple and low tech (who does not like simple solutions). Welcome the often overlooked <iframe>. By creating a very simple WordPress plugin, you can quickly add menu items/pages that will load external scripts into an iframe, giving an almost seamless experience.

Here is an example of such a plugin. Please note that I have not included any security features in this example – but the must not be forgotten about.

<?php
/*
Plugin Name: LiveCodeMenu
Plugin URI: http://activethought.net
Description: Add LiveCode pages to the WordPress Admin area
Author: Simon Smith
Author URI: http://activethought.net
*/

// WordPress hook for adding admin menus
 
 add_action( 'admin_menu', 'my_admin_menu' );

// Action function for above hook

function my_admin_menu() {

// Add a menu under the options menu
 add_options_page(__('LiveCode Settings','lc-menu-test'), __('LiveCode Settings','lc-menu-test'), 'manage_options', 'lcsettings', 'lc_settings_page');

// Add a menu under the options menu
 add_management_page( __('LiveCode Tools','lc-menu-test'), __('LiveCode Tools','lc-menu-test'), 'manage_options', 'lctools', 'lc_tools_page');

// Add a top-level menu
 add_menu_page(__('LiveCode Toplevel','lc-menu-test'), __('LiveCode Toplevel','lc-menu-test'), 'manage_options', 'lc-top-level-handle', 'lc_toplevel_page' );
 

add_submenu_page('lc-top-level-handle', __('LiveCode Sublevel','lc-menu-test'), __('LiveCode Sublevel','lc-menu-test'), 'manage_options', 'sub-page', 'lc_sublevel_page');

}

function lc_settings_page() {
 echo "<h2>" . __( 'LiveCode - Settings', 'lc-menu-test' ) . "</h2>";
 echo '<iframe src="/livecode/my-livecode-script.lc" width="100%" height="100%"></iframe>';
}

function lc_tools_page() {
 echo "<h2>" . __( 'LiveCode - Tools', 'lc-menu-test' ) . "</h2>";
 echo '<iframe src="/livecode/my-livecode-script.lc" width="100%" height="100%"></iframe>';
}

function lc_toplevel_page() {
 echo "<h2>" . __( 'LiveCode - Top Level Page', 'lc-menu-test' ) . "</h2>";
 echo '<iframe src="/livecode/my-livecode-script.lc" width="100%" height="100%"></iframe>';
}

function lc_sublevel_page() {
 echo "<h2>" . __( 'LiveCode - Top Level Page', 'lc-menu-test' ) . "</h2>";
 echo '<iframe src="/livecode/my-livecode-script.lc" width="100%" height="100%"></iframe>';
}

?>

Menu links can be added into a number of locations including:

  • add_posts_page - adds a menu item under posts
  • add_pages_page – adds a menu item under pages
  • add_media_page – adds a menu item under media 
  • add_links_page – adds a menu item under links
  • add_comments_page – adds a menu item under comment
  • add_theme_page - adds a menu item under appearance
  • add_plugin_page - adds a menu item under plugins
  • add_users_page - adds a menu item under users
  • add_management_page - adds a menu item under tools 
  • add_options_page - adds a menu item under settings
  • add_submenu_page – creates a sub menu link under a top level link

Top level pages can also include an optional icon and also a position in the side menu and based on the above example, it would look something like this:

add_menu_page(__('LiveCode Toplevel','lc-menu-test'), __('LiveCode Toplevel','lc-menu-test'), 'manage_options', 'mt-top-level-handle', 'lc_toplevel_page', 'dashicons-smiley', 6 );

For a list of available dashboard icons, you can take look at https://developer.wordpress.org/resource/dashicons/. You could also use svg images if you wanted a custom menu link, https://gelwp.com/articles/adding-a-base64-image-as-an-admin-menu-icon/ has more information on how to do this.

You can read more about creating menus here, https://codex.wordpress.org/Administration_Menus

Download the example plugin

Welcome to a new Active Thought

It has been a busy month for me so far – and some big changes for ActiveThought.net – which has been my almost forgotten blog for quiet sometime.

From the beginning of the month, ActiveThought.net is no longer my sadly neglected blog, but is now making the transition to that of a small but unique development and design studio, which is something I have wanted to do for a long time.

I am also being joined by my brother Damian, and excellent freelance 3D artist and animator to further increase our service offerings and allowing us to offer a variety of unique solutions.

Have a look at our about page to see how we can help you.

Simon