From a HTML JS PHP Website to an Installable Desktop Application
Tags: php, application, javascript, html
Published: 2022-05-22 14:29:25

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>).<br>
**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`.<br>
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`<br>
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**:
```JSON
"show_console": false,
```
This will prevent the debug console to opening
- **Under main_window**:

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

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

```JSON
"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.<br>
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><br>
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

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

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

```JSON
"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

```APACHE
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

```PHP
$_GET['q']
```

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

```PHP
$_SERVER['REQUEST_URI'];
```

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

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