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

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: