Merge pull request #129868 from ninallam/devops-starter-gh

Add content for DevOps Starter with GH actions

Author: ttorble

articles/devops-project/_img/azure-devops-project-nodejs/authenticate-dashboard.png

@@ -0,0 +1,127 @@
+---
+title: 'Quickstart: Create a CI/CD workflow for Node.js - DevOps Starter for GitHub to deploy to Azure' 
+description: DevOps Starter makes it easy to get started on Azure using GitHub Actions.
+author: ninallam
+editor: ninallam
+ms.assetid: 
+ms.devlang: na
+ms.service: az-devops-project
+ms.topic: overview
+ms.tgt_pltfrm: na
+ms.workload:
+ms.date: 08/24/2020
+ms.author: ninallam
+---
+
+# Set up CI/CD for a Node.js app with DevOps Starter using GitHub Actions
+
+In this quickstart, you use the simplified DevOps Starter experience to set up a continuous integration (CI) and continuous delivery (CD) workflow for your Node.js app using GitHub Actions. You can use DevOps Starter to set up everything you need for developing, deploying, and monitoring your app. 
+
+## Prerequisites
+
+- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?ref=microsoft.com&utm_source=microsoft.com&utm_medium=docs&utm_campaign=visualstudio). 
+- A [GitHub](https://github.com/) account.
+
+## Sign in to the Azure portal
+
+DevOps Starter creates a CI/CD workflow using GitHub actions. DevOps Starter also creates Azure resources in the Azure subscription of your choice.
+
+1. Sign in to the [Azure portal](https://portal.azure.com).
+
+1. In the search box, type **DevOps Starter**, and then select. Click on **Add** to create a new one.
+
+    ![The DevOps Starter dashboard](_img/azure-devops-starter-aks/search-devops-starter.png)
+
+## Select a sample application and Azure service
+
+1. Click on **Set up DevOps starter with GitHub** on the right side banner.
+
+    ![landing_page](_img/azure-devops-project-nodejs/landing-page.png)
+
+1. Ensure that the CI/CD provider is selected as **GitHub Actions**.
+
+    ![CICD_provider](_img/azure-devops-project-nodejs/provider-selection.png)
+
+1. Select the **Node.js** sample application. The Node.js samples include a choice of several application frameworks.
+
+1. The default sample framework is **Express.js**. Leave the default setting, and then select **Next**.   
+
+2. Windows Web App is the default deployment target. The application framework, which you chose previously, dictates the type of Azure service deployment target available here. Leave the default service, and then select **Next**.
+ 
+## Configure GitHub account and an Azure subscription 
+
+1. Authenticate with GitHub.
+
+   1. Click on the **Authorize** button. 
+   
+   1. Sign in to GitHub. If you don't have a GitHub account, you can sign up here as well.
+
+2. Choose an existing **GitHub organization**. 
+   
+   1. Choose a name for your GitHub repository. 
+   
+   1. Select your Azure subscription and location, choose a name for your application, and then select **Done**.
+    
+       ![Enter_GH_details](_img/azure-devops-project-nodejs/gh-details.png)
+
+
+    After a few minutes, the DevOps Starter dashboard is displayed in the Azure portal. A sample application is set up in a repository in your Azure DevOps organization, a GitHub workflow is triggered, and your application is deployed to Azure. This dashboard provides visibility into your code repository, the  GitHub workflow, and your application in Azure.
+   
+3. Select **Browse** to view your running application.
+    
+    The dashboard contains details of GitHub workflow and Azure resources. To view the details of GitHub workflow like latest run, commits, and job status you will need to **Authorize to GitHub**.
+   
+   ![Authorize_dashboard](_img/azure-devops-project-nodejs/authenticate-dashboard.png)
+
+DevOps Starter automatically configured a GitHub workflow with build and deploy jobs using GitHub actions. You're now ready to collaborate with a team on a Node.js app with a CI/CD process that automatically deploys your latest work to your web site.
+
+   ![dashooard_view](_img/azure-devops-project-nodejs/full-dashboard.png)
+
+## Commit code changes and execute CI/CD
+
+DevOps Starter creates a repository in GitHub. To view the repository and make code changes to your application, do the following:
+
+1. On the left of the DevOps Starter dashboard, select the link for your master branch. This link opens a view to the newly created GitHub repository.
+
+1. To view the repository clone URL, select **Clone** on the top right of the browser. You can clone your Git repository in your favorite IDE. In the next few steps, you can use the web browser to make and commit code changes directly to the master branch.
+
+1. On the left side of the browser, go to the **/Application/views/index.pug** file.
+
+1. Select **Edit**, and then make a change to some of the text.
+    For example, change some of the text for one of the tags.
+
+1. Select **Commit**, and then save your changes.
+
+1. In your browser, go to the DevOps Starter dashboard.   
+You should now see a GitHub workflow build job in progress. The changes you made are automatically built and deployed via a GitHub workflow.
+
+## View the GitHub workflow
+
+In the previous step, DevOps Starter automatically configured a full GitHub workflow. Explore and customize the workflow as needed. Take the following steps to familiarize yourself with the workflow.
+
+1. On the left of the DevOps Starter dashboard, select **GitHub workflow**. This link opens a browser tab and the GitHub workflow for your new project.
+    > [!NOTE]
+    > Do not rename the workflow file. The name of the workflow file should be **devops-starter-workflow.yml** for the dashboard to reflect the changes
+
+1. The workflow yaml file contains all the GitHub Actions required to build and deploy the application. Click on **edit file** option to customize your workflow file.
+
+1. Under the **Code** tab of the repo click on **commits**. This view shows code commits that are associated with the specific deployment.
+
+1. Under the **Actions** tab of the repo, you can view the history of all the workflow runs of your repository.
+
+1. Select the **latest run** to view all the jobs that ran in the workflow.
+
+1. Click on the **jobs** to view the detailed logs of the workflow run. The logs contain useful information about the deployment process. They can be viewed both during and after deployments.
+
+1. Click on the **Pull request** tab to view all the pull requests on your repository
+
+## Clean up resources
+
+You can delete Azure App Service and other related resources when you don't need them anymore. Use the **Delete** functionality on the DevOps Starter dashboard.
+
+## Next steps
+
+When you configured your CI/CD process, GitHub workflow was automatically created. You can modify this workflow to meet the needs of your team. To learn more about the GitHub Actions and workflow, see:
+
+> [!div class="nextstepaction"]
+> [Customize GitHub workflow](https://docs.github.com/actions/configuring-and-managing-workflows/configuring-and-managing-workflow-files-and-runs)

articles/devops-project/_img/azure-devops-project-nodejs/full-dashboard.png

@@ -0,0 +1,174 @@
+---
+title: 'Tutorial: Deploy your Node.js app to Azure Web App by using DevOps Starter for GitHub Actions'
+description: DevOps Starter makes it easy to get started on Azure and to deploy your Node.js app to Azure Web App in a few quick steps.
+ms.author: ninallam
+ms.prod: devops
+ms.technology: devops-cicd
+ms.topic: tutorial
+ms.date: 08/25/2020
+author: ninallam
+---
+
+# Tutorial: Deploy Node.js app to Azure Web App using DevOps Starter for GitHub Actions
+
+DevOps Starter for GitHub Actions presents a simplified experience where you can choose a sample application to create a continuous integration (CI) and continuous delivery (CD) workflow to deploy to Azure. 
+
+DevOps Starter also:
+* Automatically creates Azure resources, such as a new Azure Web App.
+* Creates and configures a workflow in GitHub that includes a build job for CI.
+* The workflow also contains a deploy job for CD. 
+* Creates an Azure Application Insights resource for monitoring.
+
+In this tutorial, you will:
+
+> [!div class="checklist"]
+> * Use DevOps Starter to deploy a Node.js app
+> * Configure GitHub and an Azure subscription 
+> * Examine the GitHub workflow
+> * Commit changes to GitHub and automatically deploy them to Azure
+> * Configure Azure Application Insights monitoring
+> * Clean up resources
+
+## Prerequisites
+
+* An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/).
+
+## Use DevOps Starter to deploy a Node.js app
+
+DevOps Starter creates a workflow in GitHub. You can use an existing GitHub organization. DevOps Starter also creates Azure resources such as Web App in the Azure subscription of your choice.
+
+1. Sign in to the [Azure portal](https://portal.azure.com).
+
+1. In the search box, type **DevOps Starter**, and then select. Click on **Add** to create a new one.
+
+    ![The DevOps Starter dashboard](_img/azure-devops-starter-aks/search-devops-starter.png)
+
+1. Ensure that the CI/CD provider is selected as **GitHub Actions**.
+
+    ![CICD_provider](_img/azure-devops-project-nodejs/provider-selection.png)
+
+1. Select **Node.js**, and then select **Next**.
+
+1. Under **Choose an application Framework**, select **Express.js**, and then select **Next**. The application framework, which you chose in a previous step, dictates the type of Azure service deployment target that's available here. 
+
+1. Select the **Windows Web App**, and then select **Next**.
+
+## Configure GitHub and an Azure subscription
+
+1. **Authorize** GitHub and select an existing GitHub organization. 
+
+1. Enter a name for your **GitHub Repository**. 
+
+1. Select your Azure subscription services. Optionally, you can select **Change** and then enter more configuration details, such as the location of the Azure resources.
+ 
+1. Enter a Web App name, and then select **Done**. After a few minutes, the Azure Web App will be ready. A sample Node.js application is set up in a repo in your GitHub organization, a workflow is triggered, and your application is deployed to the newly created Azure Web App.
+
+   ![Enter_GH_details](_img/azure-devops-project-nodejs/gh-details.png)    
+
+   After it's completed, the DevOps Starter dashboard is displayed in the Azure portal. You can also navigate to the dashboard directly from **All resources** in the Azure portal. 
+
+   The dashboard provides visibility into your GitHub code repo, your CI/CD workflow, and your running application in Azure.   
+
+   ![Dashboard view](_img/azure-devops-project-nodejs/full-dashboard.png)
+
+DevOps Starter automatically configures a trigger that deploys code changes to your repo.
+    
+## Examine the GitHub workflow
+
+In the previous step, DevOps Starter automatically configured a full GitHub workflow. Explore and customize the workflow as needed. Take the following steps to familiarize yourself with the workflow.
+
+1. On the left of the DevOps Starter dashboard, select **GitHub workflow**. This link opens a browser tab and the GitHub workflow for your new project.
+    > [!NOTE]
+    > Do not rename the workflow file. The name of the workflow file should be **devops-starter-workflow.yml** for the dashboard to reflect the changes
+
+1. The workflow yaml file contains all the GitHub Actions required to build and deploy the application. Click on **edit file** option to customize your workflow file.
+
+1. Under the **Code** tab of the repo click on **commits**. This view shows code commits that are associated with the specific deployment.
+
+1. Under the **Actions** tab of the repo you can view the history of all the workflow runs of your repository.
+
+1. Select the **latest run** to view all the jobs that ran in the workflow.
+
+1. Click on the **jobs** to view the detailed logs of the workflow run. The logs contain useful information about the deployment process. They can be viewed both during and after deployments.
+
+1. Click on the **Pull request** tab to view all the pull requests on your repository
+
+## Commit code changes and execute CI/CD
+
+DevOps Starter creates a repository in GitHub. To view the repository and make code changes to your application, do the following:
+
+1. On the left of the DevOps Starter dashboard, select the link for your master branch. This link opens a view to the newly created GitHub repository.
+
+1. To view the repository clone URL, select **Clone** on the top right of the browser. You can clone your Git repository in your favorite IDE. In the next few steps, you can use the web browser to make and commit code changes directly to the master branch.
+
+1. On the left side of the browser, go to the **/Application/views/index.pug** file.
+
+1. Select **Edit**, and then make a change to some of the text.
+    For example, change some of the text for one of the tags.
+
+1. Select **Commit**, and then save your changes.
+
+1. In your browser, go to the DevOps Starter dashboard.   
+You should now see a GitHub workflow build job in progress. The changes you just made are automatically built and deployed via a GitHub workflow.
+
+1. After the deploy is completed, refresh your application to verify your changes.
+
+## Configure Azure Application Insights monitoring
+
+With Azure Application insights, you can easily monitor your application's performance and usage. DevOps Starter automatically configures an Application Insights resource for your application. You can further configure various alerts and monitoring capabilities as needed.
+
+1. In the Azure portal, go to the DevOps Starter dashboard. 
+
+1. At the lower right, select the **Application Insights** link for your app. The **Application Insights** pane opens. This view contains usage, performance, and availability monitoring information for your app.
+
+   ![The Application Insights pane](_img/azure-devops-project-github/appinsights.png) 
+
+1. Select **Time range**, and then select **Last hour**. To filter the results, select **Update**. You can now view all activity from the last 60 minutes. 
+    
+1. To exit the time range, select **x**.
+
+1. Select **Alerts**, and then select **Add metric alert**. 
+
+1. Enter a name for the alert.
+
+1. In the **Metric** drop-down list, examine the various alert metrics. The default alert is for a **server response time greater than 1 second**. You can easily configure a variety of alerts to improve the monitoring capabilities of your app.
+
+1. Select the **Notify via Email owners, contributors, and readers** check box. Optionally, you can perform additional actions when an alert is displayed by executing an Azure logic app.
+
+1. Select **OK** to create the alert. After a few moments, the alert appears as active on the dashboard. 
+
+1. Exit the **Alerts** area, and go back to the **Application Insights** pane.
+
+1. Select **Availability**, and then select **Add test**. 
+
+1. Enter a test name, and then select **Create**. A simple ping test is created to verify the availability of your application. After a few minutes, test results are available, and the Application Insights dashboard displays an availability status.
+
+## Clean up resources
+
+If you are testing, you can avoid accruing billing charges by cleaning up your resources. When they are no longer needed, you can delete the Azure virtual machine and related resources that you created in this tutorial. To do so, use the **Delete** functionality on the DevOps Starter dashboard. 
+
+> [!IMPORTANT]
+> The following procedure permanently deletes resources. The *Delete* functionality destroys the data that's created by the project in DevOps Starter in both Azure, and you will be unable to retrieve it. Use this procedure only after you've carefully read the prompts.
+
+1. In the Azure portal, go to the DevOps Starter dashboard.
+1. At the top right, select **Delete**. 
+1. At the prompt, select **Yes** to *permanently delete* the resources.
+
+You can optionally modify the workflow to meet the needs of your team. You can also use this CI/CD pattern as a template for your other repositories. 
+
+## Next steps
+
+In this tutorial, you learned how to:
+
+> [!div class="checklist"]
+> * Use DevOps Starter to deploy a Node.js app
+> * Configure GitHub and an Azure subscription 
+> * Examine the GitHub workflow
+> * Commit changes to GitHub and automatically deploy them to Azure
+> * Configure Azure Application Insights monitoring
+> * Clean up resources
+
+To learn more about GitHub Actions and workflows, see:
+
+> [!div class="nextstepaction"]
+> [Customize GitHub workflow](https://docs.github.com/actions/configuring-and-managing-workflows/configuring-and-managing-workflow-files-and-runs)

articles/devops-project/_img/azure-devops-project-nodejs/gh-details.png

@@ -1,10 +1,10 @@
 ### YamlMime:Landing
 
-title: Azure DevOps Starter documentation
-summary: Azure DevOps Starter presents a simplified experience where you bring your existing code and Git repository, or choose from one of the sample applications to create a continuous integration (CI) and continuous delivery (CD) pipeline to Azure.
+title: DevOps Starter documentation to deploy to Azure
+summary: DevOps Starter presents a simplified experience where you bring your existing code and Git repository, or choose from one of the sample applications to create a continuous integration (CI) and continuous delivery (CD) pipeline or workflow to Azure. DevOps Starter now supports creating GitHub actions workflows.
 
 metadata:
-  title: Azure DevOps Starter documentation
+  title: DevOps Starter documentation
   description: Bring your existing code and Git repository or choose a sample app to create a continuous integration (CI) and continuous delivery (CD) pipeline to Azure.
   ms.service: devops-project
   ms.topic: landing-page
@@ -16,22 +16,24 @@ metadata:
 
 landingContent:
   # Card
-  - title: About Azure DevOps Starter
+  - title: About DevOps Starter
     linkLists:
       - linkListType: overview
         links:
-          - text: What is Azure DevOps Starter?
+          - text: What is DevOps Starter?
             url: overview.md
       - linkListType: video
         links:
-          - text: Create CI/CD with the DevOps Starter video (8:53)
+          - text: Create CI/CD with the DevOps Starter using Azure DevOps (8:53)
             url: https://channel9.msdn.com/Events/Connect/2017/T174/player/
 
   # Card (optional)
-  - title: Create a CI/CD pipeline
+  - title: Configure CI/CD 
     linkLists:
       - linkListType: quickstart
         links:
+          - text: Node.js using GitHub actions
+            url: /azure/devops-project/devops-starter-gh-nodejs
           - text: .NET
             url: ./azure-devops-project-aspnet-core.md
           - text: Node.js
@@ -48,10 +50,12 @@ landingContent:
             url: ./azure-devops-project-go.md
 
   # Card
-  - title: Create release pipelines
+  - title: Deploy to Azure
     linkLists:
       - linkListType: tutorial
         links:
+          - text: Deploy your app to Azure Web App using GitHub actions
+            url: devops-starter-gh-web-app.md
           - text: Bring your own code with GitHub
             url: azure-devops-project-vms.md
           - text: Deploy your ASP.NET app to Azure Virtual Machines
@@ -61,4 +65,4 @@ landingContent:
           - text: Deploy your app to Azure Container Service and Kubernetes
             url: azure-devops-project-aks.md
           - text: Deploy your app to Azure Service Fabric
-            url: azure-devops-project-service-fabric.md
+            url: azure-devops-project-service-fabric.md