Webpack dev server URL should be displayed more prominently

Feature Proposal

I work in a large monorepo, so when I launch the Webpack dev server, the localhost URL is unpredictable. Different apps may use different ports.

Webpack helpfully prints the URL into the console log, so that you can easily click on it to launch the Chrome web browser. It looks like this:

Currently this message is only printed once. After several incremental rebuilds, the message scrolls off the screen and gets lost. The workaround is to kill and restart the dev server, but for large projects this can mean waiting several minutes for initialization.

Suggested improvement: After every incremental rebuild, print the URL last.

How should this be implemented

A minor change to the logging code:

webpack-dev-server/lib/Server.js

    if (this.options.ipc) {
      this.logger.info(
        `Project is running at: "${
          /** @type {import("http").Server} */
          (this.server).address()
        }"`
      );
    } else {
      const protocol =
        /** @type {ServerConfiguration} */
        (this.options.server).type === "http" ? "http" : "https";
      const { address, port } =
        /** @type {import("net").AddressInfo} */
        (
          /** @type {import("http").Server} */
          (this.server).address()
        );

Feature Use Case

This change would make Webpack Dev Server easier to use.

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

  System:
    OS: Windows 10 10.0.22621
    Memory: 3.51 GB / 12.29 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 114.0.5735.134
    Edge: Spartan (44.22621.1848.0), Chromium (114.0.1823.41)
    Internet Explorer: 11.0.22621.1

Suggested improvement: After every incremental rebuild, print the URL last.

We've done this before but got a lot of feedback that it gets in the way, so we did it once, I'm afraid we can't please everyone, maybe only under the option

Making it optional sounds reasonable. 👍

I'm curious what it gets in the way of, though?

Another idea would be for reprinting to be triggered by some keystroke such as SPACE in the shell window.

I'm curious what it gets in the way of, though?

Some developers consider it spammy and annoying

Another idea would be for reprinting to be triggered by some keystroke such as SPACE in the shell window.

Yeah, I think it is a good idea too, feel free to send a PR

Hey I am Interested in contributing this issue, How to get started ?

Some developers consider it spammy and annoying

I’ve made a small change so the Dev Server URL shows up only when the user presses ‘u’, with a clear prompt. Would you be open to a PR for this?

@HTGA75

@HTGA75 I am fine with it under the option

@alexander

@HTGA75 I am fine with it under the option

@alexander‑akait
I’ve opened a PR implementing the keypress‑triggered URL reprint behind the printUrlOnKeypress option: #5489
Feel free to take a look and let me know if you’d like any changes!

Navigation Menu

Repository navigation

Webpack dev server URL should be displayed more prominently #4907

Feature Proposal

How should this be implemented

Feature Use Case

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Webpack dev server URL should be displayed more prominently #4907

Description

Feature Proposal

How should this be implemented

Feature Use Case

Please paste the results of npx webpack-cli info here, and mention other relevant information

Activity

alexander-akait commented on Jun 20, 2023

octogonz commented on Jun 20, 2023

alexander-akait commented on Jun 20, 2023

Anubhab2003 commented on Jan 3, 2025

HTGA75 commented on May 6, 2025

alexander-akait commented on May 6, 2025

HTGA75 commented on May 7, 2025

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions

Please paste the results of `npx webpack-cli info` here, and mention other relevant information