Hosting and developing a Dash Application

Introduction

In the first part of the tutorial we present how to create a Dash project using the 'Projects' tab which is the fastest way to get a Dashboard application deployed.

Creating a Dash project

Navigate to the 'Projects' tab and locate the 'Create project' button. To create a new Dash project, click on the down arrow and select 'Create Dash project'.

In the next step, you should specify the name of your project and give it a short description. You can also provide tags and choose the default application.

In the final stage of the setup, you can add collaborators and grant them different access levels.

Once you have completed this stage, you will see the structure and details of your project:

You now need to populate your Dash project with files in order to deploy and launch your application. You can import files by clicking the 'Import file' button.

To deploy your Dash application, click the 'Deploy' button and type '9999' in the port field.

Finally, you can click 'Start' to submit a job and then 'Connect' to navigate to your deployed Dash application.

Congrats! You now have a web application with a Dash.jl template deployed.

Other features

We present a selection of useful features that can be used to maintain your Dash project:

• Autoscaling for project deployments: Project deployments can now scale up or down automatically. A Project deployment will scale down to 0 containers if it was not

visited in the last 3 hours. A scaled down project deployment will scale back up to 1 container when visited. Scaling can also be controlled manually using the "Suspend" and "Wake up" drop down items in the Deploy button:

• Copy link code: You can click on the "Copy link code" option to get a HTML snippet

that can then be pasted on your web pages. This snippet will render as a button that links back to your Dash app.

Using Dash.jl Outside of Projects

Should you want to spin up Dash.jl outside of a project, start, install Dash.jl with the following command:

using Pkg
Pkg.add("Dash")

Developing with JuliaHub IDE

Here we will start with a simple example:

using Dash
using Sockets

port = 8000

app = dash(requests_pathname_prefix="/proxy/$port/")

app.layout = html_div() do
    html_h1("Hello Dash"),
    html_div("Dash.jl: Julia interface for Dash"),
    dcc_graph(
        id = "example-graph",
        figure = (
            data = [
                (x = [1, 2, 3], y = [4, 1, 2], type = "bar", name = "SF"),
                (x = [1, 2, 3], y = [2, 4, 5], type = "bar", name = "Montréal"),
            ],
            layout = (title = "Dash Data Visualization",)
        )
    )
end

run_server(app, Sockets.localhost, port)

Once you run this script in the JuliaHub IDE, you should see the following dialog on the bottom right side of the screen:

Once you click on "Open in Browser" you should see the dashboard correctly rendered:

app = dash()

port = 8888
app = dash(requests_pathname_prefix="/proxy/$port/")

run_server(app, 0.0.0.0, port, debug=true)

using Sockets
run_server(app, Sockets.localhost, port, debug=true)

Adding Interactivity

Dash apps are made interactive through Dash Callbacks.

1. Define a Callback: This allows components to interact:

   callback!(app, Output("output-id", "children"), [Input("input-id", "value")]) do input_value
       return "You have entered: $input_value"
   end

2. Update the Layout: Add the components for the callback in your layout:

   app.layout = html_div() do
       dcc_input(id="input-id", value="initial value", type="text"),
       html_div(id="output-id")
   end

Resources and Examples

• Dash.jl Documentation
• Dash.jl Tutorials
• Dash.jl Scoring Engine Demo