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.
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.jlwhere the logic resides, and
app.jl.htmlwhich 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
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
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
@inmacro if the component stores its state to the variable, or
@outif 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
@outcan only be modified within a block delimited by the
@onchangemacro. 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!
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.