Configurable dev ports

.env.example

@@ -37,12 +37,16 @@ LOCAL_DEV_CHECK=1
 # want to develop ckeditor locally.
 CKEDITOR_BUILD_DIR=./frontend/src/vendor/ckeditor/
 
-HOST=0.0.0.0
-PORT=4200
+# Local backend development host and port
+HOST=localhost
+PORT=3000
+# Local frontend development host and port
+FE_HOST=localhost
+FE_PORT=4200
 
 # Use this variables to configure hostnames for frontend and backend, e.g. to enable HTTPS in docker development setup
 OPENPROJECT_DEV_HOST=localhost
-OPENPROJECT_DEV_URL=http://${OPENPROJECT_DEV_HOST}:${PORT}
+OPENPROJECT_DEV_URL=http://${OPENPROJECT_DEV_HOST}:${FE_PORT}
 
 # Select edition from: ['standard','bim']
 OPENPROJECT_EDITION=standard

Procfile.dev

@@ -1,3 +1,3 @@
-web: bundle exec rails server -p 3000 -b ${HOST:="127.0.0.1"} --environment ${RAILS_ENV:="development"}
+web: bundle exec rails server
 angular: npm run serve
 worker: bundle exec good_job start

app/helpers/frontend_asset_helper.rb

@@ -27,14 +27,19 @@
 #++
 
 module FrontendAssetHelper
-  CLI_DEFAULT_PROXY = "http://localhost:4200".freeze
+  CLI_DEFAULT_PROXY = begin
+    host = ENV.fetch("FE_HOST", "localhost")
+    port = ENV.fetch("FE_PORT", 4200)
+    "http://#{host}:#{port}"
+  end
+  CLI_PROXY = ENV.fetch("OPENPROJECT_CLI_PROXY", CLI_DEFAULT_PROXY)
 
   def self.assets_proxied?
     ENV["OPENPROJECT_DISABLE_DEV_ASSET_PROXY"].blank? && !Rails.env.production? && cli_proxy.present?
   end
 
   def self.cli_proxy
-    ENV.fetch("OPENPROJECT_CLI_PROXY", CLI_DEFAULT_PROXY)
+    CLI_PROXY
   end
 
   ##

config/constants/settings/definition.rb

@@ -537,7 +537,7 @@ class Definition
       },
       host_name: {
         format: :string,
-        default: "localhost:3000",
+        default: -> { "#{ENV.fetch('HOST', 'localhost')}:#{ENV.fetch('PORT', 3000)}" },
         default_by_env: {
           # We do not want to set a localhost host name in production
           production: nil

config/puma.rb

@@ -7,12 +7,13 @@
 threads_max_count = OpenProject::Configuration.web_max_threads
 threads threads_min_count, [threads_min_count, threads_max_count].max
 
-# Specifies the `port` that Puma will listen on to receive requests; default is 3000.
-#
+# Specifies the address on which Puma will listen on to receive requests; default is localhost.
+set_default_host ENV.fetch("HOST") { "localhost" }
+
+# Specifies the port that Puma will listen on to receive requests; default is 3000.
 port ENV.fetch("PORT") { 3000 }.to_i
 
-# Specifies the `environment` that Puma will run in.
-#
+# Specifies the environment that Puma will run in.
 environment ENV.fetch("RAILS_ENV") { "development" }
 
 # Specifies the number of `workers` to boot in clustered mode.

docker-compose.override.example.yml

@@ -3,23 +3,23 @@
 
 services:
   backend:
-    environment:
-      OPENPROJECT_CLI_PROXY: "http://localhost:${PORT}"
+    # use these ports to be able to access the stack under http://localhost:3000
     ports:
-      - "3000:3000"
+      - "${PORT:-3000}:3000"
 
   frontend:
+    # use these ports to be able to access the stack under http://localhost:3000
     ports:
-      - "${PORT}:4200"
+      - "${FE_PORT:-4200}:4200"
 
-  db:
-    ports:
-      - '5432:5432'
+  # db:
+  #   ports:
+  #     - '5432:5432'
 
-  db-test:
-    ports:
-      - '5433:5432'
+  # db-test:
+  #   ports:
+  #     - '5433:5432'
 
-  chrome:
-    ports:
-      - '5900:5900'
+  # chrome:
+  #   ports:
+  #     - '5900:5900'

docs/development/development-environment/docker/README.md

@@ -106,8 +106,9 @@ directory will not end up with files owned by root.
 
 You also will want to create a `docker-compose.override.yml` file, which can contain the port exposure for your
 containers. Those are excluded from the main compose file `docker-compose.yml` for sanity reasons. If any port is
-already in use, `docker compose` won't start and as you cannot disable the exposed port in
-the `docker-compose.override.yml` file, you would have to alter the original `docker-compose.yml`.
+already in use, `docker compose` won't start and will require explicit override in the `docker-compose.override.yml`
+file (see instructions for [!reset](https://docs.docker.com/reference/compose-file/merge/#reset-value) and
+[!override](https://docs.docker.com/reference/compose-file/merge/#replace-value)).
 
 There is an example you can use out of the box.
 

frontend/cli_to_rails_proxy.js

@@ -1,9 +1,10 @@
-const PROXY_HOSTNAME = process.env.PROXY_HOSTNAME || 'localhost';
+const PROXY_HOSTNAME = process.env.PROXY_HOSTNAME || process.env.HOST || 'localhost';
+const PORT = process.env.PORT || '3000';
 
 const PROXY_CONFIG = [
   {
     "context": ['/**'],
-    "target": `http://${PROXY_HOSTNAME}:3000`,
+    "target": `http://${PROXY_HOSTNAME}:${PORT}`,
     "secure": false,
     "timeout": 360000,
     // "bypass": function (req, res, proxyOptions) {

frontend/package.json

@@ -166,8 +166,8 @@
     "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --configuration production --named-chunks --source-map",
     "build:watch": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --watch --named-chunks",
     "tokens:generate": "theo src/app/spot/styles/tokens/tokens.yml --transform web --format sass,json --dest src/app/spot/styles/tokens/dist",
-    "serve": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --public-host http://${PROXY_HOSTNAME:-localhost}:4200",
-    "serve:test": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --host 0.0.0.0 --disable-host-check --public-host http://frontend-test:4200",
+    "serve": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --host ${FE_HOST:-localhost} --port ${FE_PORT:-4200} --public-host http://${PROXY_HOSTNAME:-localhost}:${FE_PORT:-4200}",
+    "serve:test": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --host ${FE_HOST:-localhost} --port ${FE_PORT:-4200} --disable-host-check --public-host http://frontend-test:${FE_PORT:-4200}",
     "test": "ng test --watch=false",
     "test:watch": "ng test --watch=true",
     "lint": "esprint check",