Updates dev container and adds doc for getting started with GitHub Codespaces (#23872)

.devcontainer/Dockerfile

@@ -1,16 +1,14 @@
-# [Choice] Ruby version (use -bullseye variants on local arm64/Apple Silicon): 3, 3.1, 3.0, 2, 2.7, 2.6, 3-bullseye, 3.1-bullseye, 3.0-bullseye, 2-bullseye, 2.7-bullseye, 2.6-bullseye, 3-buster, 3.1-buster, 3.0-buster, 2-buster, 2.7-buster, 2.6-buster
-ARG VARIANT=3.1-bullseye
-FROM mcr.microsoft.com/vscode/devcontainers/ruby:${VARIANT}
+# For details, see https://github.com/devcontainers/images/tree/main/src/ruby
+FROM mcr.microsoft.com/devcontainers/ruby:0-3.2-bullseye
 
 # Install Rails
 # RUN gem install rails webdrivers
 
 # Default value to allow debug server to serve content over GitHub Codespace's port forwarding service
 # The value is a comma-separated list of allowed domains
-ENV RAILS_DEVELOPMENT_HOSTS=".githubpreview.dev"
+ENV RAILS_DEVELOPMENT_HOSTS=".githubpreview.dev,.preview.app.github.dev,.app.github.dev"
 
-# [Choice] Node.js version: lts/*, 18, 16, 14
-ARG NODE_VERSION="lts/*"
+ARG NODE_VERSION="16"
 RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"
 
 # [Optional] Uncomment this section to install additional OS packages.
@@ -22,3 +20,5 @@ RUN gem install foreman
 
 # [Optional] Uncomment this line to install global node packages.
 RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g yarn" 2>&1
+
+COPY welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt

.devcontainer/devcontainer.json

@@ -1,30 +1,13 @@
+// For more details, see https://aka.ms/devcontainer.json.
 {
   "name": "Mastodon",
   "dockerComposeFile": "docker-compose.yml",
   "service": "app",
-  "workspaceFolder": "/mastodon",
-
-  // Configure tool-specific properties.
-  "customizations": {
-    // Configure properties specific to VS Code.
-    "vscode": {
-      // Set *default* container specific settings.json values on container create.
-      "settings": {},
-
-      // Add the IDs of extensions you want installed when the container is created.
-      "extensions": [
-        "EditorConfig.EditorConfig",
-        "dbaeumer.vscode-eslint",
-        "rebornix.Ruby",
-        "webben.browserslist"
-      ]
-    }
-  },
+  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
 
+  // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {
-    "ghcr.io/devcontainers/features/sshd:1": {
-      "version": "latest"
-    }
+    "ghcr.io/devcontainers/features/sshd:1": {}
   },
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
@@ -33,7 +16,16 @@
 
   // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": ".devcontainer/post-create.sh",
+  "waitFor": "postCreateCommand",
 
-  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "vscode"
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      // Set *default* container specific settings.json values on container create.
+      "settings": {},
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": ["EditorConfig.EditorConfig", "webben.browserslist"]
+    }
+  }
 }

.devcontainer/docker-compose.yml

@@ -5,15 +5,8 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-      args:
-        # Update 'VARIANT' to pick a version of Ruby: 3, 3.1, 3.0, 2, 2.7, 2.6
-        # Append -bullseye or -buster to pin to an OS version.
-        # Use -bullseye variants on local arm64/Apple Silicon.
-        VARIANT: '3.0-bullseye'
-        # Optional Node.js version to install
-        NODE_VERSION: '16'
     volumes:
-      - ..:/mastodon:cached
+      - ../..:/workspaces:cached
     environment:
       RAILS_ENV: development
       NODE_ENV: development
@@ -33,7 +26,6 @@ services:
     networks:
       - external_network
       - internal_network
-    user: vscode
 
   db:
     image: postgres:14-alpine

.devcontainer/welcome-message.txt

@@ -0,0 +1,8 @@
+👋 Welcome to "Mastodon" in GitHub Codespaces!
+
+🛠️  Your environment is fully setup with all the required software.
+
+🔍 To explore VS Code to its fullest, search using the Command Palette (Cmd/Ctrl + Shift + P or F1).
+
+📝 Edit away, run your app as usual, and we'll automatically make it available for you to access.
+

README.md

@@ -85,6 +85,16 @@ A **Vagrant** configuration is included for development purposes. To use it, com
 - Run `vagrant ssh -c "cd /vagrant && foreman start"`
 - Open `http://mastodon.local` in your browser
 
+### Getting Started with GitHub Codespaces
+
+To get started, create a codespace for this repository by clicking this 👇
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=52281283)
+
+A codespace will open in a web-based version of Visual Studio Code. The [dev container](.devcontainer/devcontainer.json) is fully configured with software needed for this project.
+
+**Note**: Dev containers is an open spec which is supported by [GitHub Codespaces](https://github.com/codespaces) and [other tools](https://containers.dev/supporting).
+
 ## Contributing
 
 Mastodon is **free, open-source software** licensed under **AGPLv3**.