Add how-to guide on Connect to dependencies

.github/config/en-custom.txt

@@ -946,4 +946,5 @@ XRay
 PodSpec
 ConfigMap
 CRD
-composable
+composable
+mycontainer

docs/config.toml

@@ -62,7 +62,6 @@ tag = "tags"
 
 [params]
 copyright = "Radius"
-
 version = "edge"
 tag_version = "latest"
 chart_version = "0.19.0"

docs/content/guides/author-apps/containers/howto-connect-dependencies/index.md

@@ -0,0 +1,95 @@
+---
+type: docs
+title: "How-To: Connect to dependencies"
+linkTitle: "Connect to dependencies"
+description: "Learn how to connect to dependencies in your application via connections"
+weight: 200
+categories: "How-To"
+tags: ["containers"]
+---
+
+This how-to guide will teach how to connect to your dependencies via [connections]({{< ref "guides/author-apps/containers#connections" >}})
+
+## Prerequisites
+
+- [Radius CLI]({{< ref "installation#step-1-install-the-rad-cli" >}})
+- [Radius environment]({{< ref "installation#step-3-initialize-the-radius-control-plane-and-the-radius-environment" >}})
+
+## Step 1: Model an app and container
+
+Create a new file named `app.bicep` and add an application and a [container]({{< ref "guides/author-apps/containers" >}}):
+
+{{< rad file="snippets/app.bicep" embed=true >}}
+
+## Step 2: Add a Mongo database as a dependency
+
+Next, add to `app.bicep` a [Mongo database]({{< ref "portable-resources#overview" >}}), leveraging the default "dev" Recipe:
+
+{{< rad file="snippets/app-mongodb.bicep" embed=true marker="//DB" >}}
+
+## Step 3: Connect to the Mongo database
+
+Connections from a container to a resource result in environment variables for connection information automatically being set on the container. Update your container definition to add a connection to the new Mongo database:
+
+{{< rad file="snippets/app-mongodb.bicep" embed=true marker="//CONTAINER" >}}
+
+## Step 4: Deploy your app
+
+1. Deploy your application to your environment:
+
+   ```bash
+   rad deploy ./app.bicep
+   ```
+1. Port-forward the container to your machine:
+
+    ```bash
+    rad resource expose containers mycontainer -a myapp --port 5000
+    ```
+1. Visit [localhost:5000](http://localhost:5000) in your browser. You should see the following page, now showing injected environment variables:
+
+   <img src="./connections.png" alt="Screenshot of the app printing all the environment variables" width=1000px />
+
+## Step 5: View the application connections
+
+Radius connections are more than just environment variables and configuration. You can also access the "application graph" and understand the connections within your application with the following command:
+
+```bash
+rad app connections
+```
+
+You should see the following output, detailing the connections between the `mycontainer` and the `db` Mongo database, along with information about the underlying Kubernetes resources running the app:
+
+```
+Displaying application: myapp
+
+Name: mycontainer (Applications.Core/containers)
+Connections:
+  mycontainer -> mongo-db (Applications.Datastores/mongoDatabases)
+Resources:
+  mycontainer (kubernetes: apps/Deployment)
+  mycontainer (kubernetes: core/Secret)
+  mycontainer (kubernetes: core/ServiceAccount)
+  mycontainer (kubernetes: rbac.authorization.k8s.io/Role)
+  mycontainer (kubernetes: rbac.authorization.k8s.io/RoleBinding)
+
+Name: mongo-db (Applications.Datastores/mongoDatabases)
+Connections:
+  mycontainer (Applications.Core/containers) -> mongo-db
+Resources:
+  mongo-xxx(kubernetes: apps/Deployment)
+  mongo-xxx(kubernetes: core/Service)
+```
+
+## Cleanup
+
+Run `rad app delete` to cleanup your Radius application, container, and mongo database:
+
+```bash
+rad app delete -a myapp
+```
+
+## Further reading
+
+- [Connections]({{< ref "guides/author-apps/containers#connections" >}})
+- [Container schema]({{< ref container-schema >}})
+

docs/content/guides/author-apps/containers/howto-environment-variables/snippets/3-app.bicep → docs/content/guides/author-apps/containers/howto-connect-dependencies/snippets/app-mongodb.bicep

@@ -16,10 +16,6 @@ resource container 'Applications.Core/containers@2023-10-01-preview' = {
     application: app.id
     container: {
       image: 'radius.azurecr.io/quickstarts/envvars:edge'
-      env: {
-        FOO: 'BAR'
-        BAZ: app.name
-      }
     }
     connections: {
       myconnection: {
@@ -30,7 +26,7 @@ resource container 'Applications.Core/containers@2023-10-01-preview' = {
 }
 //CONTAINER
 
-//LINK
+//DB
 resource mongoDatabase 'Applications.Datastores/mongoDatabases@2023-10-01-preview' = {
   name: 'mongo-db'
   properties: {
@@ -39,4 +35,4 @@ resource mongoDatabase 'Applications.Datastores/mongoDatabases@2023-10-01-previe
     // Use the "default" Recipe to provision the MongoDB
   }
 }
-//LINK
+//DB

docs/content/guides/author-apps/containers/howto-connect-dependencies/snippets/app.bicep

@@ -0,0 +1,20 @@
+import radius as rad
+
+param environment string
+
+resource app 'Applications.Core/applications@2023-10-01-preview' = {
+  name: 'myapp'
+  properties: {
+    environment: environment
+  }
+}
+
+resource container 'Applications.Core/containers@2023-10-01-preview' = {
+  name: 'mycontainer'
+  properties: {
+    application: app.id
+    container: {
+      image: 'radius.azurecr.io/quickstarts/envvars:edge'
+    }
+  }
+}

docs/content/guides/author-apps/containers/howto-environment-variables/index.md

@@ -3,16 +3,15 @@ type: docs
 title: "How-To: Set environment variables on a container"
 linkTitle: "Set Env vars"
 description: "Learn how to set environment variables manually and through connections"
-weight: 400
+weight: 300
 slug: "environment-variables"
 categories: "How-To"
 tags: ["containers"]
 ---
 
 This how-to guide will teach you:
 
-1. How to set environment variables manually
-1. How to set environment variables through connections
+1. How to set environment variables manually on a container
 
 ## Prerequisites
 
@@ -51,37 +50,9 @@ Add an `env` property which will contain a list of environment variables to set.
 
    Here you can see the environment variables `FOO` and `BAZ`, with their accompanying values.
 
-## Step 4: Add a Mongo database
-
-Next, add to `app.bicep` a [Mongo database]({{< ref portable-resources >}}), leveraging the default "dev" Recipe:
-
-{{< rad file="snippets/3-app.bicep" embed=true marker="//LINK" >}}
-
-## Step 5: Connect to the Mongo database
-
-Connections from a container to a resource result in environment variables for connection information automatically being set on the container. Update your container definition to add a connection to the new Mongo database:
-
-{{< rad file="snippets/3-app.bicep" embed=true marker="//CONTAINER" >}}
-
-## Step 6: Deploy your app
-
-1. Deploy your application to your environment:
-
-   ```bash
-   rad deploy ./app.bicep
-   ```
-1. Port-forward the container to your machine:
-
-    ```bash
-    rad resource expose containers mycontainer -a myapp --port 5000
-    ```
-1. Visit [localhost:5000](http://localhost:5000) in your browser. You should see the following page, now showing injected environment variables:
-
-   <img src="screenshot-all.jpg" alt="Screenshot of the app printing all the environment variables" width=1000px />
-
 ## Cleanup
 
-Run `rad app delete` to cleanup your Radius application, container, and link:
+Run `rad app delete` to cleanup your Radius application, container, and mongo database:
 
 ```bash
 rad app delete -a myapp