Skip to content

Commit 3ffe0bd

Browse files
committed
Add instructions for using our DevContainer
1 parent 80a2087 commit 3ffe0bd

1 file changed

Lines changed: 94 additions & 0 deletions

File tree

.devcontainer/README.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,95 @@
11
https://code.visualstudio.com/docs/devcontainers/tutorial
2+
3+
4+
# Tutorial: Using Dev Containers with Visual Studio Code
5+
6+
## Introduction
7+
8+
Welcome to the Dev Containers tutorial! In this step-by-step guide, we'll explore running Visual Studio Code within a Docker container using the Dev Containers extension. This tutorial is beginner-friendly, requiring no prior knowledge of Docker.
9+
10+
## Prerequisites
11+
12+
Before we dive in, make sure you have the following:
13+
14+
- [Visual Studio Code](https://code.visualstudio.com/) installed.
15+
- [Docker](https://www.docker.com/) installed, either Docker Desktop or an alternative Docker option.
16+
17+
## Getting Started
18+
19+
### 1. Install Docker
20+
21+
Download and install Docker Desktop or choose an alternative Docker option. Once installed, start Docker. You can confirm it's running by looking for the Docker whale icon in the activity tray.
22+
23+
### 2. Check Docker
24+
25+
Open a new terminal and run the following command to verify Docker installation:
26+
27+
```bash
28+
docker --version
29+
# Example output: Docker version 18.09.2, build 6247962
30+
```
31+
32+
### 3. Install Dev Containers Extension
33+
34+
In Visual Studio Code, install the Dev Containers extension. You'll know it's installed when you see a new Remote Status bar item at the far left.
35+
36+
## Setting up a Sample Node.js Project
37+
38+
### 4. Get the Sample
39+
40+
1. Open the Command Palette (F1).
41+
2. Run `Dev Containers: Try a Dev Container Sample...`.
42+
3. Select the Node sample from the list.
43+
44+
### 5. Wait for Container
45+
46+
After selecting the sample, VS Code will create a Docker container and clone the Node.js project into it. This might take some time, and a progress notification will keep you updated.
47+
48+
### 6. Check Container
49+
50+
Verify the container connection by checking the status in the bottom left of the Status bar. Your remote context should change accordingly.
51+
52+
### 7. Check Environment
53+
54+
Open a new terminal (Ctrl+Shift+`) and enter the following to check Node.js and npm versions:
55+
56+
```bash
57+
node --version; npm --version
58+
# Example output: Node.js version check
59+
```
60+
61+
## Running the Application
62+
63+
### 8. Run Application
64+
65+
1. Press F5 to run the application inside the container.
66+
2. Visit http://localhost:3000 to see the Node.js server in action.
67+
68+
### 9. End Container Connection
69+
70+
To return to running VS Code locally, go to File > Close Remote Connection.
71+
72+
## Understanding Dev Containers Extension
73+
74+
### 10. How it Works
75+
76+
The Dev Containers extension uses `.devcontainer` files, mainly `devcontainer.json`, to configure and set up containers. These files specify the container image, settings, and customizations.
77+
78+
### 11. Architecture
79+
80+
The `devcontainer.json` file includes options like `image`, `dockerfile`, `features`, and more. Let's explore the structure and key options.
81+
82+
### 12. Options Summary
83+
84+
Key options in `devcontainer.json` include `image`, `dockerfile`, `features`, `customizations`, `settings`, `extensions`, `forwardPorts`, `portsAttributes`, `postCreateCommand`, and `remoteUser`. We'll briefly discuss their roles.
85+
86+
## Conclusion
87+
88+
Congratulations! You've successfully completed this tutorial. Feel free to explore more with dev containers, such as opening existing folders or GitHub repositories in containers.
89+
90+
## Troubleshooting
91+
92+
If you encounter any issues:
93+
94+
- **Verify Docker Context:**
95+
- Check your Docker context, especially if not using a fresh Docker install. Fresh installs usually have a 'default' context.

0 commit comments

Comments
 (0)