Launching Streamlit with a random port in vscode... useful for debugging

Using Streamlit
1

UPDATE: @CHerSun informed me that you can “Omit --server.port and it will start on the first available port up from 8501”

Leaving this here though as it spells out how to invoke preLaunchTask scripts.

I commented in this post, and then decided to just ask ChatGPT for the answer. :sunglasses:

(Not tested yet… your milege may vary.)

Sharing it with all you folks:

Prompt: In my vscode launch.json file I have a configuration with a fixed port number. Is there a way to make this port setting random?

For Unix

Yes, you can make the port number random in your launch.json by using a variable or dynamically assigning it in a preLaunchTask. However, launch.json itself does not support direct randomization of values. Here are a few workarounds:

1. Use an Environment Variable

You can generate a random port number in a shell script and set it as an environment variable before launching your debug configuration.

  1. Modify launch.json to use an environment variable:

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch with Random Port",
            "program": "${workspaceFolder}/index.js",
            "env": {
                "PORT": "${env:RANDOM_PORT}"
            }
        }
    ]
}

  2. Generate a random port before launching VS Code (run this in your terminal):

    export RANDOM_PORT=$((RANDOM % 1000 + 3000)) # Generates a port between 3000-3999
code .

2. Use preLaunchTask to Generate a Random Port

If you want VS Code to generate the port dynamically on launch:

  1. Create a task in .vscode/tasks.json:

    {
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Generate Random Port",
            "type": "shell",
            "command": "echo $((RANDOM % 1000 + 3000)) > .vscode/port.txt"
        }
    ]
}

  2. Modify launch.json to read the generated port:

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch with Random Port",
            "program": "${workspaceFolder}/index.js",
            "preLaunchTask": "Generate Random Port",
            "env": {
                "PORT": "${command:cat .vscode/port.txt}"
            }
        }
    ]
}

This will generate a random port and store it in .vscode/port.txt, which is then read by launch.json.

For Windows

On Windows, you can achieve the same goal using PowerShell or a batch script. Here are two approaches:

1. Using PowerShell to Generate a Random Port (Recommended)

You can use a PowerShell script in a preLaunchTask to generate a random port and store it in a file.

Steps:

  1. Create a preLaunchTask in .vscode/tasks.json to generate the port:

    {
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Generate Random Port",
            "type": "shell",
            "command": "powershell -ExecutionPolicy Bypass -File .vscode/generate_port.ps1"
        }
    ]
}

  2. Create a PowerShell script (.vscode/generate_port.ps1) to generate a random port and save it:

    $minPort = 3000
$maxPort = 3999
$randomPort = Get-Random -Minimum $minPort -Maximum $maxPort
Set-Content -Path .vscode/port.txt -Value $randomPort

  3. Modify launch.json to use the generated port:

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch with Random Port",
            "program": "${workspaceFolder}/index.js",
            "preLaunchTask": "Generate Random Port",
            "env": {
                "PORT": "${command:cat .vscode/port.txt}"
            }
        }
    ]
}

When you start debugging, VS Code will:

  • Run the PowerShell script (generate_port.ps1) to generate a random port.
  • Save the port in .vscode/port.txt.
  • Read the port from .vscode/port.txt into the environment variable for debugging.

2. Using a Windows Batch Script (Alternative)

If you prefer a batch script (.bat) instead of PowerShell:

  1. Create .vscode/generate_port.bat:

    @echo off
set /a randomPort=(%random% %% 1000) + 3000
echo %randomPort% > .vscode/port.txt

  2. Modify tasks.json to call the batch script:

    {
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Generate Random Port",
            "type": "shell",
            "command": ".vscode\\generate_port.bat"
        }
    ]
}

  3. Modify launch.json (same as before):

    {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch with Random Port",
            "program": "${workspaceFolder}/index.js",
            "preLaunchTask": "Generate Random Port",
            "env": {
                "PORT": "${command:cat .vscode/port.txt}"
            }
        }
    ]
}

Which One Should You Use?

  • PowerShell (generate_port.ps1): More robust and cross-compatible.
  • Batch Script (generate_port.bat): Simpler but limited in logic.

:rocket::rocket::rocket: