From a HTML JS PHP Website to an Installable Desktop Application

If you developed a website or a web app it’s very easy to transform it in an installable desktop application. Here’s how.

STEP 1

Go to this repo https://github.com/cztomczak/phpdesktop by Czarek Tomczak, then search for downloads. As I’m working with Windows, I used PHP Desktop v57.0 for Windows release (https://github.com/cztomczak/phpdesktop/releases/tag/chrome-v57.0-rc).

Download the zip file and extract the content wherever you want. Rename the folder as you prefer, you could use the name of your website. Let’s call it Myapp.

This is a sort of container with a self-contained web server (Mongoose) and PHP 7.1.3.
For example, launching the exe file called phpdesktop-chrome.exe will “read” what’s inside the Myapp/www folder. That’s where you will have to move your entire website to.

STEP 2

Erase what’s inside Myapp/www folder and copy there your entire website (don't put inside a sub folder). Be careful that any resource used in your website should be available inside that folder, locally, or available online if you don’t mind your desktop application will need internet connection to work. If, for example, you used CDNs, then your desktop application will not work properly without connection.

STEP 3

Rename the Myapp/phpdesktop-chrome.exe file, you can use the name of your application, let’s put Myapp.exe

At this point I suggest testing the application by double clicking on myapp.exe and be sure everything works as expected. If you find some bugs due to the different environment you can debug it as a normal website from that same window, inspecting it with devtool and working on the Myapp/www folder files in your IDE.

STEP 4

To make your website look like a real desktop application you’ll need to change some of the main settings you can find in the Myapp/settings.json file.
The things I suggest you change are:

• Under debugging:

"show_console": false,

This will prevent the debug console to opening

• Under main_window:

"title": "Application Name",
"icon": "www/img/applicationicon.ico",

These will change the window title and the icon of the application's window.

"start_maximized": true,

Because you may want to make the app start maximized and not in a small window.

• Under chrome: Here there are some options about the enabling/disabling of devtool, f5 reloading and other browser related features you may want to be disabled, cause they look good on a website but not on a local application.

STEP 5

At this point we have a portable program to run, we could in fact create a shortcut to the Myapp.exe file, put it anywhere and all should work as an application. But that’s not the goal. We want an installable desktop application that anyone can install and run on pc.

To achieve that we need another tool: Inno Setup (https://jrsoftware.org/isinfo.php).
This is a free software that will transform our Myapp folder into an installable .exe file.
So, download and install this software https://jrsoftware.org/isdl.php

After installing, if the software didn't open automatically, open it and choose Create a new script using the Script Wizard (that’s the simplest way to go), then click next.
This wizard is pretty self-explanatory, I’ll just point out some details that could be tricky:

• In the Application Files page, you have to select you exe file in the first input (in our case Myapp/Myapp.exe) and in the Other application files click on Add folder and choose the entire folder Myapp.
• In the Application File Association page, uncheck the checkbox.
• In the Setup Install Mode page, I suggest you to leave Administrative install mode option checked or allow user to choose that (last checkbox).
• In the Compiler Settings page, in the first input select where you want the installer exe file will be created to, then select a name for that file and choose its icon (that will be the icon for the shortcut too if you choose to create one).
• At the end, a script will be generated, and you’ll be asked if you want to run it immediately. You can do it right away and/or save the script and open it later with the same program then run it. I suggest saving the script anyway: after trying your desktop application you may need to change something you forgot or that doesn’t work properly, so after making some changes in your code you’ll just have to rerun the same script saved, avoiding to make it from scratch through the wizard again. Either way, run the script.
• After the script compiling, you’ll find your installer exe file in the location you specified, and that’s it. This will work as any other desktop application ready to be installed: it will copy the entire folder Myapp into programs path (or anywhere depending on the user choice and yours during the wizard setup) and create a shortcut where you want.

CONCLUSIONS

Hope this is helpfuls in some way and if you stayed with me so far, I thank you giving some more tips and a desktop application I created from my “The Hangman” web game (described here https://dev.to/mmj/php-hangman-game-4b26).

Downloadable Hangman game -> https://bit.ly/3yR8D8j

SPECIAL TIPS

What if I need to change PHP version?

If you need to change PHP version, you can download the version you need from here https://www.php.net/downloads.php
Once you downloaded that, you can extract into the php folder of the project deleting what was in it. That’s it.

What if my application needs a database?

Nothing prevents you from using an external online DB as long as it is reachable, its configuration will let users connect to it and you are ok with a desktop application that needs internet to work. You could even serve APIs to do so.
But if you need a portable DB inside the application, that will work locally and even without connection, you can use SQLite which is an embedded database that runs on the host machine storing everything on a single file, so it can lies inside the project folder itself.
In order to use that I suggest you download SQLite browser (https://sqlitebrowser.org/). This tool will help you managing your SQLite DB, creating tables, editing records, and run queries.
If you already built a small website with a MySql database, chances are you just have to dumb your db, run query to create it with SWLite and change the connection type to the DB. The rest will work as it was or will need a slight refactoring.

What if used a .htaccess redirect to index.php for friendly URLs?

It happened that the first website of mine I tried to transform in a desktop application had a very simple routing system based on the reroute to the index.php set in the .htaccess file (with Apache web server).
Now, Mongoose doesn’t support .htaccess but you can manage the redirect to one page file within the settings.json of the project folder.
You can set the index here

"index_files": ["index.html", "index.php"],

And set the file redirection in case of not-found page here

"404_handler": "/index.php",

That should do the trick. But I had to add a little step cause I used this type of rewriting in the .htaccess

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [NC,L,QSA]

which will let you grab the requested URL like this

$_GET['q']

This of course did not work anymore, and I had to use

$_SERVER['REQUEST_URI'];

so to make it work both with Apache and Mongoose I did something like this

$q = isset($_GET['q']) ? $_GET['q'] : substr($_SERVER['REQUEST_URI'], 1);