Demo-VSCode.md

# Provisioning and Deploying on Azure #

---

## Overview ##

This demo introduces how to deploy a Node.js application to Azure from GitHub. Additionally, you will see how to use Azure CLI to manage your resources in Azure.

### Goals ### In this demo, you will see how to:

1. Deploy a Node.js app to Azure

2. Manage your Azure resources using the Azure CLI

### Key Technologies ###

• Node.js
• Microsoft Azure
• Azure DocumentDB
• Visual Studio Code
• Azure CLI

### Setup and Configuration ### Follow these steps to set up your environment for the demo.

1. Get an Azure subscription

2. Get a GitHub Account

3. Download Visual Studio Code for your platform and follow the installation and setting up instructions.

4. Install Node.js.

5. Create a new repository in your GitHub account and import the code from the source\Begin folder. Details here.

6. Open a command prompt/terminal according to your platform in the source/Begin/Chatroom folder.

7. Run npm install to install all the missing dependencies.

   

   Installing Missing npm Packages

8. Install Azure CLI

## Demo ## This demo is composed of the following segments:

1. Provisioning Azure resources using Azure CLI
2. Deploying to Azure with GitHub

### Provisioning Azure resources using Azure CLI ### > **Note:** In the following section you will see how to use the Azure CLI tool to create the Azure resources for the web app. If you want you can use the [Azure Portal](https://portal.azure.com/) to perform the same operations.

1. In the command prompt/terminal run azure login to authenticate interactively.

   

2. Copy the code offered to you, above, and open a browser to http://aka.ms/devicelogin. Enter the code, and then you are prompted to enter the username and password for the identity you want to use. When that process completes, the command shell completes the log in process. It might look something like:

   

   Note: Interactive authentication is used in this case because it works with either school/work or Microsoft accounts. If you have a school/work account you can also use the non-interactive authentication method, as it's explained here

3. Run azure config mode arm to switch to Azure CLI Resource Manager commands.

4. Run azure group create -n "chatroomRG" -l "East US" to create a new Resource Group named chatroomRM.

   

   Creating a new Azure Resource Group

5. Open the file azuredeploy.parameters.json located in the source/Assets folder and enter parameter values suitable for your environment:

   • documentDbAccountName: the name of the DocumentDB account. Use only lowercase letters, numbers and '-' character.
   • siteName: the name of the Web App that you wish to create.
   • appServicePlanName: the name of the App Service plan to use for hosting the web app.
   • East US: If you want to use a different location for the Web App and the Service Plan.

   Note: You can also add the following parameters for additional configuration: pricingTier (The pricing tier for the hosting plan: Free, Standard, Basic, Shared) and workerSize (The instance size of the hosting plan: small, medium, or large).

   {
   	"$schema": "http://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
   	"contentVersion": "1.0.0.0",
   	"parameters": {
   		"databaseAccountName": { 
   		    "value": "documentDbAccountName"
   		},
   		"siteName": {
   		    "value": "siteName"
   		},
   		"appServicePlanName": {
   		    "value": "appServicePlanName"
   		},
   		"siteLocation": {
   		    "value": "East US"
   		}
   	}
   }

6. Run azure group deployment create -f ..\..\Assets\azuredeploy.json -e ..\..\Assets\azuredeploy.parameters.json chatroomRG chatroomWebappDeploy to execute the deploy and create the Azure resources (Azure Web App and Azure DocumentDB).

   

   Creating the Azure Resources

7. Go to the Azure Portal and check that the Resource Group was successfully provisioned.

   

   Checking Azure Resources

### Deploying to Azure with GitHub ###

1. Go back to the Azure Portal. In the Settings blade of your Web App, locate the Publishing section and click Continuous deployment.

   

   Setting up continuous deployment

2. In the Continuous Deployment blade, select Choose Source and then select GitHub.

   Note: The first time you will need to authorize Azure to access your GitHub information.

   

   Selecting GitHub as source

3. Select the repository you created in the setup section from the list, leave master as the branch to deploy and click OK.

   

   Selecting the repository

4. Now, the Deployments blade should open, else navigate to the Continuous deployment option again in the Settings blade. Show that the initial commit is the current active deployment.

   

   Showing the Deployments blade

   Speaking point: In order to make the continuous integration work, a deploy.cmd file must be provided. The Begin solution already includes a deployment script file, but in case you need to create a new one it can be achieved with the Azure CLI tool by running azure config mode asm to switch to Azure Service Manager and then azure site deploymentscript --node to generate a new deploy.cmd file

5. In the command prompt/terminal run code . to open the current directory (your local Git repository) with Visual Studio Code.

6. In the Explore view, open the index.jade file located in the views folder.

7. Update the main title.

   

   Updating the index view

8. Push the changes to GitHub using Visual Studio Code. To do this bring up the Git view by clicking on the Git icon in the View Bar on the side of Visual Studio Code. Enter a commit message (e.g. "Updated index view") and click on the Commit all button.

   

   Committing all changes

9. Now push the changes by clicking on the ellipsis button and then in the Push command.

   

   Pushing changes to GitHub

10. Go back to the Deployments blade for your Web App and show the new deployment entry.

    

    Showing the new deployment entry

11. Navigate to the site to show that its was updated.

    

    Showing the updated site

---

## Summary ##

By completing this demo, you have learned how to deploy a Node.js application to Azure from GitHub. Additionally, you have learned how to provision Azure resources using Azure CLI Resource Manager.

---