Update and consolidate Docker Compose variable documentation.

docs/builds/packs/docker-compose.md

@@ -108,13 +108,74 @@ Coolify automatically detects environment variables mentioned in your compose fi
 services:
   myservice:
     environment:
-      - SOME_HARDCODED_VALUE=hello # Passed to the container, but not visible in Coolify's UI.
-      - SOME_VARIABLE=${SOME_VARIABLE_IN_COOLIFY_UI} # Creates an editable, uninitialized variable in the UI.
-      - SOME_DEFAULT_VARIABLE=${OTHER_NAME_IN_COOLIFY:-hello} # Sets a default value "hello" that can be edited.
+      - SOME_HARDCODED_VALUE=hello # Gets passed to the container but will not be visible in Coolify's UI
+      - SOME_VARIABLE=${SOME_VARIABLE_IN_COOLIFY_UI} # Creates an uninitialized environment variable editable in Coolify's UI
+      - SOME_DEFAULT_VARIABLE=${OTHER_NAME_IN_COOLIFY:-hello} # Creates an environment variable of value "hello" editable in Coolify's UI
 ```
 
 <ZoomableImage src="/docs/images/builds/packs/compose/6.webp" />
 
+#### Shared Environment Variables
+
+Coolify doesn't directly detect **shared** environment variables in the compose file, but are able to be referenced using with an additional step.
+
+1. Create your shared variable following the [shared variables documentation](/knowledge-base/environment-variables#shared-variables).
+
+2. Define your variables in your Docker Compose file, for example;
+
+```yaml
+services:
+  myservice:
+    environment:
+      - HARD_CODED=dev # Passed to the container, but not visible in Coolify's UI.
+      - SOME_OPTIONAL_VARIABLE=${EnvironmentNameShort} # Creates an editable, uninitialized variable in the UI.
+    volumes:
+      - data-persist:/var/data
+  volumes:
+    data-persist:
+      device: /mnt/serverstorage/${EnvironmentNameShort} # Re-uses the variable
+```
+
+3. Define the variable explicitly in the applications Environment Variables referencing your shared variable created in step 1;
+
+If in developer view, you can enter it like so;
+```
+EnvironmentNameShort={{environment.EnvironmentNameShort}}
+```
+
+Or in the normal view, the Name is what's referenced in the Docker Compose file `EnvironmentNameShort` with the Value being the referenced environment variable `{{environment.EnvironmentNameShort}}` as seen below. Once saved if correct, you'll see there's a third text box, if you reveal this, you should be able to see the true value.
+
+<ZoomableImage src="/docs/images/builds/packs/compose/7.webp" />
+
+## Required environment variables
+
+Coolify supports marking environment variables as required using Docker Compose's built-in syntax. This feature improves the deployment experience by validating critical configuration before starting services.
+
+### Syntax
+
+Use the `:?` syntax to mark variables as required:
+
+```yaml
+services:
+  webapp:
+    environment:
+      # Required variable - must be set, no default
+      - DATABASE_URL=${DATABASE_URL:?}
+
+      # Required variable with default value - prefilled but editable
+      - PORT=${PORT:?3000}
+
+      # Optional variable with default - standard Docker Compose behavior
+      - DEBUG=${DEBUG:-false}
+```
+
+
+
+
+
+
+
+
 ### Required Environment Variables
 
 You can mark environment variables as required using the `:?` syntax. Required variables must be set before deployment and will be highlighted in Coolify's UI with a red border if empty.
@@ -292,15 +353,15 @@ By default, each compose stack is deployed to a separate network named after you
 
 If you want to connect services across different stacks (for example, linking an application to a separate database), enable the **Connect to Predefined Network** option on your Service Stack page.
 
-<ZoomableImage src="/docs/images/builds/packs/compose/7.webp" />
+<ZoomableImage src="/docs/images/builds/packs/compose/8.webp" />
 
 Note that you must use the full name (like `postgres-<uuid>`) when referencing a service in another stack.
 
 ### Raw Docker Compose Deployment
 
 For advanced users, Coolify offers a "Raw Compose Deployment" mode. This option lets you deploy your Docker Compose file directly without many of Coolify's additional configurations.
 
-<ZoomableImage src="/docs/images/builds/packs/compose/8.webp" />
+<ZoomableImage src="/docs/images/builds/packs/compose/9.webp" />
 
 ::: danger CAUTION
 This mode is intended for advanced users familiar with Docker Compose.

docs/knowledge-base/docker/compose.md

@@ -61,40 +61,7 @@ For further details, please refer to the [Docker Networking in Compose](https://
 
 ## Defining environment variables
 
-Coolify will notice the environment variables you mention in your compose file and will display it in its UI.
-
-```yaml
-services:
-  myservice:
-    environment:
-      - SOME_HARDCODED_VALUE=hello # Gets passed to the container but will not be visible in Coolify's UI
-      - SOME_VARIABLE=${SOME_VARIABLE_IN_COOLIFY_UI} # Creates an uninitialized environment variable editable in Coolify's UI
-      - SOME_DEFAULT_VARIABLE=${OTHER_NAME_IN_COOLIFY:-hello} # Creates an environment variable of value "hello" editable in Coolify's UI
-```
-
-<ZoomableImage src="/docs/images/screenshots/Docker-compose-environment-variables-UI.webp" />
-
-## Required environment variables
-
-Coolify supports marking environment variables as required using Docker Compose's built-in syntax. This feature improves the deployment experience by validating critical configuration before starting services.
-
-### Syntax
-
-Use the `:?` syntax to mark variables as required:
-
-```yaml
-services:
-  webapp:
-    environment:
-      # Required variable - must be set, no default
-      - DATABASE_URL=${DATABASE_URL:?}
-
-      # Required variable with default value - prefilled but editable
-      - PORT=${PORT:?3000}
-
-      # Optional variable with default - standard Docker Compose behavior
-      - DEBUG=${DEBUG:-false}
-```
+Please refer to [Defining Environment Variables in Docker Compose](/builds/packs/docker-compose#defining-environment-variables)
 
 **Key behaviors:**
 

docs/knowledge-base/environment-variables.md

@@ -37,20 +37,9 @@ You can set them on the `Projects` page, under the gear icon and use it with <co
 
 You can set them on the `Environments` page (select a `Project`), under the gear icon and use it with <code v-pre>{{environment.NODE_ENV}}</code> Do not replace "environment" with your actual environment name.
 
-#### Using Shared Variables in Compose File
+#### Using Shared Variables in a Docker Compose File
 
-If you want to use the environment variables in your compose file, you can do so by using the following syntax:
-
-```bash
-environment:
-  - NODE_ENV=${NODE_ENV}
-```
-
-And then in the UI set `NODE_ENV` to your desired shared variable. For example if you want to use a team based variable (make sure you have the `NODE_ENV` variable set in the Team Variables):
-
-```bash
-NODE_ENV={{team.NODE_ENV}}
-```
+Please refer to [Shared Environment Variables in Docker Compose](/builds/packs/docker-compose#shared-environment-variables)
 
 ## Predefined Variables