Recomendations for converting an LCL app to a web based front end
lazarus / 38-Networking and Web Programming

----------------------------------------------------------------------
Flea · 2025-11-29 11:40

Hi, I am looking for some recommendations for converting an existing
LCL based Lazarus GUI to a web based one. Its a kiosk style app and
only has 3 screens currently so its a very simple GUI.

I am mainly using Lazarus 4.2. I develop it on Windows mainly (just
for ease/speed) and then compile (occasionally debug!) with Lazarus on
the Rpi. The app is designed to run on Raspberry Pi OS. The LCL
version is OK but lacks a bit of finesse. I have briefly experimented
with the different web browsers from here
https://wiki.freepascal.org/Webbrowser. Most of them either didn't
work or were really very very basic and could not run pages
CCS\Javascript.

I would like just to rewrite the front end leaving the back end alone.
I was thinking I could get a front end to load in a web browser
embedded in the app, and then I just hook into the various events for
button clicks etc. Is this easy to achieve? What components would you
suggest?

If its easier to develop just under Linux (e.g. Mint) rather than
developing in Windows, that's a possibility. I'm also considering
deploying to RPi Zero 2W so if a web based front end could work on
this, it would be amazing.

Thanks

----------------------------------------------------------------------
egsuh · 2025-12-02 02:29

Not sure what you want to do.

If you want to move to web instead of Windows/Linux application, you
would have to make web application, which is HTML based. Or you can
use Figma, etc.

If you want to embed web browser within your app, try WebView4Delphi.
There are CEF4 etc., but I think the latter is not easy to implement
and deploy.

What you want is to separate server part from GUI, and connect the
server via Internet, you have to write web server part --- backend,
possibly in FPC/Lazarus.

----------------------------------------------------------------------
Thaddy · 2025-12-02 05:25

Quote from: egsuh on December 02, 2025, 03:29:07 amWhat you want is to
separate server part from GUI, and connect the server via Internet,
you have to write web server part --- backend, possibly in
FPC/Lazarus.
Indeed. It is very helpful to design your application such that all
events are assigned over TActionList and TActions, all events.
That already gives you a choice to decouple your interface in such a
way that it is easier to translate to a web interface or any other
interface.

----------------------------------------------------------------------
Flea · 2025-12-04 09:09

Hi thanks for the responses egsuh and Thaddy!

I should have explained a little deeper. My app needs to work offline
hence connecting to an internet based server is not going to be
practical. I will revisit WebView4Delphi and CEF4 as I have tried them
before, but one of them didn't seem to work with HTML\CSS\Javascript
very well and the other needed a huge amount of deployment files. I
just wondered if there was some other component out there for Lazarus
that allows you to embed a browser to show basic HTML\CSS\Javascript
but has hooks to intercept link\button click events etc.

Maybe I am oversimplifying this request and actually what I need is a
full blown browser if I want a browser to show HTML\CSS\Javascript !
In other words, there is no such thing as a simple web browser
nowadays!

Yes I was thinking that I would embed a browser in my app. I was
hoping that I could have the server and browser all in one app as it
were rather than separating them into a server app and a web browser
app/page, but I guess this solution has its advantages anyway.

Thanks for your help people! I'll give WebView4Delphi and CEF4 another
go.

----------------------------------------------------------------------
cdbc · 2025-12-04 10:14

Hi
What you're talking about, is giving your application a "Kiosk-Mode" 
I'll bet, @Thaddy has made a few of those over the years 
When you're @Home, your app is connected to its main database, but
works seamlessly through a proxy (TClientDataset in Delphi) and thus
updates the main database immediately, but when you take your app 'on
the road', it still works on its proxy dataset and keeps data there,
till you come @Home again, where it then updates / resyncs with the
main database...
Regards Benny

----------------------------------------------------------------------
gidesa · 2025-12-04 10:56

There is a library called webui, with that you can use a browser as a
GUI frontend.
For Windows, Linux, MacOs.
Delphi and Fpc are supported.
see https://webui.me

----------------------------------------------------------------------
egsuh · 2025-12-04 12:38

Hmmmm.. WebView4Delphi can show any web page. So I think it can
process HTML / css / javascript fully.

It can be installed from Online Package Manager. You need to do
something before run it. Please refer to the demo programs.
And a thing I found was that it works correctly when the browser is
focused within your application.

Here's what I have done.

https://forum.lazarus.freepascal.org/index.php/topic,72627.0.html

