UX: Make it easier to launch development server inside a workspace

Duplicate of &15732

---

MR: Pending

Description

Previewing changes on a development server is a common part of a developer's workflow. To do this currently a user has to copy the workspace url > open a new tab > paste the url > change the port in the url.

Problem 1:

• The url structure doesn't make it obvious that the port can be edited this way.

Example:

• https://60001-workspace-73241-18528227-xizu5w.workspaces.gitlab.dev/?folder=/projects/example-nodejs-express-app becomes https://3000-workspace-73241-18528227-xizu5w.workspaces.gitlab.dev/?folder=/projects/example-nodejs-express-app

Idea:

• Could we restructure the url to make it clearer which part relates to the port? For example: https://workspace-73241-18528227-xizu5w.workspaces.gitlab.dev:3000
  • NOTE: After digging into past issues I found this explanation of why this idea likely isn't workable: #391856 (comment 1283027979)

Supporting evidence:

• From UX Scorecard: “Usually the port is at the end (of the url)”

Problem 2:

• Users often don't understand the capabilities of a workspace and how it compares to their local environments feature-wise. Without external guidance they struggle to discover the ability to view alternate ports within a workspace.

Example:

• 

Idea:

• Could we reveal the correct url in the terminal after a development server is run so the user only has to click the link?
• Could we expose the url through the GitLab Workflow extension or GitLab CLI?

Supporting evidence:

• From UX Scorecard: “I would not have figured this out without the README direction”

Acceptance Criteria

TODO: Fill out (required)

• [Describe what must be achieved to complete this issue.]
• [Describe another requirement needed to complete this issue.]
• [Add additional acceptance criteria as needed.]