All Blog Posts  |  Next Post  |  Previous Post

How to setup a virtual hosting environment in Delphi


Thursday, March 21, 2024


There are various tools & IDEs for building websites or web applications, and it's often essential to test them locally before making them public. In Delphi, TMS WEB Core uses a technique by running a web server serving the files to localhost on a specific port of your choice. Navigating to that URL shows the content of the HTML pages and initializes JavaScript running behind the scenes. This mimics the experience of navigating to a live URL in your browser. While websites typically operate within a browser,  what if you aim to develop an HTML/JavaScript web application, run it locally, and integrate it in a native Windows application? This is where TMS FNC Core steps in to provide the solution.


TMS FNC Core introduces a new Windows-specific known as TTMSFNCEdgeWebBrowser built on the Edge Chromium runtime. This component allows navigating to URLs, showing web content and many more. However, when dealing with a local web application that needs to be served and utilized, simply loading the HTML file won't suffice, as the browser may encounter issues loading scripts and CSS. To address this, we will delve into the setup process for the browser to make sure all related resources are running as expected.

TMS Software Delphi  Components


For the purpose of this blog post we create three files.

  • index.html
  • script.js
  • styles.css

The files contain code for setting up a quiz inspired by a tutorial. You can download the files from this location. After downloading, simply copy the files into a folder on your system to be served to our browser component.

TMS Software Delphi  Components

Following this, our next step involves creating a new application with a fresh instance of TTMSFNCEdgeWebBrowser placed on the form. The browser requires an initialization process, so we must await the OnInitialized event to setup the virtual hosting. When the OnInitialized event is called, we retrieve a pointer to the ICoreWebView2Controller interface, and from there we can access our internal webbrowser instance. The method that we need to use is called "SetVirtualHostNameToFolderMapping". We specify our host name, and the local path where our files are waiting to be served.

We start by adding our Windows specific unit.

There are a couple of constants required to Allow or Deny certain resources.


We call SetVirtualHostNameToFolderMapping after the browser component is initialized.

procedure TForm1.TMSFNCEdgeWebBrowser1Initialized(Sender: TObject);
  w: ICoreWebView2;
  w3: ICoreWebView2_3;
  c: ICoreWebView2Controller;
  c := ICoreWebView2Controller(TMSFNCEdgeWebBrowser1.NativeBrowser);
  if c.get_CoreWebView2(w) = S_OK then
    if w.QueryInterface(IID_ICoreWebView2_3, w3) = S_OK then
      w3.SetVirtualHostNameToFolderMapping('MyQuiz', 'E:\Delphi\Quiz', COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_ALLOW);
Our host name has been set to MyQuiz, which means that we can now navigate to the following URL to visualize our website / web application.

When navigating, the files are served via the virtual hosting setup and will produce the following result. The website will behave as if you would navigate to a real URL, but all running locally.

TMS Software Delphi  Components

TMS WEB Core Applications

Upon running TMS WEB Core applications within the IDE, a web server initializes. However, when attempting to open the project root HTML file directly outside of the IDE, JavaScript errors may arise due to the specific loading mechanism of a TMS WEB Core application. The mentioned technique allows serving TMS WEB Core specific HTML/JavaScript files, enabling seamless interaction with the application as if you would run it from your own server or hosting service.

Assuming we've created "Project1.web", the default output directory upon building within the IDE is typically the "TMSWeb" folder. To view the web application within TTMSFNCEdgeWebBrowser, we configure the virtual host name and folder as follows:

w3.SetVirtualHostNameToFolderMapping('MyWebApplication', 'E:\Delphi\Project1\TMSWeb\Debug', COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_ALLOW);

To navigate we can then call


Access to device-specific functionalities such as camera, microphone, geolocation, ... is supported within TMS WEB Core. For a comprehensive list of supported devices, please refer to the documentation provided here .

VCL Alternative

In this blog post, our focus was on TTMSFNCEdgeWebBrowser, a component of TMS FNC Core. For users of TMS VCL UI Pack, the same code can be seamlessly ported to TAdvWebBrowser, which is an exact replica. If you need code snippets tailored specifically for TAdvWebBrowser, don't hesitate to reach out to use. We're here to assist you in making your development process smooth and efficient.

Stay Tuned

From time to time, we like to spotlight a feature, share useful tips, utility functions, or methods in FNC. With FNC boasting a plethora of exciting functionality, if you come across something that you believe is important to share with fellow users, don't hesitate to contact us. Your insights are invaluable in enriching the FNC & Delphi community experience.

Pieter Scheldeman


This blog post has not received any comments yet.

Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.

All Blog Posts  |  Next Post  |  Previous Post