Hello World

In this tutorial, we will create a basic project that makes use of flare to create a simple web-app.

Project setup

In order to make flare accessible in your project, either download the flare master branch from github and extract it into a flare subdirectory in your project, or - if you are using git - clone it into a git submodule of your project by calling git submodule add git@github.com:viur-framework/flare.git.

Once this is done, you can create an index.html file that will make use of the now available flare assets.

The HTML

Basically all you need to do is add the flare CSS sheet and javascript file to your HTML file and you are good to go.

<link rel="stylesheet" href="flare/assets/css/style.css"/>
<script src="flare/assets/js/flare.js"></script>

A simple index.html file that uses flare might now look like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="flare/assets/css/style.css"/>
    <script src="flare/assets/js/flare.js"></script>
    <script>
        window.addEventListener("load", () => {
            new flare({
                fetch: {
                    "flare": {
                        "path": "flare/flare"
                    }
                },
                kickoff:
`
from flare import *
flare.popup.Alert("Hello World")
`
            });
        });
    </script>
</head>
<body class="is-loading">
</body>
</html>

Building from there

The fetch block is where the flare python modules are being loaded at application start. It is advisable to add your own python module structure fairly quickly.

  1. Add a subdirectory helloworld next to your index.html.

  2. Add a file __init__.py:

from . import helloworld

  1. Add a file helloworld.py:

from flare import *


class HelloWorld(object):
    _message = None

    def __init__(self, message="Hello World"):
        self._message = message

    def show(self):
        popup.Alert(self._message)

  1. Create a files.json file in your module directory and add the following content:

[
    "__init__.py",
    "helloworld.py"
]

  1. Add a second block to the fetch in your index.html:

fetch: {
    "flare": {
        "path": "flare/flare"
    },
    "helloworld": {
        "path": "helloworld"
    }
},

  1. Change your kickoff script to run the code in your module, instead:

from helloworld import *
helloworld.HelloWorld("Hello module world!").show()

To execute your hello world sample you can use the test webserver located in the flare/tools/ folder. Just run test-server.py in your project directory and open http://localhost:8080/index.html in your browser.