hello_Streamlit_on_Colab.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "hello_Streamlit_on_Colab.ipynb",
      "provenance": [],
      "collapsed_sections": [],
      "toc_visible": true,
      "mount_file_id": "14lqoHkO6UXdHq_OeJzAb_QEFBsAAYC1y",
      "authorship_tag": "ABX9TyMZcEqv719j7MUDHFawyPy3",
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/Mjboothaus/colab_nbdev/blob/master/hello_Streamlit_on_Colab.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "fxdAEkHxR2Oo"
      },
      "source": [
        "# Very simple example of a Streamlit app running on Collab\n",
        "\n",
        "Acknowledgement: https://medium.com/@jcharistech/how-to-run-streamlit-apps-from-colab-29b969a1bdfc"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Mff82NHzR5Yh"
      },
      "source": [
        "## Setup"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "BnXnWaM05pnk"
      },
      "source": [
        "!pip install --quiet streamlit"
      ],
      "execution_count": 1,
      "outputs": []
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "mSOjiIIk5zBF"
      },
      "source": [
        "!pip install --quiet pyngrok"
      ],
      "execution_count": 2,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "TZfaDX8JSPnZ"
      },
      "source": [
        "## Streamlit app definition"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "YJaqhPyI569M",
        "outputId": "3e369e6d-8ae7-43ad-809a-460a367f8f38"
      },
      "source": [
        "%%writefile ./st_app_hello_colab.py\n",
        "\n",
        "import streamlit as st\n",
        "PAGE_CONFIG = {\"page_title\":\"Streamlit on Colab\", \"page_icon\":\":smiley:\", \"layout\":\"centered\"}\n",
        "st.set_page_config(**PAGE_CONFIG)\n",
        "\n",
        "def main():\n",
        "\tst.title(\"Streamlit on Google Colab\")\n",
        "\tst.subheader(\"Deployed publicly via ngrok\")\n",
        "\tmenu = [\"Home\", \"About\"]\n",
        "\tchoice = st.sidebar.selectbox('Menu', menu)\n",
        "\n",
        "if __name__ == '__main__':\n",
        "\tmain()"
      ],
      "execution_count": 3,
      "outputs": [
        {
          "output_type": "stream",
          "text": [
            "Overwriting ./st_app_hello_colab.py\n"
          ],
          "name": "stdout"
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "WO2qXjWsREph"
      },
      "source": [
        "## Setting up NGROK\n",
        "\n",
        "Note: You need to save this authorisation token \"safely\" not in Github as clear text!"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "cQfyoOP86sGz",
        "outputId": "132e3d15-029f-4b15-8797-21da8419c026"
      },
      "source": [
        "!ngrok authtoken 1t6PLwnZs767eNDRwl3sxupbOhp_7wGUY5HTKzKkzYfU83GhC"
      ],
      "execution_count": 4,
      "outputs": [
        {
          "output_type": "stream",
          "text": [
            "Authtoken saved to configuration file: /root/.ngrok2/ngrok.yml\n"
          ],
          "name": "stdout"
        }
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "8Nh_mFG8QlmT",
        "outputId": "98fb66ed-c656-4782-be91-cbfaec7bc599"
      },
      "source": [
        "from pyngrok import ngrok\n",
        "# Setup a tunnel to the streamlit port 8501\n",
        "\n",
        "STREAMLIT_PORT = '8501'\n",
        "\n",
        "public_url = ngrok.connect(port=STREAMLIT_PORT)\n",
        "public_url"
      ],
      "execution_count": 5,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "<NgrokTunnel: \"http://a5e4870601a3.ngrok.io\" -> \"http://localhost:80\">"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 5
        }
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Vb7WXCfJSqxQ"
      },
      "source": [
        "## Start Streamlit app running"
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "id": "L39oWNuwS4jp"
      },
      "source": [
        "!streamlit run --server.port 80 ./st_app_hello_colab.py &> /dev/null &"
      ],
      "execution_count": 6,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "GXCTjaZIauHX"
      },
      "source": [
        "## TODO Next\n",
        "\n",
        "- Deploy a 'real' example Streamlit app e.g. `emmaus walking`\n",
        "- Have a \"run app\" and initiate ngrok tunnel / create public URL workbook (possibly a script)\n",
        "- remove any secret(s) from script\n",
        "- clean integration with github.com and `nbdev`"
      ]
    }
  ]
}