diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile deleted file mode 100644 index 0c56d4e..0000000 --- a/.devcontainer/Dockerfile +++ /dev/null @@ -1,15 +0,0 @@ -# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.195.0/containers/php/.devcontainer/base.Dockerfile -# [Choice] PHP version (use -bullseye variants on local arm64/Apple Silicon): 8, 8.0, 7, 7.4, 7.3, 8-bullseye, 8.0-bullseye, 7-bullseye, 7.4-bullseye, 7.3-bullseye, 8-buster, 8.0-buster, 7-buster, 7.4-buster, 7.3-buster -ARG VARIANT=7-bullseye -FROM mcr.microsoft.com/devcontainers/php:0-${VARIANT} - -# [Choice] Node.js version: none, lts/*, 16, 14, 12, 10 -ARG NODE_VERSION="none" -RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi - -# [Optional] Uncomment this section to install additional OS packages. -# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ -# && apt-get -y install --no-install-recommends - -# [Optional] Uncomment this line to install global node packages. -# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g " 2>&1 diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 0e445e2..9099bbf 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,38 +1,26 @@ -// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: -// https://github.com/microsoft/vscode-dev-containers/tree/v0.195.0/containers/php +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/php { "name": "PHP", - "build": { - "dockerfile": "Dockerfile", - "args": { - // Update VARIANT to pick a PHP version: 8, 8.0, 7, 7.4, 7.3 - // Append -bullseye or -buster to pin to an OS version. - // Use -bullseye variants on local on arm64/Apple Silicon. - "VARIANT": "7-bullseye", - "NODE_VERSION": "lts/*" - } - }, - + // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile + "image": "mcr.microsoft.com/devcontainers/php:0-8.2", + + // Features to add to the dev container. More info: https://containers.dev/features. + // "features": {}, + // Configure tool-specific properties. "customizations": { // Configure properties specific to VS Code. "vscode": { - // Set *default* container specific settings.json values on container create. - "settings": { - "php.validate.executablePath": "/usr/local/bin/php" - }, - - // Add the IDs of extensions you want installed when the container is created. + "settings": {}, "extensions": [ - "felixfbecker.php-debug", - "bmewburn.vscode-intelephense-client", - "mrmlnc.vscode-apache" + "streetsidesoftware.code-spell-checker" ] } }, // Use 'forwardPorts' to make a list of ports inside the container available locally. - // "forwardPorts": [8080], + // "forwardPorts": [8000], // Use 'portsAttributes' to set default properties for specific forwarded ports. More info: https://code.visualstudio.com/docs/remote/devcontainerjson-reference. "portsAttributes": { @@ -40,16 +28,11 @@ "label": "Hello Remote World", "onAutoForward": "notify" } - }, - - // Use 'otherPortsAttributes' to configure any ports that aren't configured using 'portsAttributes'. - // "otherPortsAttributes": { - // "onAutoForward": "silent" - // }, + } // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "sudo chmod a+x \"$(pwd)\" && sudo rm -rf /var/www/html && sudo ln -s \"$(pwd)\" /var/www/html" - // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. - "remoteUser": "vscode" + // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. + // "remoteUser": "root" } diff --git a/README.md b/README.md index 8065952..6eaa82e 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](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 ctrl+shift+\` 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 F5 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 F1 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 F1 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 F1 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