----------------------------------------------------------------------
egsuh · 2025-12-04 12:49

QuoteThere is a library called webui, with that you can use a browser
as a GUI frontend.
For Windows, Linux, MacOs.
Delphi and Fpc are supported.
see https://webui.me

I'm reading its website, but it'll take some to understand it.

So, can you kindly explain me what it does briefly?

Does it display my Lazarus application on Web? For example, if I want
to make a page which contains an TEdit and TButton, does webUI convert
it into a webpage containing <input type=text> and <button>?


I think there were such components on Delhi since at least Delphi 5, 
but it was difficult to make it work, so I gave up.

----------------------------------------------------------------------
gidesa · 2025-12-04 15:40

Quote from: egsuh on December 04, 2025, 01:49:00 pmQuoteThere is a
library called webui, with that you can use a browser as a GUI
frontend.
For Windows, Linux, MacOs.
Delphi and Fpc are supported.
see https://webui.me

I'm reading its website, but it'll take some to understand it.

So, can you kindly explain me what it does briefly?

Does it display my Lazarus application on Web? For example, if I want
to make a page which contains an TEdit and TButton, does webUI convert
it into a webpage containing <input type=text> and <button>?

No, this library doesn't display anything on internet. It's a wrapper
between your Pascal program and the browser rendering engine. Various
o.s. and browsers are supported, ex. Edge, Chrome, Firefox, etc.
It can be see as a replacement for LCL: instead of having an Lcl form
with TEdit and TButton you have an Html page. You have to write the
Html/Css, no automatic conversion. Maybe it answers to your request:
replacing Lcl with an Html/css renderer.
I attach a simple example. It open a window of default browser, (here
Firefox) loading the index.html page. Then the browser act as the Gui,
exchanging events with Pascal program.
Note that the example requires webui.pas unit, and webui-2.dll. You
have to download them from webgui site.

----------------------------------------------------------------------
egsuh · 2025-12-05 01:36

QuoteIt can be see as a replacement for LCL: instead of having an Lcl
form with TEdit and TButton you have an Html page. You have to write
the Html/Css, no automatic conversion. Maybe it answers to your
request: replacing Lcl with an Html/css renderer.
I see. Thanks a lot.  It seems not easy to use, but seems useful when
I have simple user interface and complex procedure to run, which would
be complex to implement with javascript.

----------------------------------------------------------------------
paweld · 2025-12-05 06:44

pas2js:
- https://wiki.lazarus.freepascal.org/pas2js
- https://wiki.lazarus.freepascal.org/lazarus_pas2js_integration
- https://wiki.lazarus.freepascal.org/pas2js_designtime
- https://github.com/pascaldragon/Pas2JS_Widget or
https://github.com/seryal/Pas2JS_Widget

----------------------------------------------------------------------
kompustelnik · 2025-12-13 13:52

Check out D2Bridge - https://www.d2bridge.com.br/
I think this is what you're looking for

----------------------------------------------------------------------
zeljko · 2025-12-13 14:23

It is windows only framework ?? Why so ?

----------------------------------------------------------------------
kompustelnik · 2025-12-13 19:55

Quote from: zeljko on December 13, 2025, 03:23:57 pmIt is windows only
framework ?? Why so ?

Yeah, but you can develop your webapp under Linux in Lazarus and once
you compile it you can run the webapp server through WINE.
I did it on Oracle Free Tier VPS (1GB RAM, Ubuntu 22.04 LTS, console
only, no desktop) and it works perfectly 

There is D2Docker also, but I didn't touched it yet.

----------------------------------------------------------------------
BlueIcaro · 2025-12-13 20:49

Quote from: kompustelnik on December 13, 2025, 08:55:34 pmQuote from:
zeljko on December 13, 2025, 03:23:57 pmIt is windows only framework
?? Why so ?

Yeah, but you can develop your webapp under Linux in Lazarus and once
you compile it you can run the webapp server through WINE.
I did it on Oracle Free Tier VPS (1GB RAM, Ubuntu 22.04 LTS, console
only, no desktop) and it works perfectly 

There is D2Docker also, but I didn't touched it yet.
Hello, can you explain how do it?
/BlueIcaro

----------------------------------------------------------------------
kompustelnik · 2025-12-14 13:34

Quote from: BlueIcaro on December 13, 2025, 09:49:20 pmQuote from:
kompustelnik on December 13, 2025, 08:55:34 pmQuote from: zeljko on
December 13, 2025, 03:23:57 pmIt is windows only framework ?? Why so ?

