Get started with Genie Cloud

Genie Cloud is a development platform to quickly build web apps around your Julia code. With it you can build anything: interactive dashboards, ML apps, smart tools and complex production apps. All without worrying about frontend code, server stack or hosting.

In fact, Genie Cloud features a no-code, drag & drop builder to quickly develop UIs without having to write a single line of HTML or Javascript. And on top of it, one-click deployments let you instantly publish and share apps. No need to become a devops expert!

Still, power users need not worry. Genie Cloud builds on top of the open source Genie Framework, which gives you tools such as a low-code UI layer, server backend, authentication, and ORM to build your full-stack apps in pure Julia. See the documentation section for more information about the Genie Framework API.

This short guide will lead you through the essential steps in building your first app on Genie Cloud.

Create a new app in the dashboard

The user dashboard shows the existing apps in your development workspace, and the apps that have been deployed to production. To create a new app, click on the plus sign in the grid, give the app a name and set access restrictions, and click "create"

Launch the workspace

Open your newly created app in the workspace by clicking on the Edit button. This will launch a development environment based on the VSCode editor in which you can develop the entirety of your app.

By default, a new app comes with two files:

app.jl where the logic resides, and
app.jl.html which defines the UI.

You'll manually edit app.jl and other files in the workspace, whereas app.jl.html can be edited via GC's no-code-editor.

To preview an in-development app, click on the icon next to the GET tab. This will open a new tab with your app rendered.

Add your Julia code

The app.jl file comes with a basic skeleton for your app. The block delimited by the @app macro will hold the reactive code making the UI interactive. The @page macro defines a route, and the file that will be returned to the browser when this route is visited.

The first step is to install any packages you might need using the builtin package manager.

Then, you can add your Julia code directly in app.jl before the @app block.

module App
using StatsBase: mean, std, var
using GenieFramework
@genietools

function statistics(x)
  mean(x), std(x), var(x)
end

@app begin
    # reactive code goes here
end

@page("/", "app.jl.html")
end

Implement the UI

Launch the no-code editor by clicking on the eye icon in the left sidebar,

and start building the UI by dragging UI components onto the canvas.

When you select a component in the canvas, its configuration options will open in the right sidebar. Here you can set the component's data bindings, and other properties to control its behavior.

Implement the app's logic

Interactive components such as drop-down selectors, sliders or text fields are bound to variables in the Julia code so that their state can be accessed and modified. You can bind a component to a variable in three steps:

Check the binding fields of each component to find out which state variables it requires.

Define the reactive variable in the Julia code, using the @in macro if the component stores its state to the variable, or @out if the component reads from it.

@app begin
  @in N = 0
  @out m::Float32 = 0.0
  @out s::Float32  = 0.0
  @out v::Float32  = 0.0
  @out hist = PlotData()
end

Attach each variable to a component via a binding field in the no-code editor.

Now it's time to add reactive code that executes when a state changes. This is done with the @onchange macro, which watches one or more variables and executes a block of code when their values change.

@app begin
  @onchange N begin
    x_rand = randn(N)
    m, s, v = statistics(x_rand)
    hist = PlotData(x=x_rand, plot=StipplePlotly.Charts.PLOT_TYPE_HISTOGRAM)
  end
end
end

Reactive variables tagged with @in or @out can only be modified within a block delimited by the @onchange macro. Any changes made outside of it will not be reflected in the UI.

With this, you'll have a working interactive app. All is left to do is deploy it!

app.jl

module App
using StatsBase: mean, std, var
using GenieFramework
@genietools

function statistics(x)
  mean(x), std(x), var(x)
end

@app begin
  @out m::Float32 = 0.0
  @out s::Float32  = 0.0
  @out v::Float32  = 0.0
  @in N = 0
  @out hist = PlotData()
  @onchange N begin
    x_rand = randn(N)
    m, s, v = statistics(x_rand)
    hist = PlotData(x=x_rand, plot=StipplePlotly.Charts.PLOT_TYPE_HISTOGRAM)
  end
end

@page("/", "app.jl.html")
end

Deploy the app

Deploying your app to production makes it accessible to anyone on the Internet. To deploy, go back to the user dashboard and click on the Deploy button for your app. After a few minutes, the deployed app will be accessible by clicking on Open or by typing https://appname-yourusername.geniecloud.app in the browser.

GuidesManaging your apps