Skip to content

Your first application

In this guide you'll learn to create a new Miletus application from scratch. Each chapter builds upon the previous one.

Prerequisites

If you haven't already, first download and set up the packager following our installation guide.

If you are using/targeting Windows and/or Linux then don't forget to check the Requirements section.

In this guide we will:

  • Call the packager from the command line. If you are using the VSCode exetension, you'll need to call the Package application or Package and run command.
  • Use the precompiled JavaScript library. In case you'd like to use the TypeScript library from npm, you'll need to make sure to use a bundler such as webpack or browserify to make the code client-side compatible. We also provide a simple webpack-based demo in our downloads [link here].

Hello World!

Let's see the most simple example: An application that displays "Hello World!".

This means for this application you will only need the packager. This actually applies to all applications that don't require access to operating system level functionalities.

Create your project

Let's start by creating a new folder called helloworld. In this folder we'll need 2 files:

  • An HTML file we will use as the entry point: index.html
  • The configuration file for the packager: miletus.config.json
Project folder
helloworld
├── index.html
└── miletus.config.json

index.html

The contents of the HTML file is minimal:

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title></title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

With this we created a page that will contain "Hello World!" and nothing more.

miletus.config.json

The configuration file is needed for the packager to determine application information (such as name, version, debugging, window size, etc...).

A minimal configuration file contains the name of the application, the target so that it actually targets a platform and of course an entry point that is defined by main.html.

Furthermore it's a good idea to specify the include property too, so not everything is included from the project root folder. Imagine what would happen if you'd keep bundling everything from the root folder, including the output executables.

miletus.config.json
{
  "name": "HelloWorld",
  "main": {
    "html": "index.html"
  },
  "include": [
      "index.html"
  ],
  "target": ["win_x64"]
}

These values tell the packager that the application should be called HelloWorld, the entry point is the index.html file and we are bundling this into a Windows 64-bit application. Feel free to change the target to your own platform. See the supported values here.

Please consult the miletus.config.json section of our documentation to get familiar with all the supported properties.

Bundling and running

What is left is to call the packager and bundle the index.html into an application.

MiletusPackager.exe "path_to\helloworld"

This created the following folder:

Project folder
helloworld
├── win_x64
│   └── HelloWorld.exe
├── index.html
└── miletus.config.json

The output folder is the root folder of the project if the output property is not present in the configuration file. If your project is small or you have only one target then this is fine. Problems arise when you are targeting multiple platforms in a bigger project as it gets quickly flooded with folders. With the output property you can redirect all target outputs into one specific folder.

Running HelloWorld.exe we see:

Application no title

As you can see in your application and in the picture above, it has no title. This is because we did not give it any. Just simply add main.title to the configuration file give your main application window a title.

So let's remove win_x64 and try again with the following changes:

miletus.config.json
{
  "name": "HelloWorld",
  "output": "output",
  "main": {
    "html": "index.html",
    "title": "My first application"
  },
  "include": [
      "index.html"
  ],
  "target": ["win_ia32", "win_x64"]
}

Now the output looks like this:

Project folder
helloworld
├── output
│   ├── win_ia32
│   │   └── HelloWorld.exe
│   └── win_x64
│       └── HelloWorld.exe
├── index.html
└── miletus.config.json

And the running application:

Application with title

Write to a file

Let's take the example above a step further and introduce something you cannot do directly from JavaScript. We are going to write "Hello world" to a text file on the local file system.

This time we'll need the precompiled JavaScript distribution (or the TypeScript library installed through npm). Let's add that to our project in a new js folder.

Project folder
helloworld 
├── js
│   └── miletus.js
├── output
├── index.html
└── miletus.config.json

index.html

Extend index.html with a reference to the miletus.js API library:

<script src="js/miletus.js"></script>

Create a button that will write "Hello world" to the file:

<button onclick="writeFile()">Write to file</button>

From the References part of the documentation we know that there is files that can be used to interact with the local file system. So the implementation of writeFile() onclick handler is the following:

function writeFile() {
  miletus.files.saveTextFile('helloworld.txt', 'Hello world');
}

This will create a file named helloworld.txt in the same folder where the executable is.

Note

On macOS the executable is embedded inside the .app bundle. Keep this in mind when creating cross-platform applications.

The whole file:

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title></title>
    <script src="js/miletus.js"></script>
    <script>
      function writeFile() {
        miletus.files.saveTextFile('helloworld.txt', 'Hello world');
      }
    </script>
  </head>
  <body>
    <p>Hello World!</p>
    <button onclick="writeFile()">Write to file</button>
  </body>
</html>

miletus.config.json

The packager needs instructions to add the API library file into the bundle:

miletus.config.json
{
  "name": "HelloWorld",
  "output": "output",
  "main": {
    "html": "index.html",
    "title": "My first application"
  },
  "include": [
      "index.html",
      "js/miletus.js"
  ],
  "target": ["win_ia32", "win_x64"]
}

In this case a single file from the js folder is added. What happens if there are multiple files? To avoid listing each one-by-one wildcards can be used:

  • js/* would bundle all files from the js folder.
  • js/*.js would bundle all files from the js folder with .js extension.

Bundling and running

Call the packager just as before. Now when running the output application, the "Write to file" button will be visible. When clicking this button the helloworld.txt file will be created in the application folder.

Output txt

Adding resources

Adding further resources such as CSS or images can be done exactly like in the previous chapter. Add the resources to the project folder and reference them from the miletus.config.json file.

Let's see an example on addig a stylesheet file. Style the "Hello World!" paragraph and the "Write to file" button by centering them and applying some colors.

Stary by creating a new folder called css and add a style.css file to it.

Project folder
helloworld
├── css
│   └── style.css
├── js
│   └── miletus.js
├── output
├── index.html
└── miletus.config.json

style.css

The CSS below does the following:

  • Gives the page a dark background
  • Defines a class that will used on the paragraph (different font with center alignment)
  • Defines a class that will used on the button (blue background, center vertically, different font...)
style.css
body {
    background-color: #353f45
}

.my-text {
    color: #ffffff;
    text-align: center;
    font-size: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.my-button {
    background-color: #039be5;
    border: none;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    margin: 0 auto;
    display: block;
}

.my-button:hover {
    background-color: #00a1f2;
}

.my-button:active {
    background-color: #0277bd;
}

index.html

Add a link reference to this new style.css file in the head section of the index.html file.

<head>
  <meta charset=utf-8>
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/miletus.js"></script>
  <script>
    function writeFile() {
      miletus.files.saveTextFile('helloworld.txt', 'Hello world');
    }
  </script>
</head>

Assign the my-text and my-button classes to the p and button elements.

<p class="my-text">Hello World!</p>
<button class="my-button" onclick="writeFile()">Write to file</button>

miletus.config.json

And of course don't forget to include the style.css file in the packager configuration file:

miletus.config.json
{
  "name": "HelloWorld",
  "output": "output",
  "main": {
    "html": "index.html",
    "title": "My first application"
  },
  "include": [
      "index.html",
      "js/miletus.js",
      "css/style.css"
  ],
  "target": ["win_ia32", "win_x64"]
}

Bundling and running

Run the packager once more and check your output application:

Final application