├── deploy_streamlit
├── my_crush.png
├── app.py
├── connect_vsc.ipynb
└── deploy.ipynb
└── README.md
/deploy_streamlit/my_crush.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tkag0001/Tutorial_deploy_streamlit_vsc_with_colab_server/HEAD/deploy_streamlit/my_crush.png
--------------------------------------------------------------------------------
/deploy_streamlit/app.py:
--------------------------------------------------------------------------------
1 | import streamlit as st
2 | st.set_page_config(layout="wide")
3 |
4 | st.header("Trịnh Huỳnh Thịnh Khang 🌻")
5 | st.subheader("Cảm ơn mọi người đã ghé qua và thăm repository của mình nha <3")
6 | st.image("./my_crush.png")
--------------------------------------------------------------------------------
/deploy_streamlit/connect_vsc.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "markdown",
5 | "metadata": {
6 | "id": "view-in-github",
7 | "colab_type": "text"
8 | },
9 | "source": [
10 | "![\"Open](\"https://colab.research.google.com/assets/colab-badge.svg\")
"
11 | ]
12 | },
13 | {
14 | "cell_type": "code",
15 | "execution_count": null,
16 | "metadata": {
17 | "id": "2RQxKOO6SK96"
18 | },
19 | "outputs": [],
20 | "source": [
21 | "!pip install -U git+https://github.com/amitness/colab-connect.git"
22 | ]
23 | },
24 | {
25 | "cell_type": "code",
26 | "execution_count": null,
27 | "metadata": {
28 | "id": "K6kG5LfZSRET"
29 | },
30 | "outputs": [],
31 | "source": [
32 | "#https://www.youtube.com/watch?v=5qQL4Kc3jj4\n",
33 | "from colabconnect import colabconnect\n",
34 | "!uname -a\n",
35 | "colabconnect()"
36 | ]
37 | }
38 | ],
39 | "metadata": {
40 | "colab": {
41 | "provenance": [],
42 | "include_colab_link": true
43 | },
44 | "kernelspec": {
45 | "display_name": "Python 3",
46 | "name": "python3"
47 | },
48 | "language_info": {
49 | "name": "python"
50 | }
51 | },
52 | "nbformat": 4,
53 | "nbformat_minor": 0
54 | }
55 |
--------------------------------------------------------------------------------
/deploy_streamlit/deploy.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "markdown",
5 | "metadata": {
6 | "id": "view-in-github",
7 | "colab_type": "text"
8 | },
9 | "source": [
10 | ""
11 | ]
12 | },
13 | {
14 | "cell_type": "code",
15 | "source": [
16 | "!pip install pyngrok fastapi uvicorn\n",
17 | "!pip install python-multipart\n",
18 | "!pip install streamlit"
19 | ],
20 | "metadata": {
21 | "id": "hmskJnGtga0H"
22 | },
23 | "execution_count": null,
24 | "outputs": []
25 | },
26 | {
27 | "cell_type": "code",
28 | "execution_count": null,
29 | "metadata": {
30 | "id": "RCeVuEebgYqC"
31 | },
32 | "outputs": [],
33 | "source": [
34 | "import os\n",
35 | "import threading\n",
36 | "import socket\n",
37 | "from pyngrok import ngrok, conf\n",
38 | "from fastapi import FastAPI\n",
39 | "import uvicorn"
40 | ]
41 | },
42 | {
43 | "cell_type": "markdown",
44 | "metadata": {
45 | "id": "g2MKGXvGgYqE"
46 | },
47 | "source": [
48 | "# Init deploy process"
49 | ]
50 | },
51 | {
52 | "cell_type": "code",
53 | "execution_count": null,
54 | "metadata": {
55 | "id": "uRPbUvP8gYqF"
56 | },
57 | "outputs": [],
58 | "source": [
59 | "your_token =\"\" # Input your token"
60 | ]
61 | },
62 | {
63 | "cell_type": "code",
64 | "execution_count": null,
65 | "metadata": {
66 | "id": "h_MljbJdgYqF"
67 | },
68 | "outputs": [],
69 | "source": [
70 | "# Set your ngrok auth token\n",
71 | "print(\"Enter your authtoken, which can be copied from https://dashboard.ngrok.com/get-started/your-authtoken\")\n",
72 | "os.system(f\"ngrok config add-authtoken {your_token}\")\n",
73 | "\n",
74 | "# Initialize FastAPI app\n",
75 | "app = FastAPI()\n",
76 | "\n",
77 | "# Start Streamlit server on a specific port\n",
78 | "!nohup streamlit run app.py --server.port 8000 &\n",
79 | "\n",
80 | "# Open an ngrok tunnel to the HTTP server\n",
81 | "port = 8000 # Default FastAPI/uvicorn port\n",
82 | "public_url = ngrok.connect(port).public_url\n",
83 | "print(f\" * ngrok tunnel \\\"{public_url}\\\" -> \\\"http://127.0.0.1:{port}/\\\"\")\n",
84 | "\n",
85 | "# Comment to test deploy streamlit\n",
86 | "# # Define FastAPI routes\n",
87 | "# @app.get(\"/\")\n",
88 | "# async def index():\n",
89 | "# hostname = socket.gethostname()\n",
90 | "# return {\"message\": \"Hello from Colab!\", \"hostname\": hostname}\n",
91 | "\n",
92 | "# @app.get(\"/hello/{name}\")\n",
93 | "# async def say_hello(name: str):\n",
94 | "# return {\"message\": f\"Hello, {name}!\"}\n",
95 | "\n",
96 | "# # Start FastAPI server in a separate thread using uvicorn\n",
97 | "# def start_uvicorn():\n",
98 | "# uvicorn.run(app, host=\"0.0.0.0\", port=port)\n",
99 | "\n",
100 | "# threading.Thread(target=start_uvicorn, daemon=True).start()"
101 | ]
102 | }
103 | ],
104 | "metadata": {
105 | "kernelspec": {
106 | "display_name": "Python 3 (ipykernel)",
107 | "language": "python",
108 | "name": "python3"
109 | },
110 | "language_info": {
111 | "codemirror_mode": {
112 | "name": "ipython",
113 | "version": 3
114 | },
115 | "file_extension": ".py",
116 | "mimetype": "text/x-python",
117 | "name": "python",
118 | "nbconvert_exporter": "python",
119 | "pygments_lexer": "ipython3",
120 | "version": "3.10.12"
121 | },
122 | "colab": {
123 | "provenance": [],
124 | "include_colab_link": true
125 | }
126 | },
127 | "nbformat": 4,
128 | "nbformat_minor": 0
129 | }
130 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Tutorial_deploy_streamlit_vsc_with_colab_server 🚀
2 |
3 | This repo shows you how to deploy a **Streamlit** application via **ngrok** using a **Colab server**.
4 |
5 | ## Description 📖
6 | - We will connect the **Colab server** with **Visual Studio Code** and code in this environment via **Remote Tunnels**. 🔗
7 | - Then, we will create a **Ngrok** to deploy the app and make it accessible for everyone. 🌐
8 |
9 | ## Index:
10 | - [Step by step to Connect Colab Server 📋](#connect_colab_server)
11 | - [Step by step to Deploy Streamlit App via Ngrok 🚀](#deploy_streamlit_app_ngrok)
12 |
13 |
14 | Step by step to Connect Colab Server 📋
15 |
16 | ## 1. Connect to Colab Server 🌐
17 | ### Step 1️⃣:
18 | - If you only want connect Colab server, **don't deploy streamlit app**, you just need go to this file [`connect_vsc.ipynb`](./deploy_streamlit/connect_vsc.ipynb), click **Open in Colab** and follow the next steps.
19 |
20 | 
21 |
22 |
23 | - To **deploy streamlit app**, you have to download and upload the folder [deploy_streamlit](./deploy_streamlit/) or clone this repository to your Google Drive.
24 |
25 | ### Step 2️⃣:
26 | - Navigate to the folder in your drive and open the file colab `connect_vsc.ipynb`. The content will look like this:
27 |
28 | 
29 |
30 |
31 | ### Step 3️⃣:
32 | - Run all cells in the notebook. A popup will appear on the top left. You need to allow access to your Drive folder.
33 | 
34 |
35 | - After completing, you will see a link and a code to connect your device:
36 |
37 | 
38 |
39 | ### Step 4️⃣:
40 | - Sign in to GitHub in the popup. Enter the code provided.
41 | 
42 |
43 | - Authorize Visual Studio Code to continue:
44 | 
45 |
46 | - Success! 🎉
47 | 
48 |
49 | ## 2. Configure Visual Studio Code ⚙️
50 | ### Step 1️⃣:
51 | - Open Visual Studio Code and install the **Remote Tunnels** extension.
52 |
53 | 
54 |
55 | ### Step 2️⃣:
56 | - Click the **Remote** icon in the bottom left:
57 | 
58 |
59 | - Select **"Connect with Tunnel..."** and choose **"GitHub"**.
60 |
61 | 
62 |
63 | - Select **"Colab Connect"** and wait for the connection.
64 |
65 | 
66 |
67 | ## 3. Open Your Drive Folder 📂
68 | - Once connected, navigate to the folder `/content/drive/MyDrive/` to access your Drive files.
69 |
70 | 
71 |
72 | - Choose the folder you want to work on. In this case, select the `deploy_streamlit` folder to deploy the app.
73 |
74 | - Start coding directly in your Drive folder. Changes will automatically save to the Drive. 💾
75 | 
76 |
77 | ---
78 |
79 | Step by step to Deploy Streamlit App via Ngrok 🚀
80 |
81 | ## 1. Sign Up for Ngrok 🛠️
82 | - Create an account at [Ngrok](https://ngrok.com/).
83 |
84 | ## 2. Install Necessary Extensions ⚙️
85 | - In the folder connected above, locate the **Jupyter** extension and install it in `collab-connect`.
86 |
87 | 
88 |
89 | ## 3. Get Ngrok Token and Deploy 🌐
90 | - Retrieve your **Ngrok auth token** from [this page](https://dashboard.ngrok.com/get-started/your-authtoken) and copy it.
91 |
92 | 
93 |
94 | - Open the file **deploy.ipynb**, locate the relevant section, and paste your token.
95 |
96 | 
97 |
98 | - Run all cells. If prompted, select **Jupyter Kernel**.
99 |
100 | 
101 |
102 | - After completion, you'll see a link to open your Streamlit app. Share this link with others.
103 |
104 | 
105 |
106 | ---
107 |
108 | ***Note:*** The initial setup might take a few minutes!
109 |
110 | ### Log Monitoring:
111 | You can check the log output in the file `nohup.out`.
112 |
113 | ---
114 |
115 | # Example Streamlit App 🎉
116 | 
117 |
--------------------------------------------------------------------------------