Get started with Streamlit App

Overview

This article will show you how to publish a Python App with Streamlit in Katonic Platform.

In this tutorial you will:

• spin a workspace environment with the necessary dependencies to publish a Streamlit App.
• setup and create sample Streamlit app.
• publish an App to the Katonic Deploy Launchpad.

You’ll be working with sample-streamlit app.

It will take approximately 5 minutes to get this example running in Katonic platform.

Setting-up your Workspace

The first step is to create a VS code Workspace capable of running your App.

1. From the platform , click Workspace.

2. From the Workspaces Overview, click Create Workspace.

Fill the following details there:

• Name : fill your workspace name.

• Select Environment: select VSCode environment.

• Image: select VSCode webapps image.

• Webapp: select Streamlit.

• Additional Port: 8050.

• Resources: Desired compute resource for workspace.

3. You will be directed to the Workspace overview window, where you can see your workspace under processing.

4. It will take approximately 2-3 minutes to get this workspace ready.

5. You can connect to your workspace ,when the processing tab changes to running.

   Note: Refresh the page, if your are not seeing processing to running status change after 2-3 minutes.

6. Click on the connect to use this Workspace for App building.

Required GitHub instructions and setup

1. Once you connect to the your workspace , you will be taken to VSCode Workspace.

2. Before starting anything it is advised that you should connect your GitHub repository to the VSCode workspace.

3. First create an empty repository in your GitHub account.

4. Clone that repository to your VSCode Workspace.

5. Paste below code into terminal.

git clone https://github.com/account-name/repo-name.git

6. Fill your username and password/token as instructed in vscode workspace.

7. After logging with your git account , you will see your repo folder in workspace.

Start the app development

1. Write your sample app.py code there or copy below sample code.

from collections import namedtuple
import altair as alt
import math
import pandas as pd
import streamlit as st
import os
routes = os.environ["ROUTE"]
"""
# Welcome to Streamlit!
Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:
If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
forums](https://discuss.streamlit.io).
In the meantime, below is an example of what you can do with just a few lines of code:
"""
with st.echo(code_location='below'):
    total_points = st.slider("Number of points in spiral", 1, 5000, 2000)
    num_turns = st.slider("Number of turns in spiral", 1, 100, 9)
    Point = namedtuple('Point', 'x y')
    data = []
    points_per_turn = total_points / num_turns
    for curr_point_num in range(total_points):
        curr_turn, i = divmod(curr_point_num, points_per_turn)
        angle = (curr_turn + 1) * 2 * math.pi * i / points_per_turn
        radius = curr_point_num / total_points
        x = radius * math.cos(angle)
        y = radius * math.sin(angle)
        data.append(Point(x, y))
    st.altair_chart(alt.Chart(pd.DataFrame(data), height=500, width=500)
        .mark_circle(color='#0068c9', opacity=0.5)
        .encode(x='x:Q', y='y:Q'))

Note: Always define the routes as given in sample code, routes = os.environ["ROUTE"]

Note: Always keep the port = 8050

Test your app

1. Create the requirements.txt file with all required dependency.

2. Here is the requirements.txt code used in above app.

altair
pandas
streamlit

Note: type following command in the terminal.

pip install -r requirements.txt
streamlit run app.py --server.port=8050 --server.address=0.0.0.0 

Note: keep the path relative to your folder structure.

Note: keep your app name as app.py and requirement file as requirements.txt

3. Go back to the Workspaces.

4. Click on the Live app to see your app.

5. Your app will open on the new tab.

6. Finally commit and push your code to the GitHub.

git config user.email 'youremail@domain.com'
git config user.name 'youraccount-name'
git add .
git commit -m ' your msg'
git push

Note: Follow the necessary GitHub instructions as pop up by VSCode to complete code push.

Deploy your App

1. To deploy your app, go to the Deploy tab and click on the +create Deployment button and select Apps.

2. You will see below form window.

3. Fill the details as follow:

• App Name: your app name.

• Select Environment: your app environment.

• Github Token: your github token.

• Username: your github account.

• Account Type: select your account personal or organisation.

• Repository Branch: choose app repo from drop down.

• Main file path: appfile name with extention.

• Python Version: choose desired python version for app.

• Resources: choose desired compute resources.

4. Click on the Deploy button , it will take you to the Deploy window again.

5. Here you can see your App deployment status processing.

6. After few minutes status will change to running.

7. check the logs.

8. you can view the current status and check if the deployed app is ready to go.

9. Click on App Url to see the deployed app.

You can share the App Url to showcase your work.