Merge pull request #4482 from jimmyli97/improve-codespaces-debugging

Resolves #3829 Improve codespaces debugging

.devcontainer/Dockerfile

@@ -2,7 +2,8 @@
 # it will be more efficient to change the image.
 # See https://github.com/devcontainers/images/blob/main/src/ruby/history/
 FROM mcr.microsoft.com/devcontainers/ruby:dev-3.2-buster
-RUN apt -y update && apt install -y vim curl gpg postgresql postgresql-contrib
+RUN export DEBIAN_FRONTEND=noninteractive
+RUN apt-get update && apt-get -y install vim curl gpg postgresql postgresql-contrib
 RUN cd /tmp
-RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 
-RUN apt install -y ./google-chrome-stable_current_amd64.deb 
+RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \
+    && apt-get -y install ./google-chrome-stable_current_amd64.deb

.devcontainer/devcontainer.json

@@ -2,7 +2,24 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/postgres
 {
   "dockerComposeFile": "docker-compose.yml",
-  "forwardPorts": [3000, 5432],
+  "features": {
+    "ghcr.io/devcontainers/features/desktop-lite:1": {}
+  },
+  "forwardPorts": [3000, 5432, 6080],
+  "portsAttributes": {
+    "3000": {
+      "label": "Application",
+      "onAutoForward": "silent"
+    },
+    "5432": {
+      "label": "Database",
+      "onAutoForward": "silent"
+    },
+    "6080": {
+      "label": "Desktop",
+      "onAutoForward": "silent"
+    }
+  },
   "workspaceFolder": "/workspaces/human-essentials",
   "service": "app",
   "customizations": {
@@ -21,5 +38,5 @@
     "DOCKER": "true"
   },
 
-  "postCreateCommand": ".devcontainer/post-create.sh"
+  "postCreateCommand": "bash -i .devcontainer/post-create.sh"
  }

.devcontainer/docker-compose.yml

@@ -9,6 +9,9 @@ services:
     volumes:
       - ../..:/workspaces:cached
 
+    # Increase shared memory for Chrome to run in Fluxbox
+    shm_size: "2gb"
+
     # Overrides default command so things don't shut down after the process ends.
     command: sleep infinity
 

.devcontainer/launch.json.codespaces

@@ -0,0 +1,32 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "ruby_lsp",
+            "request": "launch",
+            "name": "Debug rspec at cursor with browser",
+            "program": "bundle exec rspec ${file}:${lineNumber}",
+            "env": {
+                "NOT_HEADLESS": "true"
+            }
+        },
+        {
+            "type": "ruby_lsp",
+            "request": "launch",
+            "name": "Debug with Events rspec at cursor with browser",
+            "program": "bundle exec rspec ${file}:${lineNumber}",
+            "env": {
+                "NOT_HEADLESS": "true",
+                "EVENTS_READ": "true"
+            }
+        },
+        {
+            "type": "ruby_lsp",
+            "request": "attach",
+            "name": "Attach to a live server"
+        }
+    ]
+}

.devcontainer/post-create.sh

@@ -2,6 +2,7 @@ RUBY_VERSION="$(cat .ruby-version | tr -d '\n')"
 
 # copy the file only if it doesn't already exist
 cp -n .devcontainer/.env.codespaces .env
+mkdir -p .vscode && cp -n .devcontainer/launch.json.codespaces .vscode/launch.json
 
 # If the project's required ruby version changes from 3.2.2, this command
 # will download and compile the correct version, but it will take a long time.
@@ -11,4 +12,8 @@ if [ "$RUBY_VERSION" != "3.2.2" ]; then
   echo "Ruby $RUBY_VERSION installed"
 fi
 
+nvm install node
+rbenv init bash
+rbenv init zsh
+
 bin/setup

CONTRIBUTING.md

@@ -83,7 +83,7 @@ You won't be yelled at for giving your best effort. The worst that can happen is
 
 1. Follow the link above or follow instructions to [create a new Codespace.](https://docs.github.com/en/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository); You can use the web editor, or even better open the Codespace in VSCode
 2. Wait for the container to start. This will take a few (10-15) minutes since Ruby needs to be installed, the database needs to be created, and the `bin/setup` script needs to run
-3. Run `bin/start` and visit the URL that pops in VSCode up to see the human essentials page
+3. Run `bin/start`. On the Ports tab, visit the forwarded port 3000 URL marked as Application to see the human essentials page. 
 4. Login as a sample user with the default [credentials](#credentials).
 
 ## Troubleshooting 👷🏼‍♀️
@@ -132,6 +132,13 @@ If starting server directly, via `rail s` or `rail console`, or built-in debugge
 If starting via Procfile with `bin/start`, then drop a ``binding.remote_pry`` into the line where you want execution to pause at. Then run ``pry-remote`` in the terminal to connect to it.
 https://github.com/Mon-Ouie/pry-remote
 
+If you want to connect via Shopify Ruby LSP VSCode extension or rdbg, start the server with `bundle exec rdbg -O -n -c -- bin/rails server -p 3000`
+
+### Codespaces
+When running tests in browser, visit the forwarded port 6080 URL to see the browser in Codespaces. You can also visit this port to access the GUI desktop in Codespaces.
+
+In VSCode Run and Debug view, there are some helpful defaults for running RSpec tests in browser at your cursor as well as attaching to a live server. Make sure the Ruby LSP server is started before debugging.
+
 ## Squashing commits
 
 Consider the balance of "polluting the git log with commit messages" vs. "providing useful detail about the history of changes in the git log". If you have several smaller commits that serve a one purpose, you are encouraged to squash them into a single commit. There's no hard and fast rule here about this (for now), just use your best judgement. Please don't squash other people's commits. Everyone who contributes here deserves credit for their work! :)

Gemfile

@@ -147,6 +147,8 @@ group :development, :test do
   gem "pry-remote"
   # Add-on for command line to create a simple debugger.
   gem "pry-nav"
+  # Debugger which supports rdbg and Shopify Ruby LSP VSCode extension
+  gem "debug", ">= 1.0.0"
   # RSpec behavioral testing framework for Rails.
   gem "rspec-rails", "~> 6.1.3"
   # Static analysis / linter.

Gemfile.lock

@@ -158,6 +158,9 @@ GEM
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
     date (3.3.4)
+    debug (1.9.2)
+      irb (~> 1.10)
+      reline (>= 0.3.8)
     debug_inspector (1.2.0)
     delayed_job (4.1.11)
       activesupport (>= 3.0, < 8.0)
@@ -721,6 +724,7 @@ DEPENDENCIES
   coverband
   cuprite
   database_cleaner-active_record (~> 2.2)
+  debug (>= 1.0.0)
   delayed_job_active_record
   delayed_job_web
   devise (>= 4.7.1)