Logo

Structure of an XMLUI app

The XMLUI Invoice demo app exhibits the typical structure of an XMLUI app.
<root>
index.html
Main.xmlui
config.json
components
ClientDetails.xmlui
Clients.xmlui
...
MonthlyRevenue.xmlui
WeeklyRevenue.xmlui
resources
favicon.ico
xmlui-logo-inverted.svg
xmlui-logo.svg
themes
invoice.json
xmlui
0.9.23.js
charts-0.1.21.js
start.bat
start.sh
api.json
data.db
xmlui-test-server
The xmlui folder contains the xmlui engine with a version number, specifically 0.9.23.js. We recommend this practice in order to know when/whether to upgrade.
filedescription
index.htmlThe default webpage to display
Main.xmluiThe XMLUI app's entry point
config.jsonThe XMLUI app's configuration file
componentsThe folder with your custom components
resourcesThe folder with static app resources
themesThe folder with your custom themes
xmluiThe folder with the XMLUI core framework and extensions
start.batThe batch file to start the test server on Windows
start.shThe bash script file to start the test server on Mac, Linux, or WSL
api.jsonOptional: API description file for use with xmlui-test-server
data.dbOptional: SQLite database for use with xmlui-test-server
xmlui-test-serverOptional: server, you can use any static web server
You can deploy this tree structure (minus the optional api.json, data.db, and xmlui-test-server) to any static webserver that's configured to serve index.html. Consider this minimal app.
xmlui-minimal
index.html
Main.xmlui
components
Home.xmlui
resources
favicon.ico
xmlui-logo-inverted.svg
xmlui-logo.svg
xmlui
0.9.23.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="xmlui/0.9.23.js"></script>
</head>

<body>
</body>

</html>

Main.xmlui

<App name="XMLUI Minimal">

  <NavPanel>
    <NavLink label="Home" to="/Home" />
  </NavPanel>

  <Pages>
    <Page url="/Home">
      <Home />
    </Page>
  </Pages>

</App>

Home.xmlui

<Component name="Home" >

A minimal XMLUI app

</Component>

Local deployment

If you are working locally, in a folder at the root of this tree, here are some ways you can serve the app.
If you have node.js and npm:
npx -y http-server

$ npx -y http-server
Starting up http-server, serving ./

Available on:
  http://127.0.0.1:8080
If you have python:
$ python -m http.server 8080
Serving HTTP on :: port 8080 (http://[::]:8080/) ...
In either case, visit http://localhost:8080 to view the app.

Hosted deployment

You can copy this structure to any webserver configured to serve index.html and its subfolders. But you might even need a conventional webserver, here are some common alternatives.

Use an AWS Bucket

Your app can run from an AWS bucket. Here's the minimal app served that way: http://xmlui-minimal.s3-website-us-east-1.amazonaws.com/.
AWS recipe
  • Upload xmlui-minimal folder to an AWS bucket
  • In Permissions, turn off the 'Block public access' setting
  • In Permissions, allow 'PublicRead'
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::xmlui-minimal/*"
    }
  ]
}
  • In Properties, turn on 'Static website hosting' and set 'index.html' as the default

Use Netlify

You can just drag-and-drop the folder to Netlify: https://xmlui-minimal.netlify.app/.
Netlify recipe
This site is an XMLUI™ app.