Added graphics for CLI steps.

Author: RoseHJM

articles/deployment-environments/how-to-create-environment-with-azure-developer.md

@@ -63,6 +63,8 @@ powershell -ex AllSigned -c "Invoke-RestMethod 'https://aka.ms/install-azd.ps1'
 
 ### Sign in with Azure Developer CLI
 
+Access your Azure resources by logging in. When you initiate a login, a browser window opens and prompts you to login to Azure. After you sign in, the terminal displays a message that you're signed in to Azure.
+
 Sign in to AZD using the command palette:
 
 # [Visual Studio Code](#tab/visual-studio-code)
@@ -75,11 +77,14 @@ The output of commands issued from the command palette is displayed in an **azd
 
 # [Azure Developer CLI](#tab/azure-developer-cli)
 
+Sign in to Azure at the CLI using the following command: 
 
 ```bash
  azd auth login
 ```
 
+:::image type="content" source="media/how-to-create-environment-with-azure-developer/login.png" alt-text="Screenshot showing the azd auth login command and its result in the terminal." lightbox="media/how-to-create-environment-with-azure-developer/login.png":::
+
 ---
 
 ### Enable AZD support for ADE
@@ -97,6 +102,8 @@ You can configure AZD to provision and deploy resources to your deployment envir
  azd config set platform.type devcenter
 ```
 
+
+
 ---
 
 ## Create an environment from existing code
@@ -125,15 +132,36 @@ AZD uses an *azure.yaml* file to define the environment. The azure.yaml file def
 
 1. AZD scans the current directory and gathers more information depending on the type of app you're building. Follow the prompts to configure your AZD environment.
 
-1. Finally, enter a name for your environment. 
+1. Finally, enter a name for your local AZD environment. 
 
 AZD creates an *azure.yaml* file in the root of your project. 
 
 # [Azure Developer CLI](#tab/azure-developer-cli)
 
-```bash
-azd init
-```
+1. At the CLI, navigate to the folder that contains your application code.
+ 
+1. Run the following command to initialize your application and supply infomation when prompted:
+
+   ```bash
+   azd init
+   ```
+1. In the AZD terminal, select ***Use code in the current directory***.
+
+   :::image type="content" source="media/how-to-create-environment-with-azure-developer/init-folder.png" alt-text="Screenshot showing the az init command and the prompt How do you want to initialize your app." lightbox="media/how-to-create-environment-with-azure-developer/init-folder.png":::
+
+   AZD scans the current directory and gathers more information depending on the type of app you're building. Follow the prompts to configure your AZD environment.
+
+1. `azd init` identifies the services defined in your app code and prompts you to confirm and continue, remove a service, or add a service. Select ***Confirm and continue initializing my app***  
+ 
+   :::image type="content" source="media/how-to-create-environment-with-azure-developer/init-services.png" alt-text="Screenshot showing the AZD init prompt to confirm and continue, remove a service, or add a service." lightbox="media/how-to-create-environment-with-azure-developer/init-services.png":::
+
+1. `azd init` continues to gather information to configure your app. For this example application, you're prompted for the name of your MongoDB database instance.
+ 
+   :::image type="content" source="media/how-to-create-environment-with-azure-developer/init-database.png" alt-text="Screenshot showing the azd init prompt for a database name." lightbox="media/how-to-create-environment-with-azure-developer/init-database.png":::
+ 
+1. Finally, enter a name for your local AZD environment. 
+
+AZD creates an *azure.yaml* file in the root of your project. 
 ---
 
 ### Provision infrastructure to Azure Deployment Environment
@@ -158,10 +186,29 @@ When you're ready, you can provision your local environment to a remote Azure De
 
 # [Azure Developer CLI](#tab/azure-developer-cli)
 
+Provision your application to Azure using the following command:
+
 ```bash
 azd provision
 ```
 
+1. 'azd init' provides a list of projects that you have access to. Select the project that you want to provision your application to.
+
+   :::image type="content" source="media/how-to-create-environment-with-azure-developer/select-project.png" alt-text="Screenshot showing the azd init prompt to select a project." lightbox="media/how-to-create-environment-with-azure-developer/select-project.png":::
+
+1. 'azd init' provides a list of environment definitions in the selected project. Select the environment definition that you want to use to provision your application.
+
+   :::image type="content" source="media/how-to-create-environment-with-azure-developer/select-environment-definition.png" alt-text="Screenshot showing the azd init prompt to select an environment definition." lightbox="media/how-to-create-environment-with-azure-developer/select-environment-definition.png":::
+
+1. 'azd init' provides a list of environment types in the selected project. Select the environment type that you want to use to provision your application.
+
+   :::image type="content" source="media/how-to-create-environment-with-azure-developer/select-environment-type.png" alt-text="Screenshot showing the azd init prompt to select an environment type." lightbox="media/how-to-create-environment-with-azure-developer/select-environment-type.png":::
+
+1. AZD instructs ADE to create a new environment based on the information you gave in the previous step.
+ 
+   :::image type="content" source="media/how-to-create-environment-with-azure-developer/provision-progress.png" alt-text="Screenshot showing the AZD provisioning progess." lightbox="media/how-to-create-environment-with-azure-developer/provision-progress.png":::
+ 
+1. You can view the resources created in the Azure portal or in the [developer portal](https://devportal.microsoft.com).
 ---
 
 ### List existing environments (optional)
@@ -170,17 +217,24 @@ Verify that your environment is created by listing the existing environments.
 
 # [Visual Studio Code](#tab/visual-studio-code)
 
-In Explorer, right-click **azure.yaml**, and then select **Azure Developer CLI (azd)** > **View Local and Remote Environments (env list)**.
+1. In Explorer, right-click **azure.yaml**, and then select **Azure Developer CLI (azd)** > **View Local and Remote Environments (env list)**.
 
-:::image type="content" source="media/how-to-create-environment-with-azure-developer/azure-developer-menu-environment-list.png" alt-text="Screenshot of Visual Studio Code with azure.yaml highlighted, and the AZD context menu with Azure Developer CLI and View Local and Remote environments highlighted." lightbox="media/how-to-create-environment-with-azure-developer/azure-developer-menu-environment-list.png":::
+   :::image type="content" source="media/how-to-create-environment-with-azure-developer/azure-developer-menu-environment-list.png" alt-text="Screenshot of Visual Studio Code with azure.yaml highlighted, and the AZD context menu with Azure Developer CLI and View Local and Remote environments highlighted." lightbox="media/how-to-create-environment-with-azure-developer/azure-developer-menu-environment-list.png":::
 
-You're prompted to select a project and an environment definition.
+   `You're prompted to select a project and an environment definition.
 
 # [Azure Developer CLI](#tab/azure-developer-cli)
 
