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.

file	description
`index.html`	The default webpage to display
`Main.xmlui`	The XMLUI app's entry point; can also contain short inline component definitions
`config.json`	The XMLUI app's configuration file
`components`	The folder with your file-based custom components
`resources`	The folder with static app resources
`themes`	The folder with your custom themes
`xmlui`	The folder with the XMLUI core framework and extensions
`start.bat`	The batch file to start the test server on Windows
`start.sh`	The bash script file to start the test server on Mac, Linux, or WSL
`api.json`	Optional: API description file for use with xmlui-test-server
`data.db`	Optional: SQLite database for use with xmlui-test-server
`xmlui-test-server`	Optional: 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

Main.xmlui is the app entry point. The entry file usually contains the root App markup, and it may also contain short top-level <Component> definitions used only by that app.

<App name="XMLUI Minimal">

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

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

</App>

For a very small app, you can keep the app and a local helper component in the same file:

<App name="XMLUI Minimal">
  <Home />
</App>

<Component name="Home">
  <Text>A minimal XMLUI app</Text>
</Component>

The app root and inline component definitions can appear in any order. This guide puts the app first because the Main.xmlui structure is the focus.

The components folder is still the better place for components that are shared, larger than a small helper, or maintained independently. If a component file and an inline component use the same name, the component file wins.

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.