From 2053a2d5051163e791312da6089926ff002a4008 Mon Sep 17 00:00:00 2001 From: Allison Weins <3174849+2percentsilk@users.noreply.github.com> Date: Fri, 4 Dec 2020 15:00:43 -0800 Subject: [PATCH 1/6] Update README.md Initial draft of README updates --- README.md | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3f2489c..b010ad3 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,25 @@ -# Try Out Development Containers: Node.js (test change) +# Try Out Development Containers: Node.js -This is a sample project that lets you try out the **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)** extension in a few easy steps. +A **development container** is a running [Docker](https://www.docker.com) container with a well-defined tool/runtime stack and its prerequisites. You can try out development containers with GtiHub Codespaces or **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)**. + +[GitHub Codespaces](https://github.com/features/codespaces) both use this same concept to quickly create customized, cloud-based development environments accessible [from VS Code](https://aka.ms/vso-dl) or the web. _Request access to beta if user does not already have it_ + +The [VS Code Remote - Containers](https://aka.ms/vscode-remote/download/containers) extension allows you to clone a repository or open any folder mounted into (or already inside) a dev container and take advantage of VS Code's full development feature set. + +This is a sample project that lets you try out either option in a few easy steps. > **Note:** If you're following the quick start, you can jump to the [Things to try](#things-to-try) section. ## Setting up the development container -Follow these steps to open this sample in a container: +### GitHub Codespaces +Follow these steps to open this sample in a codespace: +1. **Insert instructions on creating a repo from the template** +1. Use the Code drop-down menu, and select Open with Codespaces. + - Insert screenshot of Code button + +### VS Code Remote - Containers +Follow these steps to open this sample in a container using the VS Code Remote - Containers extension: 1. If this is your first time using a development container, please follow the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started). @@ -21,9 +34,10 @@ Follow these steps to open this sample in a container: - Clone this repository to your local filesystem. - Press F1 and select the **Remote-Containers: Open Folder in Container...** command. - Select the cloned copy of this folder, wait for the container to start, and try things out! + ## Things to try -Once you have this sample opened in a container, you'll be able to work with it like you would locally. +Once you have this sample opened, you'll be able to work with it like you would locally. > **Note:** This container runs as a non-root user with sudo access by default. Comment out `"remoteUser": "node"` in `.devcontainer/devcontainer.json` if you'd prefer to run as root. @@ -31,7 +45,7 @@ Some things to try: 1. **Edit:** - Open `server.js` - - Try adding some code and check out the language features. Notice that `eslint` and the `vscode-eslint` extension are already installed in the container. + - Try adding some code and check out the language features. Notice that `eslint` and the `vscode-eslint` extension are already installed in the container _insert reasoning_. 2. **Terminal:** Press Ctrl+Shift+\` and type `uname` and other Linux commands from the terminal window. 3. **Build, Run, and Debug:** - Open `server.js` @@ -40,7 +54,9 @@ Some things to try: - Once the breakpoint is hit, try hovering over variables, examining locals, and more. - Continue and from the notification that is shown open a browser. Note you can connect to the server in the container. - The status line shows '1 Port Available'. Clicking the status bar entry shows the 'Ports' view that lists the currently available ports. -4. **Forward a port statically:** You can also forward a port statically in the `.devcontainer/devcontainer.json` file. +4. Rebuild or update your container _Brigit_ + - Note: This only applies to containers with the VS Code Remote - Containers ext. +**Forward a port statically:** You can also forward a port statically in the `.devcontainer/devcontainer.json` file. - Open the `.devcontainer/devcontainer.json` file. - Uncomment the `forwardedPorts` attribute and adjust the port number as needed. - Press F1 and select the **Remote-Containers: Rebuild Container** command so the modifications are picked up. From 640eda0152afd1cc8c54ee1f0d4cec54325b62be Mon Sep 17 00:00:00 2001 From: Brigit Murtaugh Date: Tue, 8 Dec 2020 12:05:24 -0800 Subject: [PATCH 2/6] First set of updates --- README.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index b010ad3..247d7c2 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,19 @@ # Try Out Development Containers: Node.js -A **development container** is a running [Docker](https://www.docker.com) container with a well-defined tool/runtime stack and its prerequisites. You can try out development containers with GtiHub Codespaces or **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)**. +A **development container** is a running [Docker](https://www.docker.com) container with a well-defined tool/runtime stack and its prerequisites. You can try out development containers with GitHub Codespaces or **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)**. -[GitHub Codespaces](https://github.com/features/codespaces) both use this same concept to quickly create customized, cloud-based development environments accessible [from VS Code](https://aka.ms/vso-dl) or the web. _Request access to beta if user does not already have it_ +[GitHub Codespaces](https://github.com/features/codespaces) both use this same concept to quickly create customized, cloud-based development environments accessible [from VS Code](https://aka.ms/vso-dl) or the web. _[Request access](https://github.com/features/codespaces/signup) to the Codespaces beta if you have not already._ The [VS Code Remote - Containers](https://aka.ms/vscode-remote/download/containers) extension allows you to clone a repository or open any folder mounted into (or already inside) a dev container and take advantage of VS Code's full development feature set. This is a sample project that lets you try out either option in a few easy steps. -> **Note:** If you're following the quick start, you can jump to the [Things to try](#things-to-try) section. +> **Note:** If you already have a Codespace or dev container, you can jump to the [Things to try](#things-to-try) section. ## Setting up the development container ### GitHub Codespaces -Follow these steps to open this sample in a codespace: +Follow these steps to open this sample in a Codespace: 1. **Insert instructions on creating a repo from the template** 1. Use the Code drop-down menu, and select Open with Codespaces. - Insert screenshot of Code button @@ -21,13 +21,13 @@ Follow these steps to open this sample in a codespace: ### VS Code Remote - Containers Follow these steps to open this sample in a container using the VS Code Remote - Containers extension: -1. If this is your first time using a development container, please follow the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started). +1. If this is your first time using a development container, please ensure your system meets the pre-reqs (i.e. have Docker installed) in the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started). 2. To use this repository, you can either open the repository in an isolated Docker volume: - Press F1 and select the **Remote-Containers: Try a Sample...** command. - - Choose the "Node" sample, wait for the container to start and try things out! - > **Note:** Under the hood, this will use **Remote-Containers: Open Repository in Container...** command to clone the source code in a Docker volume instead of the local filesystem. + - Choose the "Node" sample, wait for the container to start, and try things out! + > **Note:** Under the hood, this will use the **Remote-Containers: Clone Repository in Container Volume...** command to clone the source code in a Docker volume instead of the local filesystem. [Volumes](https://docs.docker.com/storage/volumes/) are the preferred mechanism for persisting data generated by and used by Docker containers. Or open a locally cloned copy of the code: @@ -45,7 +45,8 @@ Some things to try: 1. **Edit:** - Open `server.js` - - Try adding some code and check out the language features. Notice that `eslint` and the `vscode-eslint` extension are already installed in the container _insert reasoning_. + - Try adding some code and check out the language features. + - Notice that `eslint` and the `vscode-eslint` extension are already installed in the container since the `.devcontainer/devcontainer.json` lists `"dbaeumer.vscode-eslint"` as an extension to install automatically when the container is created. 2. **Terminal:** Press Ctrl+Shift+\` and type `uname` and other Linux commands from the terminal window. 3. **Build, Run, and Debug:** - Open `server.js` @@ -54,9 +55,9 @@ Some things to try: - Once the breakpoint is hit, try hovering over variables, examining locals, and more. - Continue and from the notification that is shown open a browser. Note you can connect to the server in the container. - The status line shows '1 Port Available'. Clicking the status bar entry shows the 'Ports' view that lists the currently available ports. -4. Rebuild or update your container _Brigit_ - - Note: This only applies to containers with the VS Code Remote - Containers ext. -**Forward a port statically:** You can also forward a port statically in the `.devcontainer/devcontainer.json` file. +4. **Rebuild or update your container** + - You may want to make changes to your container, such as installing a different version of a software or forwarding a new port. You'll rebuild your container for your changes to take effect. *Note: Currently, only containers with the VS Code Remote - Containers extension can be rebuilt.* +**Forward a port statically:** As an example change, let's forward a port statically in the `.devcontainer/devcontainer.json` file. *Note: Remote-Containers and Codespaces also take care of dynamic port forwarding, but there may be instances in which we want to statically declare a forwarded port.* - Open the `.devcontainer/devcontainer.json` file. - Uncomment the `forwardedPorts` attribute and adjust the port number as needed. - Press F1 and select the **Remote-Containers: Rebuild Container** command so the modifications are picked up. From da8ede66745bc1907df7bac374a07700daec7e92 Mon Sep 17 00:00:00 2001 From: Brigit Murtaugh Date: Tue, 8 Dec 2020 12:15:58 -0800 Subject: [PATCH 3/6] Update formatting --- README.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 247d7c2..64dc35a 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ A **development container** is a running [Docker](https://www.docker.com) contai The [VS Code Remote - Containers](https://aka.ms/vscode-remote/download/containers) extension allows you to clone a repository or open any folder mounted into (or already inside) a dev container and take advantage of VS Code's full development feature set. -This is a sample project that lets you try out either option in a few easy steps. +This is a sample project that lets you try out either option in a few easy steps. We have a variety of other [vscode-remote-try-*](https://github.com/search?q=org%3Amicrosoft+vscode-remote-try-&type=Repositories) sample projects, too. > **Note:** If you already have a Codespace or dev container, you can jump to the [Things to try](#things-to-try) section. @@ -27,7 +27,7 @@ Follow these steps to open this sample in a container using the VS Code Remote - - Press F1 and select the **Remote-Containers: Try a Sample...** command. - Choose the "Node" sample, wait for the container to start, and try things out! - > **Note:** Under the hood, this will use the **Remote-Containers: Clone Repository in Container Volume...** command to clone the source code in a Docker volume instead of the local filesystem. [Volumes](https://docs.docker.com/storage/volumes/) are the preferred mechanism for persisting data generated by and used by Docker containers. + > **Note:** Under the hood, this will use the **Remote-Containers: Clone Repository in Container Volume...** command to clone the source code in a Docker volume instead of the local filesystem. [Volumes](https://docs.docker.com/storage/volumes/) are the preferred mechanism for persisting container data. Or open a locally cloned copy of the code: @@ -55,9 +55,13 @@ Some things to try: - Once the breakpoint is hit, try hovering over variables, examining locals, and more. - Continue and from the notification that is shown open a browser. Note you can connect to the server in the container. - The status line shows '1 Port Available'. Clicking the status bar entry shows the 'Ports' view that lists the currently available ports. -4. **Rebuild or update your container** - - You may want to make changes to your container, such as installing a different version of a software or forwarding a new port. You'll rebuild your container for your changes to take effect. *Note: Currently, only containers with the VS Code Remote - Containers extension can be rebuilt.* -**Forward a port statically:** As an example change, let's forward a port statically in the `.devcontainer/devcontainer.json` file. *Note: Remote-Containers and Codespaces also take care of dynamic port forwarding, but there may be instances in which we want to statically declare a forwarded port.* +4. **Rebuild or update your container** (*Currently, only containers with the VS Code Remote - Containers extension can be rebuilt.*) + - You may want to make changes to your container, such as installing a different version of a software or forwarding a new port. You'll rebuild your container for your changes to take effect. + +- **Forward a port statically:** As an example change, let's forward a port statically in the `.devcontainer/devcontainer.json` file. + + > **Note:** Remote-Containers and Codespaces also take care of dynamic port forwarding, but there may be instances in which we want to statically declare a forwarded port. + - Open the `.devcontainer/devcontainer.json` file. - Uncomment the `forwardedPorts` attribute and adjust the port number as needed. - Press F1 and select the **Remote-Containers: Rebuild Container** command so the modifications are picked up. From 72f7b90c058c26a25ac0ed34484e2dd3ead3d22c Mon Sep 17 00:00:00 2001 From: Allison Weins <3174849+2percentsilk@users.noreply.github.com> Date: Fri, 8 Jan 2021 01:11:38 +0000 Subject: [PATCH 4/6] Readme updates for codespaces --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 64dc35a..4985266 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ A **development container** is a running [Docker](https://www.docker.com) container with a well-defined tool/runtime stack and its prerequisites. You can try out development containers with GitHub Codespaces or **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)**. -[GitHub Codespaces](https://github.com/features/codespaces) both use this same concept to quickly create customized, cloud-based development environments accessible [from VS Code](https://aka.ms/vso-dl) or the web. _[Request access](https://github.com/features/codespaces/signup) to the Codespaces beta if you have not already._ +[GitHub Codespaces](https://github.com/features/codespaces) allows you to quickly create customized, cloud-based development environments accessible [from VS Code](https://aka.ms/vso-dl) or the web. +> **Note:** While GitHub Codespaces is in limited public beta, please _[request access](https://github.com/features/codespaces/signup) if you have not already._ The [VS Code Remote - Containers](https://aka.ms/vscode-remote/download/containers) extension allows you to clone a repository or open any folder mounted into (or already inside) a dev container and take advantage of VS Code's full development feature set. @@ -14,9 +15,10 @@ This is a sample project that lets you try out either option in a few easy steps ### GitHub Codespaces Follow these steps to open this sample in a Codespace: -1. **Insert instructions on creating a repo from the template** -1. Use the Code drop-down menu, and select Open with Codespaces. - - Insert screenshot of Code button +1. Click the Code drop-down menu and select the `Open with Codespaces` option. + ![image](https://user-images.githubusercontent.com/3174849/103961250-f2cc5e00-5108-11eb-8a15-04a1a2de7491.png) +1. Select `+ New codespace` at the bottom on the pane. This will create a fork of this repository under your account and your codespace will open in a new tab. + ![image](https://user-images.githubusercontent.com/3174849/103962008-ada92b80-510a-11eb-894d-6e804403acb3.png) ### VS Code Remote - Containers Follow these steps to open this sample in a container using the VS Code Remote - Containers extension: @@ -56,9 +58,10 @@ Some things to try: - Continue and from the notification that is shown open a browser. Note you can connect to the server in the container. - The status line shows '1 Port Available'. Clicking the status bar entry shows the 'Ports' view that lists the currently available ports. 4. **Rebuild or update your container** (*Currently, only containers with the VS Code Remote - Containers extension can be rebuilt.*) - - You may want to make changes to your container, such as installing a different version of a software or forwarding a new port. You'll rebuild your container for your changes to take effect. + + You may want to make changes to your container, such as installing a different version of a software or forwarding a new port. You'll rebuild your container for your changes to take effect. -- **Forward a port statically:** As an example change, let's forward a port statically in the `.devcontainer/devcontainer.json` file. + **Forward a port statically:** As an example change, let's forward a port statically in the `.devcontainer/devcontainer.json` file. > **Note:** Remote-Containers and Codespaces also take care of dynamic port forwarding, but there may be instances in which we want to statically declare a forwarded port. From 2e607741736912b05fb366230d21f781c551e611 Mon Sep 17 00:00:00 2001 From: Allison Weins <3174849+2percentsilk@users.noreply.github.com> Date: Tue, 12 Jan 2021 14:10:36 -0800 Subject: [PATCH 5/6] Update README.md Edited to address @chuxel's feedback --- README.md | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 4985266..301c488 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,6 @@ # Try Out Development Containers: Node.js -A **development container** is a running [Docker](https://www.docker.com) container with a well-defined tool/runtime stack and its prerequisites. You can try out development containers with GitHub Codespaces or **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)**. - -[GitHub Codespaces](https://github.com/features/codespaces) allows you to quickly create customized, cloud-based development environments accessible [from VS Code](https://aka.ms/vso-dl) or the web. -> **Note:** While GitHub Codespaces is in limited public beta, please _[request access](https://github.com/features/codespaces/signup) if you have not already._ - -The [VS Code Remote - Containers](https://aka.ms/vscode-remote/download/containers) extension allows you to clone a repository or open any folder mounted into (or already inside) a dev container and take advantage of VS Code's full development feature set. +A **development container** is a running [Docker](https://www.docker.com) container with a well-defined tool/runtime stack and its prerequisites. You can try out development containers with [GitHub Codespaces](https://github.com/features/codespaces) or **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)**. This is a sample project that lets you try out either option in a few easy steps. We have a variety of other [vscode-remote-try-*](https://github.com/search?q=org%3Amicrosoft+vscode-remote-try-&type=Repositories) sample projects, too. @@ -15,10 +10,10 @@ This is a sample project that lets you try out either option in a few easy steps ### GitHub Codespaces Follow these steps to open this sample in a Codespace: -1. Click the Code drop-down menu and select the `Open with Codespaces` option. - ![image](https://user-images.githubusercontent.com/3174849/103961250-f2cc5e00-5108-11eb-8a15-04a1a2de7491.png) -1. Select `+ New codespace` at the bottom on the pane. This will create a fork of this repository under your account and your codespace will open in a new tab. - ![image](https://user-images.githubusercontent.com/3174849/103962008-ada92b80-510a-11eb-894d-6e804403acb3.png) +1. Click the Code drop-down menu and select the **Open with Codespaces** option. +1. Select **+ New codespace** at the bottom on the pane. If you don't own the repo, this will create a fork of this repository under your account. + +For more info, check out the [GitHub documentation](https://docs.github.com/en/free-pro-team@latest/github/developing-online-with-codespaces/creating-a-codespace#creating-a-codespace). ### VS Code Remote - Containers Follow these steps to open this sample in a container using the VS Code Remote - Containers extension: From 26501785520eadb8e97996c2348c1b2d35a3007b Mon Sep 17 00:00:00 2001 From: Allison Weins <3174849+2percentsilk@users.noreply.github.com> Date: Tue, 12 Jan 2021 16:20:33 -0800 Subject: [PATCH 6/6] Update README.md Bolded codespaces link and expanded VS to Visual Studio --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 301c488..aabb182 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Try Out Development Containers: Node.js -A **development container** is a running [Docker](https://www.docker.com) container with a well-defined tool/runtime stack and its prerequisites. You can try out development containers with [GitHub Codespaces](https://github.com/features/codespaces) or **[VS Code Remote - Containers](https://aka.ms/vscode-remote/containers)**. +A **development container** is a running [Docker](https://www.docker.com) container with a well-defined tool/runtime stack and its prerequisites. You can try out development containers with **[GitHub Codespaces](https://github.com/features/codespaces)** or **[Visual Studio Code Remote - Containers](https://aka.ms/vscode-remote/containers)**. This is a sample project that lets you try out either option in a few easy steps. We have a variety of other [vscode-remote-try-*](https://github.com/search?q=org%3Amicrosoft+vscode-remote-try-&type=Repositories) sample projects, too.