1
0
mirror of synced 2026-01-01 18:05:46 -05:00
Files
docs/content/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace.md
Amy Burns c863678e73 New organization for codespaces docs (#18910)
* adding new tables and linking to info on audit logs

* editing some text:

* adding new info on how to add image registry login

* adding link and fixing table

* formatting

* formatting

* Apply suggestions from code review

Co-authored-by: Laura Coursen <lecoursen@github.com>

* updaing private image registry secret info and other improvements

* some minor fixes

* fixing test errors

* rewriting registry secret section

* rewriting registry secret section

* updating link to reflect title

* Update content/github/developing-online-with-codespaces/managing-encrypted-secrets-for-codespaces.md

Co-authored-by: Laura Coursen <lecoursen@github.com>

* updating bullet point

* moving codespaces to top-level item

* fixing duplicated redirect

* Adding some organization for contributors

* adding learning codespaces to index file

* do not error out if category array is empty

* Apply suggestions from code review

Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>

* fixing broken link

* Document choosing machine type for a codespace in the GitHub UI (#19055)

* Document choosing machine type in the GitHub UI

* Replace link placeholder with actual path

* Update content/codespaces/changing-the-machine-type-for-your-codespace.md

Co-authored-by: Amy Burns <timeyoutakeit@github.com>

Co-authored-by: Amy Burns <timeyoutakeit@github.com>

* reoganizing based on CD

* putting machine type doc in correct location

* fixing broken redirects

* removing quickstart example from index page

* updating main index file

* Fixing broken links

* adding intros

* adding js quickstart (#18960)

* adding js quickstart

* clarify walkthrough

* adding more images and last few sections

* fixing broken links

* fixing broken links and formatting

* formatting fixes

* Apply suggestions from code review

Co-authored-by: hubwriter <hubwriter@github.com>

* adding index file for learn folder

* adding some feedback changes

* adding some review comments

* fixing broken links

Co-authored-by: hubwriter <hubwriter@github.com>

* doing some additional re-org

* fixing topics

* adding Codespaces as a topic

* fixing so title matches slug

* Update data/reusables/codespaces/codespaces-machine-types.md

Co-authored-by: Meg Bird <megbird@github.com>

* expanding intro

Co-authored-by: Laura Coursen <lecoursen@github.com>
Co-authored-by: Sarah Schneider <sarahs@github.com>
Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>
Co-authored-by: hubwriter <hubwriter@github.com>
Co-authored-by: Meg Bird <megbird@github.com>
2021-05-03 17:06:49 +00:00

3.7 KiB

title, intro, product, versions, redirect_from, topics
title intro product versions redirect_from topics
Forwarding ports in your codespace {% data reusables.codespaces.about-port-forwarding %} {% data reusables.gated-features.codespaces %}
free-pro-team
*
/github/developing-online-with-codespaces/forwarding-ports-in-your-codespace
Codespaces

About forwarded ports

Port forwarding gives you access to TCP ports running within your codespace. For example, if you're running a web application on port 4000, you can access the application from your browser to test and debug the application.

When an application running inside a codespace outputs a port to the console, {% data variables.product.prodname_codespaces %} detects the localhost URL pattern and automatically forwards the port. You can click on the URL in the terminal to open the port in a browser. For example, if an application outputs http://127.0.0.1:4000 or http://localhost:4000 to the console, the log would automatically convert the output to a clickable URL for port 4000.

Automatic port forwarding

You can also forward a port manually, label forwarded ports, share fowarded ports publicly, and add forwarded ports to the codespace configuration.

Forwarding a port

You can manually forward a port that wasn't forwarded automatically.

{% data reusables.codespaces.navigate-to-ports-tab %}

  1. Under the list of ports, click Add port. Add port button
  2. Type the port number or address, then press enter. Text box to type port button

Labeling a port

You can label a port to make the port more easily identifiable in a list.

{% data reusables.codespaces.navigate-to-ports-tab %}

  1. Hover over the port you want to label, then click the label icon. Label icon for port {% data reusables.codespaces.type-port-label %}

Sharing a port

If you want to share a forwarded port with others, you can make the port public. After you make a port public, anyone with the port's URL can view the running application without needing to authenticate.

{% data reusables.codespaces.navigate-to-ports-tab %}

  1. Right click the port you want to share, then click Make Public. Option to make port public in right-click menu
  2. To the right of the local address for the port, click the copy icon. Copy icon for port URL
  3. Send the copied URL to the person you want to share the port with.

Adding a port to the codespace configuration

You can add a forwarded port to the {% data variables.product.prodname_codespaces %} configuration for the repository, so the port will automatically be forwarded for all codespaces created from the repository. After you update the configuration, any previously created codespaces must be rebuilt for the change to apply. For more information, see "Configuring {% data variables.product.prodname_codespaces %} for your project."

You can manually configure fowarded ports in a .devcontainer.json file using the forwardPorts property, or you can use the "Ports" panel in your codespace.

{% data reusables.codespaces.navigate-to-ports-tab %}

  1. Right click the port you want to add to the codespace configuration, then click Set Label and Update devcontainer.json. Option to set label and add port to devcontainer.json in the right-click menu {% data reusables.codespaces.type-port-label %}