Address feedback from usability studies (#680)

* Address feedback from usability studies * Add the todoimage * Remove connection * Update docs/content/getting-started/first-app/_index.md Co-authored-by: Aaron Crawfis <[email protected]> --------- Co-authored-by: Aaron Crawfis <[email protected]>
radius-project · Aug 14, 2023 · c2d4f0f · c2d4f0f
1 parent 4d85c27
commit c2d4f0f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git a/docs/content/getting-started/first-app/_index.md b/docs/content/getting-started/first-app/_index.md
@@ -15,8 +15,7 @@ This guide offers the quickest way to get started using Radius. You'll walk thro
 ## 1. Have your Kubernetes cluster handy
 
 Radius runs inside [Kubernetes]({{< ref "/operations/platforms/kubernetes" >}}). However you run Kubernetes, get a cluster ready.
-
-> *If you don't have a preferred way to create Kubernetes clusters, you might try using [k3d](https://k3d.io/), which runs a minimal Kubernetes distribution in Docker.*
+> *If you don't have a preferred way to create Kubernetes clusters, you could try using [k3d](https://k3d.io/), which runs a minimal Kubernetes distribution in Docker.*
 
 Ensure your cluster is set as your current context:
 
@@ -92,7 +91,7 @@ In addition to starting Radius services in your Kubernetes cluster, this initial
 
 ## 4. Run the app
 
-Use the `rad run` command to run the app in your environment:
+Use the below command to run the app in your environment, then access the application by opening [http://localhost:3000](http://localhost:3000) in a browser.
 
 ```bash
 rad run app.bicep
@@ -104,8 +103,6 @@ This command:
 - Creates a port-forward from localhost to port 3000 inside the container so you can navigate to the app's frontend UI
 - Streams container logs to your terminal
 
-Access the application by opening [http://localhost:3000](http://localhost:3000) in a browser:
-
 <img src="./demo-screenshot.png" alt="Screenshot of the demo container" width=400>
 <br /><br />
 Congrats! You're running your first Radius app.
@@ -125,36 +122,35 @@ In this step you will:
 
 Open `app.bicep` in your editor and get ready to edit the file.
 
-First add some new code to `app.bicep` by pasting in the content below:
+First add some new code to `app.bicep` by pasting in the content below at the end of the file. This code creates a Redis Cache using a Radius Recipe:
 
 {{< rad file="snippets/app-with-redis-snippets.bicep" embed=true marker="//REDIS" >}}
 
-The code you just added creates a Redis Cache resource and specifies that it should be created by a Recipe.
-
-Next, add this code to the container definition inside `properties`:
+Next, update your container definition to include `connections` inside `properties`. This code creates a connection between the container and the database. Based on this connection, Radius will inject environment variables into the container that inform the container how to connect. You will view these in the next step.
 
-{{< rad file="snippets/app-with-redis-snippets.bicep" embed=true marker="//CONNECTION" >}}
-
-The code you just added creates a connection between the container and the database. Based on this connection, Radius will define environment variables in the container that tell the container how to connect. You will view these in the next step.
+{{< rad file="snippets/app-with-redis-snippets.bicep" embed=true marker="//CONTAINER" >}}
 
 Your updated `app.bicep` will look like this:
 
 {{< rad file="snippets/app-with-redis.bicep" embed=true >}}
 
 ## 6. Rerun the application with a database
 
-Make sure to save the changes in your `app.bicep` file, then use `rad run` to run the updated application again:
+Use the command below to run the updated application again, then open the browser to [http://localhost:3000](http://localhost:3000).
 
 ```sh
 rad run app.bicep
 ```
 
-Open the browser to [http://localhost:3000](http://localhost:3000) and you should see that the environment variables have changed. The `demo` container now has connection information for Redis (`CONNECTION_REDIS_HOST`, `CONNECTION_REDIS_PORT`).
+You should see that the environment variables have changed. The `demo` container now has connection information for Redis (`CONNECTION_REDIS_HOST`, `CONNECTION_REDIS_PORT`).
 
-<img src="./demo-with-redis-screenshot.png" alt="Screenshot of the demo container" width=400>
+<img src="./demo-with-redis-screenshot.png" alt="Screenshot of the demo container" width=500>
 <br /><br />
 
-Navigate to the TODO page and test out the application. Using the TODO page will update the saved state in Redis.
+Navigate to the TODO List tab and test out the application. Using the TODO page will update the saved state in Redis.
+
+<img src="./demo-with-todolist.png" alt="Screenshot of the todolist" width=500>
+<br /><br />
 
 Press CTRL+C when you are finished with the website.
 

diff --git a/docs/content/getting-started/first-app/demo-with-todolist.png b/docs/content/getting-started/first-app/demo-with-todolist.png
diff --git a/docs/content/getting-started/first-app/snippets/app-with-redis-snippets.bicep b/docs/content/getting-started/first-app/snippets/app-with-redis-snippets.bicep
@@ -4,6 +4,7 @@ import radius as radius
 @description('The app ID of your Radius application. Set automatically by the rad CLI.')
 param application string
 
+//CONTAINER
 resource demo 'Applications.Core/containers@2022-03-15-privatepreview' = {
   name: 'demo'
   properties: {
@@ -16,15 +17,14 @@ resource demo 'Applications.Core/containers@2022-03-15-privatepreview' = {
         }
       }
     }
-    //CONNECTION
     connections: {
       redis: {
         source: db.id
       }
     }
-    //CONNECTION
   }
 }
+//CONTAINER
 
 //REDIS
 @description('The environment ID of your Radius application. Set automatically by the rad CLI.')