Yeah, but you can develop your webapp under Linux in Lazarus and once
you compile it you can run the webapp server through WINE.
I did it on Oracle Free Tier VPS (1GB RAM, Ubuntu 22.04 LTS, console
only, no desktop) and it works perfectly 

There is D2Docker also, but I didn't touched it yet.
Hello, can you explain how do it?
/BlueIcaro

Yeah, it's a bit tricky (Oracle Console  )

So, first of all you need to create account on Oracle Free Tier. Then
setup your first VPS - Open side menu (left top corner) - Compute ->
Instances -> Create Instance
I choose Canonical Ubuntu 22.04 LTS. Then create and save SSH key
files (you need it to connect to your VPS through bash console).

Then create Security list - Compute - Instances -> YOUR INSTANCE ->
Networking -> Subnet -> Security -> YOUR SECURITY LIST -> Security
Rules -> Add Ingress Rules:
QuoteSource type: CIDR
Source CIDR: 0.0.0.0/0
IP Protocol: TCP
Source Port Range: Empty
Destination Port Range: 8888 (Your D2Bridge Web App Port - Default is
8888)
Once you done it log in to your VPS through the terminal:
Quotessh -i /home/YOUR_USER/YOUR_NEW_VPS_SSH_KEY_DIR/KEY_NAME_prv.key
ubuntu@YOUR_VPS_PUBLIC_IP (Compute->Instances->Public IP)
ex. ssh -i /home/kompustelnik/Documents/MyOracleVPS_prv.key
ubuntu@127.0.0.1

sudo apt update && sudo apt upgrade -y
then you have to install wine:
Quotesudo apt install wine 
sudo apt install wine32

Copy your D2Bridge Project (Web Folder) with all files.
Quoteex. scp -i /home/kompustelnik/Documents/MyOracleVPS_prv.key -r
Web ubuntu@127.0.0.1/home/ubuntu/Web
(Specify your ssh key and your VPS IP)
Last thing you have to do is to run your web app through wine.
Log in to your VPS through terminal:
Quoteex. ssh -i /home/kompustelnik/Documents/MyOracleVPS_prv.key
ubuntu@127.0.0.1
(Specify your ssh key and your VPS IP)

cd Web
wine YOUR_WEB_APP_NAME.exe
That's all..... 
Try to connect from your phone/laptop, put in your browser address
"YOUR_INSTANCE_PUBLIC_IP:8888" 

I know, the instance configuration on Oracle Free Tier may be a bit
confusing, but it's not impossible (I'm a gamedev hobbyist, not
engineer   ), I believe you'll succeed.
Forgive me my "perfect" english  

Example:
http://152.67.132.56:8888/
(available for about 2 hrs since 14:40 CET Poland)

PS.
I made an Online Score server in Lazarus (server web app) for my game
made with Godot.
It stores players scores in SQLite db. Communication over REST API.
The game server web app is running on my Oracle VPS too (autorun
through systemd).
Please give me your feedback about the game:
https://woofitgames.itch.io/solar-lander
It's free to play, but you can donate if you have fun or you feel my
"tutorial" about D2Bridge + VPS was helpful in any case...

PS2. The game is only for hardcore players, the controls are
intentionally difficult, but manageable. I’ve completed this little
game many times.

----------------------------------------------------------------------
BlueIcaro · 2025-12-14 15:44

Thanks !!
/BlueIcaro

----------------------------------------------------------------------
egsuh · 2025-12-15 03:39

QuoteCheck out D2Bridge - https://www.d2bridge.com.br/
I think this is what you're looking for 
Does the recent version of it support Lazarus, not only Delphi?
Once I tried this, but not successful to make a running example.

----------------------------------------------------------------------
kompustelnik · 2025-12-15 10:20

Quote from: egsuh on December 15, 2025, 04:39:30 amQuoteCheck out
D2Bridge - https://www.d2bridge.com.br/
I think this is what you're looking for 
Does the recent version of it support Lazarus, not only Delphi?
Once I tried this, but not successful to make a running example.

Yes

Although the D2Bridge installation wizard is only available for
Windows, but there is a trick to develop your web app on Linux
(Xubuntu 24.04 LTS in my case) with Lazarus + D2Bridge.
Steam proton (force compatibility through Proton Experimental works
for me) is the way.

BTW. I see that not everyone knows- D2Bridge is available for everyone
on GIT, everyone can contribute.
https://github.com/d2bridge/d2bridgeframework