How to specify a port number while running flutter web

Question

Is there any way to start Flutter web, with a Headless-Server target, always on the same specified port number ?

Today, running the web application with:

flutter run -d headless-server

Provides a random port number.

Thoreau

Answer 1

I found the answer inside the flutter_tools source code:

flutter run -d headless-server --web-port=1234

Thoreau

strange this is still not listed when you do "flutter run -h" – Washing

or flutter run -d chrome --web-port=1234 – Furiya

Answer 2

To do this for Android Studio, just add the additional parameters to menu Run > Edit configuration. So in the Additional arguments, add --web-port=49430

Panlogism

Where is this in Android Studio? – Colpitis

@Colpitis open de dropdown voor run configurations (next to the device selection dropdown) and select Edit Configurations – Panlogism

How to do it on VSCODE? – Zeal

For VSCODE you can add a port to use as argument in launch.json config file. See here... github.com/Dart-Code/Dart-Code/issues/… – Arise

Answer 3

The above solution works fine if you are like using command line. But if you you are using VsCode by CTRL+F5 that won't work. So to make vscode CTRL+F5 run in chrome or web-server go to your project root directory create .vscode directory and inside that folder add launch.json file.

Now if you want to run in web server add this lines in you launch.json

{
 "version": "0.2.0",
 "configurations": [{
        "name": "Flutter",
        "request": "launch",
        "type": "dart",
        "args": ["-d", "web-server","--web-port", "8000"],
    }
]}

And if you want to launch in chrome device change argument web-server to chrome i.e.

{   
 "version": "0.2.0",
 "configurations": [{
        "name": "Flutter",
        "request": "launch",
        "type": "dart",
        "args": ["-d", "chrome","--web-port", "8000"],
    }
]}

Now you can run CTRL+F5.

Stickleback

Can you share how to do the same for Android Studio? – Charbonneau

@SlickSlime check my response here: https://mcmap.net/q/262604/-how-to-specify-a-port-number-while-running-flutter-web – Panlogism

see here for detail on the vscode config settings used by @Stickleback dartcode.org/docs/launch-configuration – Civility

Just what I was looking for. – Anticlimax

Did not work until I added also "program": "lib/main.dart", – Monitorial

Where should I put this launch.json file? I tried to create launch.json file beside pubspec.yaml but didn't work! – Zeal

@WDR Read my instruction above. So to make vscode CTRL+F5 run in chrome or web-server go to your project root directory create .vscode directory and inside that folder add launch.json file. – Stickleback

Answer 4

You can run flutter web on any chromium based browser

Chrome     |    Edge     

Use any one to launch flutter web application with custom port

flutter run -d chrome --web-port 5555

flutter run -d edge --web-port 5555

flutter run -d web-server --web-port 5555

---

EDIT

UNRELATED TO THE MAIN Question, but Helpful if you face the below-mentioned issue.

Recently faced an issue with a flutter web application, it was not running and no logs/ errors were visible.

How I fixed it.

Run flutter build web this should print out the errors, fix those errors and then try running your application by above mentioned commands

Pacorro

Maybe its just a macOS thing? Seems like I need "web" not "web-server", it doesn't launch the same but does start: flutter -v run -d web --web-port=28080 Still, --web-port is the trick here. :) – Reddish

Answer 5

Solution for VS Code

1. Go to settings
2. Search for Dart: Flutter Run Additional Args
3. Enter --web-port=1234
4. Click Add Item

Liberality

Answer 6

This works well too -

flutter run -d web-server --web-port 8080

Estate