Edit in Gitpod

Ports

Gitpod supports exposing HTTP ports via a custom domain that is associated with your workspace. You can also use port forwarding, so that you do not need to update your application if it already references the localhost hostname. You can forward all ports using the local companion, natively in both VS Code Desktop, JetBrains and also via the command-line using SSH.

Default port behaviors

By default, when a port is opening in a Gitpod workspace, Gitpod will:

  1. Direct HTTP traffic - When an application starts listening to an HTTP port, Gitpod detects the port and exposes it on a URL that requires authentication. Setting the port to “public” would make the port URL accessible to anyone on the internet (or the installed network if using self-hosted Gitpod).
  2. Notify the user - Gitpod sends the user a popup notification in their IDE or editor to let the user know that a port has been detected.
Setting a port public/private in VS Code Browser
Setting a port public/private in VS Code Browser
Setting a port public/private in a JetBrains IDE
Setting a port public/private in a JetBrains IDE

Accessing port URLs

You can access the dedicated port URL by pre-pending the port number to the workspace URL.

e.g 3000-yourworkspace.ws-eu45.gitpod.io

You can also print the port URL using the gp url command (e.g. gp url 3000).

And if you prefer listing all open ports URLs at once, use gp ports list command.

Configuring port behaviors

To modify or change default port behaviors, update the ports section of your .gitpod.yml.

All changes to port behaviors take effect immediately, not requiring a workspace restart.

Note: Some actions (e.g. setting a port public/private) can be taken via the IDE or editor.

Configure port opening

The port open event is triggered when a new port is detected as open within the workspace.

Port opening behavior can only be set via the .gitpod.yml

The property onOpen configures port opening behaviors:

  • notify (default) - Show a notification for newly detected ports.
  • open-preview - Open the port URL in a preview within the editor or IDE.
  • open-browser - Open the port URL in a browser tab.
  • ignore - Ignore default behavior (notify).

Example: Open a browser tab for port 8080

language icon language: 
yml
ports:
  - name: Web App
    description: The main application web server
    port: 8080
    onOpen: open-browser

Specify port names & descriptions

You can give ports a name and a description (both optional). These properties will help you to add context about what the port is being used for.

Every exposed port's information and its corresponding actions can be found in the PORTS tab inside of VS Code Browser.

The PORTS tab in VS Code Browser with a single port's actions
The PORTS tab in VS Code Browser with a single port's actions

The property visibility configures who can access a port:

  • private (default) - Only allow users with workspace access to access the port.
  • public - Allows everyone with the port URL to access the port.

Configure port visibility

Port visibility can be set in .gitpod.yml, changed via the Gitpod CLI, or manually changed within the IDE or editor.

Setting a port public/private in VS Code Browser
Setting a port public/private in VS Code Browser

Configure port ranges

All port configurations can be applied to ranges as well as single ports.

Example: Prevent notifications for ports between 3000 and 8999.

Ports won’t be shown in VS Code’s PORTS view or in the Gitpod CLI until they are opened.

language icon language: 
yml
ports:
  - port: 3000-8999
    onOpen: ignore

Ports ordering

Ports are ordered according to their definition in .gitpod.yml. Any undefined ports are sorted numerically in ascending order. Port ordering rules apply to all ports views, for example, when using gp ports list or viewing ports in VS Code or JetBrains.

Port forwarding

There are two types of port forwarding: local and remote.

Local port forwarding allows you to forward a port running in your Gitpod workspace to access via your localhost hostname. Remote port forwarding exposes a locally running process to use in your workspace. Remote port forwarding is not currently supported.

Local port forwarding

Using the Local Companion, you can automatically forward all ports from your workspace to localhost. Setting up port forwarding for VS Code Browser allows you to use a project already configured with localhost without requiring any code changes.

Local port forwarding via SSH

Using SSH command-line access to your workspace, ports can also be forwarded manually using tools such as the OpenSSH remote login client.

Example: Forwarding port 3000 to localhost:3000

ssh -L 3000:localhost:3000 <workspace-ssh-connection>

Local reverse port forwarding via SSH

If you have a port open in your local machine but you want to access it inside Gitpod via SSH, you could do the following:

  • Copy the SSH command for a workspace.
  • Paste the SSH command on your local machine terminal.
  • Append -N -R <port>:localhost:<port> to the command and press enter, make sure to change the .
    • Assuming the port is 5000, it would look like -N -R 5000:localhost:5000.

Now, from your Gitpod workspace, you can access it via localhost:5000.

Example Scenario:

  • You start a HTTP file server on port 5000 on your local machine: python3 -m http.server 5000.

  • Start reverse port forwarding from a different terminal on your local machine to access it from your Gitpod workspace:

language icon language: 
bash
ssh 'some-special-ws-id@gitpod.io' -N -R 5000:localhost:5000
  • Now run curl -L http://localhost:9000 inside your Gitpod workspace, which will hit the port 5000 on your local machine’s HTTP server.

Cross-Origin Resource Sharing (CORS)

If you start a server on a private port, let’s say 5001, and want to connect to it from your web application which runs on a different port, e.g. 3000, you have to configure your requests. This is necessary because Gitpod requires credentials for private ports. Without credentials, Gitpod cannot verify that the request is made by an authorized user.

Configure your web application

To make this work, your web application’s fetch request needs to have the credentials: "include" option set. See the MDN doc’s credentials description for more details.

Configure your server

In your server (the one on port 5001 in the above example), you have to configure the response to include the Access-Control-Allow-Credentials header. Without it, your browser rejects the response and you see CORS errors in the browser console.

Was this helpful?

Previous Next