First set of updates
This commit is contained in:
		
							
								
								
									
										23
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										23
									
								
								README.md
									
									
									
									
									
								
							@@ -1,19 +1,19 @@
 | 
				
			|||||||
# Try Out Development Containers: Node.js
 | 
					# 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. 
 | 
					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.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
> **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
 | 
					## Setting up the development container
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### GitHub Codespaces
 | 
					### 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. **Insert instructions on creating a repo from the template** 
 | 
				
			||||||
1. Use the  Code drop-down menu, and select Open with Codespaces.
 | 
					1. Use the  Code drop-down menu, and select Open with Codespaces.
 | 
				
			||||||
  - Insert screenshot of Code button
 | 
					  - Insert screenshot of Code button
 | 
				
			||||||
@@ -21,13 +21,13 @@ Follow these steps to open this sample in a codespace:
 | 
				
			|||||||
### VS Code Remote - Containers
 | 
					### VS Code Remote - Containers
 | 
				
			||||||
Follow these steps to open this sample in a container using the VS Code Remote - Containers extension:
 | 
					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:
 | 
					2. To use this repository, you can either open the repository in an isolated Docker volume:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    - Press <kbd>F1</kbd> and select the **Remote-Containers: Try a Sample...** command.
 | 
					    - Press <kbd>F1</kbd> and select the **Remote-Containers: Try a Sample...** command.
 | 
				
			||||||
    - Choose the "Node" sample, wait for the container to start and try things out!
 | 
					    - 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.
 | 
					        > **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:
 | 
					    Or open a locally cloned copy of the code:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -45,7 +45,8 @@ Some things to try:
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
1. **Edit:**
 | 
					1. **Edit:**
 | 
				
			||||||
   - Open `server.js`
 | 
					   - 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 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>\`</kbd> and type `uname` and other Linux commands from the terminal window.
 | 
					2. **Terminal:** Press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>\`</kbd> and type `uname` and other Linux commands from the terminal window.
 | 
				
			||||||
3. **Build, Run, and Debug:**
 | 
					3. **Build, Run, and Debug:**
 | 
				
			||||||
   - Open `server.js`
 | 
					   - Open `server.js`
 | 
				
			||||||
@@ -54,9 +55,9 @@ Some things to try:
 | 
				
			|||||||
   - Once the breakpoint is hit, try hovering over variables, examining locals, and more.
 | 
					   - 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. 
 | 
					   - 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.
 | 
					   - 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_
 | 
					4. **Rebuild or update your container**
 | 
				
			||||||
  - Note: This only applies to containers with the VS Code Remote - Containers ext.
 | 
					   - 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:** You can also 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.* 
 | 
				
			||||||
   - Open the `.devcontainer/devcontainer.json` file.
 | 
					   - Open the `.devcontainer/devcontainer.json` file.
 | 
				
			||||||
   - Uncomment the `forwardedPorts` attribute and adjust the port number as needed.
 | 
					   - Uncomment the `forwardedPorts` attribute and adjust the port number as needed.
 | 
				
			||||||
   - Press <kbd>F1</kbd> and select the **Remote-Containers: Rebuild Container** command so the modifications are picked up.
 | 
					   - Press <kbd>F1</kbd> and select the **Remote-Containers: Rebuild Container** command so the modifications are picked up.
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user