Update template, add feature and image metadata info (#27)
This commit is contained in:
		
							
								
								
									
										24
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										24
									
								
								README.md
									
									
									
									
									
								
							@@ -2,7 +2,7 @@
 | 
			
		||||
 | 
			
		||||
[](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode-remote-try-php)
 | 
			
		||||
 | 
			
		||||
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 Dev Containers](https://aka.ms/vscode-remote/containers)**.
 | 
			
		||||
A **development container** is a running 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 Dev 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.
 | 
			
		||||
 | 
			
		||||
@@ -12,8 +12,9 @@ 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.
 | 
			
		||||
1. Select **+ New codespace** at the bottom on the pane.
 | 
			
		||||
1. Click the **Code** drop-down menu.
 | 
			
		||||
2. Click on the **Codespaces** tab.
 | 
			
		||||
3. Click **Create codespace on main**.
 | 
			
		||||
 | 
			
		||||
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).
 | 
			
		||||
 | 
			
		||||
@@ -41,20 +42,23 @@ Follow these steps to open this sample in a container using the VS Code Dev Cont
 | 
			
		||||
 | 
			
		||||
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": "vscode"` in `.devcontainer/devcontainer.json` if you'd prefer to run as root.
 | 
			
		||||
 | 
			
		||||
Some things to try:
 | 
			
		||||
 | 
			
		||||
1. **Edit:**
 | 
			
		||||
   - Open `index.php`
 | 
			
		||||
   - Try adding some code and check out the language features.
 | 
			
		||||
   - Notice that PHP debugging and IntelliSense are already included in the container since the `.devcontainer/devcontainer.json` lists `"felixfbecker.php-debug"`, `"bmewburn.vscode-intelephense-client"`, and `"mrmlnc.vscode-apache"` as extensions to install automatically when the container is created.
 | 
			
		||||
   - Make a spelling mistake and notice it is detected. The [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) extension was automatically installed because it is referenced in `.devcontainer/devcontainer.json`.
 | 
			
		||||
   - Also notice that utilities like `Xdebug` and the [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client) extension are installed. Tools are installed in the `mcr.microsoft.com/devcontainers/php` image and Dev Container settings and metadata are automatically picked up from [image labels](https://containers.dev/implementors/reference/#labels).
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
1. **Terminal:** Press <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>\`</kbd> and type `uname` and other Linux commands from the terminal window.
 | 
			
		||||
 | 
			
		||||
1. **Run and Debug:**
 | 
			
		||||
   - Open `index.php`
 | 
			
		||||
   - Add a breakpoint (e.g. on line 4).
 | 
			
		||||
   - Press <kbd>F5</kbd> to launch the app in the container.
 | 
			
		||||
   - Once the breakpoint is hit, try hovering over variables, examining locals, and more.
 | 
			
		||||
 | 
			
		||||
1. **Running a server:**
 | 
			
		||||
   - From the terminal, run `php -S 0.0.0.0:8000`
 | 
			
		||||
   - Click "Open in Browser" in the notification that appears to access the web app on this new port.
 | 
			
		||||
@@ -62,6 +66,7 @@ Some things to try:
 | 
			
		||||
      - Notice port 8000 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.
 | 
			
		||||
   - Look back at the terminal, and you should see the output from your site navigations.
 | 
			
		||||
   - Edit the text on line 21 in `index.php` and refresh the page to see the changes immediately take effect.
 | 
			
		||||
 | 
			
		||||
1. **Attach debugger to the server:**
 | 
			
		||||
   - Follow the previous steps to start up a PHP server and open a browser on port `8000`
 | 
			
		||||
   - Press <kbd>F1</kbd> and select the **View: Show Debug** command.
 | 
			
		||||
@@ -71,6 +76,13 @@ Some things to try:
 | 
			
		||||
   - Reload your browser window.
 | 
			
		||||
   - Once the breakpoint is hit, try hovering over variables, examining locals, and more.
 | 
			
		||||
 | 
			
		||||
5. **Install Node.js using a Dev Container Feature:**
 | 
			
		||||
   - Press <kbd>F1</kbd> and select the **Dev Containers: Configure Container Features...** or **Codespaces: Configure Container Features...** command.
 | 
			
		||||
   - Type "node" in the text box at the top.
 | 
			
		||||
   - Check the check box next to "Node.js (via nvm) and yarn" (published by devcontainers) 
 | 
			
		||||
   - Click OK
 | 
			
		||||
   - Press <kbd>F1</kbd> and select the **Dev Containers: Rebuild Container** or **Codespaces: Rebuild Container** command so the modifications are picked up.
 | 
			
		||||
 | 
			
		||||
## Contributing
 | 
			
		||||
 | 
			
		||||
This project welcomes contributions and suggestions. Most contributions require you to agree to a
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user