+Use the following command to view the environments that you have access to: the local AZD environment and the remote Azure Deployment Environments environment.
+
 ```bash
 azd env list
 ```
+
+`azd init` prompts you to select a project and an environment definition.
+
+:::image type="content" source="media/how-to-create-environment-with-azure-developer/environments-list.png" alt-text="Screenshot showing the local AZD environment and the remote Azure environment." lightbox="media/how-to-create-environment-with-azure-developer/environments-list.png":::
+
 ---
 
 ### Deploy code to Azure Deployment Environments
@@ -197,9 +251,29 @@ When your environment is provisioned, you can deploy your code to the environmen
 
 # [Azure Developer CLI](#tab/azure-developer-cli)
 
+Deploy your application code to the remote Azure Deployment Environments environment you provisioned using the following command:
+
 ```bash
 azd env deploy
 ```
+Deploying your code to the remote environment can take several minutes. 
+
+You can view the progress of the deployment in the Azure portal:
+
+:::image type="content" source="media/how-to-create-environment-with-azure-developer/azure-portal-deploy-in-progress.png" alt-text="Screenshot showing AZD provisioning progress in the Azure portal." lightbox="media/how-to-create-environment-with-azure-developer/azure-portal-deploy-progress.png":::
+
+When deployment completes, you can view the resources that were provisioned in the Azure portal:
+
+:::image type="content" source="media/how-to-create-environment-with-azure-developer/azure-portal-resources.png" alt-text="Screenshot showing AZD provisioned resources in the Azure portal." lightbox="media/how-to-create-environment-with-azure-developer/azure-portal-resources.png":::
+
+You can verify that your code is deployed by selecting the end point URLs listed in the AZD terminal.
+
+:::image type="content" source="media/how-to-create-environment-with-azure-developer/deploy-endpoint.png" alt-text="Screenshot showing the endpoint AZD deploy creates." lightbox="media/how-to-create-environment-with-azure-developer/deploy-endpoint.png":::
+
+For this sample application, you'll see something like this:
+
+:::image type="content" source="media/how-to-create-environment-with-azure-developer/test-swagger.png" alt-text="Screenshot showing application in swagger interface." lightbox="media/how-to-create-environment-with-azure-developer/test-swagger.png":::
+
 ---
 
 ## Clean up resources
@@ -216,6 +290,8 @@ Confirm that you want to delete the environment by entering `y` when prompted.
 
 # [Azure Developer CLI](#tab/azure-developer-cli)
 
+Delete the Azure resources by using the following command:
+
 ```bash
 azd down --environment <environmentName>
 ```