Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [3000],

// Use 'portsAttributes' to set default properties for specific forwarded ports.
// You can use a port number (i.e. 3000), range of numbers, or a regex to match the running process.
// Use 'portsAttributes' to set default properties for specific forwarded ports. More info: https://code.visualstudio.com/docs/remote/devcontainerjson-reference.
"portsAttributes": {
".+/server.js": {
"label": "Hello Remote World"
"3000": {
"label": "Hello Remote World",
"onAutoForward": "notify"
}
},

Expand Down
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ Some things to try:
- Clicking on `Open in Browser` in the notification telling you: `Your service running on port 3000 is available`.
- Clicking the globe icon in the 'Ports' view. The 'Ports' view gives you an organized table of your forwarded ports, and you can access it with the command **Ports: Focus on Ports View**.
- Notice port 3000 in the 'Ports' view is labeled "Hello Remote World." In `devcontainer.json`, you can set `"portsAttributes"`, such as a label for your forwarded ports and the action to be taken when the port is autoforwarded.
- If we didn't know the port was 3000, we could've used a regex instead of "3000" in the `"portsAttributes"`, such as ".+/server.js".

> **Note:** In Remote - Containers, you can access your app at `http://localhost:3000` in a local browser. But in a browser-based Codespace, you must click the link from the notification or the `Ports` view so that the service handles port forwarding in the browser and generates the correct URL.

Expand All @@ -64,7 +65,7 @@ Some things to try:
**Open browser automatically:** As an example change, let's update the `portsAttributes` in the `.devcontainer/devcontainer.json` file to open a browser when our port is automatically forwarded.

- Open the `.devcontainer/devcontainer.json` file.
- Modify your `portsAttributes` to include a new attribute (you can add it underneath the `label` attribute): `"onAutoForward": "openBrowser"`.
- Modify the `"onAutoForward"` attribute in your `portsAttributes` from `"notify"` to `"openBrowser"`.
- Press <kbd>F1</kbd> and select the **Remote-Containers: Rebuild Container** or **Codespaces: Rebuild Container** command so the modifications are picked up.

## Contributing
Expand Down