Hosting a Genie Application

Introduction

On this page, we will demonstrate how to deploy a dashboard using Genie Builder for data-centric web applications.

Getting Started with Genie Builder

First, Login to JuliaHub.com

Navigate to the Projects area (on the left-side panel)

Sidebar

Create a New Project

Click on "Create Project”

Create

Select Genie from the template choices

Select Template

Give your project a name and (optional) description. Select Editing Mode (Exclusive if working by yourself) or Collab Mode (if you want to have others work off branches on your project)

Editing Mode

Add any Collaborators if needed

Collaborators

Once your project is created, hit the Launch button.

Launch

It will take a minute to start the instance and then it’ll say “Connect” when ready. Click on Connect.

Connect

Build Your Interface (No-Code Editor)

Once the Julia/Genie IDE opens, you'll need to wait a few minutes for Genie to start up. If it doesn't start, click on GB stopped at the bottom of the screen and it will then start the instance.

Start

Once started, you should see a tab appear on the lower-left side of the screen that says Genie

Genie

This should start the drag n' drop functionalty of Genie Builder. If it doesn't click on the app.jl.html and it will open the editor. On the right, you'll see components you can drag into the screen to build your application.

Builder

If you want to preview your app, click on the preview icon located on the bottom left. It may not appear until hover over.

Preview

This is how the preview mode will look:

Site

How to Deploy Genie Apps on JuliaHub

Once you are done editing your Genie Builder app, you can launch it live on JuliaHub for the public or for just your organization to see. Go back to your project view.

If you are in collaborative edting mode, you will notice that the deploy button is greyed out. This is because in this editing mode, you can only deploy from the Source (main branch).

No Depoy

Before you switch to source, you should make sure your app changes in your workspace are published (committed) to the source branch. To do so, click on the publish button.

Publish

Now you can switch the source branch.

Switch

From the source (main branch) of the project, you can now deploy the project.

Deploy

The first time you do this, JuliaHub may ask for your credit card information. Once you've entered your payment information for hosting and deploying apps, you can return to this page.

Once you have input your credit card information and returned to the project and hit deploy, the project will now ask you a few options for your hosted app. From here, you can select the size of the machine (hosting plan), the time limit for your app to be live, and the authorization type of totally public or just hosted for you or your organization. The most important thing to check here is that the port number is set to 9999. If not, please enter 9999. Then hit Start.

Port

Now, the app will start the deployment process. It may take up to 5 minutes for your app to be deployed on the selected machine. Once ready, you can hit the Connect button to launch your live app.

Connect

Alternatively, you can selet on the right-hand arrow and click on the copy link button.

Copy

This will give you the URL of your live app and options to embed this on other sites.

Embed

Congratulations! You should see your live app at the URL on JuliaHub.

Website

Feedback

For feedback about using Genie Builder on JuliaHub, please contact us and write a message.