Tutorial_deploy_streamlit_vsc_with_colab_server 🚀

This repo shows you how to deploy a Streamlit application via ngrok using a Colab server.

Description 📖

• We will connect the Colab server with Visual Studio Code and code in this environment via Remote Tunnels. 🔗
• Then, we will create a Ngrok to deploy the app and make it accessible for everyone. 🌐

Index:

• Step by step to Connect Colab Server 📋
• Step by step to Deploy Streamlit App via Ngrok 🚀

Step by step to Connect Colab Server 📋

1. Connect to Colab Server 🌐

Step 1️⃣:

• If you only want connect Colab server, don't deploy streamlit app, you just need go to this file connect_vsc.ipynb, click Open in Colab and follow the next steps.

• To deploy streamlit app, you have to download and upload the folder deploy_streamlit or clone this repository to your Google Drive.

Step 2️⃣:

• Navigate to the folder in your drive and open the file colab connect_vsc.ipynb. The content will look like this:

Step 3️⃣:

• Run all cells in the notebook. A popup will appear on the top left. You need to allow access to your Drive folder.
  

• After completing, you will see a link and a code to connect your device:

  

Step 4️⃣:

• Sign in to GitHub in the popup. Enter the code provided.
  

• Authorize Visual Studio Code to continue:
  

• Success! 🎉
  

2. Configure Visual Studio Code ⚙️

Step 1️⃣:

• Open Visual Studio Code and install the Remote Tunnels extension.

  

Step 2️⃣:

• Click the Remote icon in the bottom left:
  

• Select "Connect with Tunnel..." and choose "GitHub".

  

• Select "Colab Connect" and wait for the connection.

  

3. Open Your Drive Folder 📂

• Once connected, navigate to the folder /content/drive/MyDrive/ to access your Drive files.

  

• Choose the folder you want to work on. In this case, select the deploy_streamlit folder to deploy the app.

• Start coding directly in your Drive folder. Changes will automatically save to the Drive. 💾
  

---

Step by step to Deploy Streamlit App via Ngrok 🚀

1. Sign Up for Ngrok 🛠️

• Create an account at Ngrok.

2. Install Necessary Extensions ⚙️

• In the folder connected above, locate the Jupyter extension and install it in collab-connect.

  

3. Get Ngrok Token and Deploy 🌐

• Retrieve your Ngrok auth token from this page and copy it.

  

• Open the file deploy.ipynb, locate the relevant section, and paste your token.

  

• Run all cells. If prompted, select Jupyter Kernel.

  

• After completion, you'll see a link to open your Streamlit app. Share this link with others.

  

---

Note: The initial setup might take a few minutes!

Log Monitoring:

You can check the log output in the file nohup.out.

---

Example Streamlit App 🎉