01-developer-environment

Developer Environment (NodeJS)

Overview

In this lab, you will set up an Office365 trial subscription, an Azure trial subscription, configure your Azure subscription for the DevCamp, and provision a virtual machine in the subscription to use for development of further labs.

Objectives

In this hands-on lab, you will set up an Office365 developer subscription, and Azure trial subscription, and an Azure-based virtual machine for the development environment for subsequent labs in the DevCamp. To expedite the process, we've prepared a Windows image that you will copy into your own environment, start the virtual machine and connect to it. You will then configure the components for Azure development.

• Set up an Office365 trial subscription
• Set up an Azure trial subscription
• Configure your Azure subscription for DevCamp
• Create an Azure Virtual Machine for remote development
• Connect to the Azure Virtual Machine and configure it for development
• Review the features of the Azure Portal

Prerequisites

You will need a cell phone and credit card for identity verification. The credit card will not be charged unless you remove the spending cap on the subscription you will create.

Exercises

This hands-on-lab has the following exercises:

• Exercise 1: Set up Office 365 trial subscription
• Exercise 2: Set up Azure trial subscription
• Exercise 3: Start your VSTS trial subscription
• Exercise 4: Configure your Azure subscription for DevCamp
• Exercise 5: Use an Azure Virtual Machine for remote development
• Exercise 6: Deploy Shared API application
• Exercise 7: Azure Portal walkthrough
• Exercise 8: View the resources you created

---

Exercise 1: Set up Office 365 trial subscription

1. In your browser, go to https://products.office.com/en-us/business/office-365-enterprise-e3-business-software and click the link that says "Free Trial", which will take you to this page:

   

2. Enter the information requested, and click Just one more step which will take you to the following page:

   

3. Choose a userid and a tenant name for your trial. In this case I chose devcampross, but you can choose anything you'd like, as long as it is unique. You'll also have to choose a password, and click Create my account. Next you will see this page, which asks for a phone verification:

   

4. After this process is complete, your O365 trial will be set up, and you'll see this page:

   

   Make note of your user id, which will be used to sign onto the Azure portal later. Click You're ready to go, which will take you to the following screen:

   

   Click on the admin app icon, which will open the Office365 admin center page in your browser. It will look like this:

   

   If you'd like to see the welcome tour click Next, or simply close the dialog box.

Stay on this page until the next exercise.

---

Exercise 2: Set up Azure trial subscription

1. Next, we want to set up an Azure subscription, which can be accessed via the Azure Active Directory. At the bottom of the screen, click Admin centers, and then click Azure AD. This will open up a new browser tab showing this page:

   

   If you are using an Azure Pass, please navigate to http://www.microsoftazurepass.com/. If you are not using an Azure Pass, please skip to the next step.

   

   Enter the code that is provided by your facilitator into the text box, then click the Submit button

2. Click on Azure Subscription to be taken to the page for creating a new trial subscription

   

   Enter the requested information and click the Next button.

3. Enter the information about you, and verify your identity by phone. Also you'll need to verify via credit card. Your credit card will not be charged unless you remove the spending cap from your subscription.

   

4. Finally after the verification process, you'll have to agree to the terms of the trial subscription:

   

5. it will take a few moments to set up your azure subscription.

   

6. When the subscription set up process is done, you can click on Start managing my service to open the Azure portal, which will look like this:

   

---

Exercise 3: Start your VSTS trial subscription

1. In your browser, go to http://www.visualstudio.com/team-services, and click on sign in in the upper right corner. This should take you to a screen that looks like this:

   

   click on Use your benefits, and this window will pop up:

   

   Click Accept to access your Visual Studio Dev Essentials benefits.

---

Exercise 4: Configure your Azure subscription for DevCamp

1. We have created an Azure Resource Group template that will configure the resources you need in Azure for the DevCamp. To deploy these resources in your Azure subscription, do control-click on this button:

   

2. You should see a new tab open in your browser and open the Azure portal, with a blade that looks like this:

   

   Name your resource group DevCamp, choose a location for your deployment (please do NOT choose USGov or West India - they don't have all the services we'll need), check the box that indicates you agree to the terms and conditions, and click the Purchase button.

   The Resource Group template will start deploying, and the portal will pin a tile to the dashboard showing the status:

   

3. This will take approximately 20 minutes to complete. Please don't continue on until the template has completed. While it is working, it is useful to understand what this process is doing. In a later session, we will take a look at Azure Resource Group templates, and how to manage your infrastructure the same way you manage your code. As a short introduction, a template is a JSON file that contains definitions for the resources you want in your resource group. When you apply the resource group template, Azure will apply the template to your Azure resource group, and create the resources you have specified in the template. This makes it easy to maintain the infrastructure definition in the JSON text file.

   In the resource group template we have created for DevCamp, there are several types of resources including Web Apps and Virtual Machines. The complete list of resources deployed is detailed in Exercise 8 of this Hands-On-Lab. Resource Group Templates are usually fairly quick to apply - the reason this one takes so long is that we are creating a Windows Virtual machine and installing all the tools you will need for the DevCamp including Visual Studio, the Java development kit, and other software resources.

   When the Resource Group creation is done, go visit the resource group by clicking Resource Groups on the left navigation

   

   Then click on your Resource Group name

   

---

Exercise 5: Use an Azure Virtual Machine for remote development

The Azure resource group template will have created a virtual machine that can be used for remote development on Windows. Exercise 6 describes the configuration for the Windows virtual machine, which would be appropriate for any of the languages.

Rather use another environment such as a Macbook instead of a VM in Azure? Please see this note

1. In the DevCamp resource group, select the DevCamp DevTest Lab.

   

2. Find the Windows virtual machine in your DevTest lab. The name will start with the prefix windev:

   

3. Select the machine name and open the virtual machine blade then click Connect to connect to the machine using Remote Desktop:

   

   This will download a remote desktop connection file, and when you open it, remote desktop on your local machine will attempt to attach to your virtual machine. When the windows security dialog pops up, click on the more choices link, then choose use a different account

   

4. Use the following credentials to log on to the machine:

   • User Name: \l-admin
   • Password: Devc@mp2016!

   

   It would be wise to change the password in the virtual machine.

5. When Remote Desktop is connected, you will see the Server Manager initially. We will want to turn of IE Enhanced Security to make accessing the web within the VM easier. First click Local Server;

   

   Then click On next to "IE Enhanced Security Configuration"

   

   A dialog box pops up - choose to turn enhanced security off for administrators.

6. All code needed for the hands on labs are stored in a repository in GitHub. To clone the DevCamp GitHub repository to this development machine, open a terminal window. On Windows, click on the Start menu, and type cmd

   On some high resolution monitors (High DPI), you will notice that the icons and command line windows appear small. If this is an issue, you can download Remote Desktop Connection Manager 2.7

   Change directory to the root using cd c:\

   Type git clone https://github.com/AzureCAT-GSI/DevCamp.git :

   

   All of the content for this DevCamp will now be located in c:\DevCamp\.

7. We will use the Microsoft Azure Cross Platform Command Line ("Azure XPlat CLI") to interact with our subscription. The CLI installs via Node.js; open to a terminal window and run:

   node -v

   Verify that the version is v6 or greater. Then, install the Azure CLI

   npm install azure-cli -g

   If you are running the labs on your local machine, please also ensure that the version of Node.js installed is v6 or greater

8. If the Node version on your machine is less than v6, we will need to update the version. In a browser window inside your development Virtual Machine, load http://nodejs.org, and click on the Other Downloads link under the Latest Features tile on the right side of the page:

   

   In the next page, click on 32 bit next to Windows Installer (.msi), download the MSI and run the installation.

   

For users wanting to use a machine for the DevCamp labs other than a VM in Azure, such as a Mac laptop, please feel free to do so. The lab instructions have been written in a way to minimize the operating system, and although many screenshots show Windows Server, all labs can be completed in Windows, OSX, or Linux on local laptops or Virtual Machines. Please have the following requirements before beginning:

• NodeJS version 6 or greater - We make extensive use of ECMAScript 6/ECMAScript 2015 which is error on earlier versions of Node. Download from the Node website, or use NVM with a recent version. To ensure this requirement is met, please run node -v and ensure v6+

• Azure XPlat CLI - Install the Microsoft Azure Cross Platform Command Line by running npm install -g azure-cli and login to your subscription with azure login. Instructions

There is a new python-based command line interface in preview - we are not going to use that one. Please follow these instructions to install the node-based command line interface

• Visual Studio Code - You can use any editor of your choosing, but be aware that the lab makes a heavy assumption that VSCode will be used. Download

• Storage Explorer - Grab the cross-platform Microsoft Azure Storage Explorer to interact with files stored in Azure Storage accounts.

---

Exercise 6: Deploy shared API application

1. Open a browser and navigate to https://portal.azure.com Locate the app service named incidentapi.... in the resource group blade:

   

2. Click on the app service, which will bring up the app service blade. Click on Browse at the top:

   

   A new browser tab will open.

   If the page looks like the image displayed below, this means the API was automatically deployed from GitHub, and you can skip the rest of this exercise.

   

   If the page looks like the image below, continue with this exercise

   

3. In the Azure portal, select the API Application (noted with the icon)

   

4. Select deployment options

   

5. If the app deployment is connected, click disconnect

   

6. Select setup

   

7. Select external repository.

8. Paste the following in the Repository URL field https://github.com/AzureCAT-GSI/DevCamp.git

   

9. Select OK

---

Exercise 7: Azure Portal walkthrough

1. On your local machine or the virtual machine in Azure, open a browser window and go to the main Azure portal page, http://portal.azure.com. Log in with the credentials you supplied in the subscription sign up exercise. You should see the Azure portal, similar to this:

   

   There is a lot to notice on this screen. At the upper left corner, the icon under the Microsoft Azure banner allows you to shrink and expand the left bar:

   

   Under that, clicking on the + New item will allow you to create new deployments, virtual machines, databases, etc:

   

2. On the left you will see a list of the Azure services that you can use on the left hand side. Notice that this list will scroll up and down to reveal more services, and finally an item that says More Services >:

   

   You can click on any of these and see what items are deployed, and easily create new deployments.

   At the top of the window you have a search box where you can search for any resources:

   

3. The bell icon is for notifications, and in this screenshot, it indicates that there are two notifications pending:

   

   Clicking on the bell will show you the notifications:

   

   If you click on one of the notifications, you can go to the list of all current notifications:

   

4. The gear at the top of the screen lets you set the color palate for the portal, whether or not there will be animations, and other options for the portal itself:

   

5. The "smiley face" button allows you to send feedback to Microsoft:

   

   Clicking on the icon will give you a form to let us know about your experience:

   

6. The Question icon will give you the ability to enter a support case, manage support requests, or get further information on Azure.

   

7. Your login name and company name on the upper left hand corner has two functions:

   

   If you hover the mouse over your name, you'll get information about your login, the directory and subscription:

   

   If you click on your name, you can sign out, change your password, view your permissions, and view your bill:

   

8. Next we will look at the resource group we set up with the template. Click on Resource Groups on the left hand side:

   

   then, click on the resource group that you created:

   

   A new blade will open with the overview of all of the contents of the resource group listed:

   

   You can click on any of the items on the left hand side which will view or manipulate settings for the resource group as a whole. If you click on any of the individual resources in the center, you will get more information on that resource.

9. Azure automatically logs changes to resource group and who made those changes. Clicking Activity log on the left of the blade will allow you to query the log, and clicking on any logged items will give you additional information on that entry:

   

10. Clicking on Automation script will allow you to view, edit or download the resource group template that would create this resource group.

    

11. The Windows VM uses DevTest labs to manage the start up and shut down of the machine. To change the start up schedule, click on the DevTest Lab icon and select Policy Settings

    

12. Select Auto-shutdown

    

13. Modify the Auto-shutdown schedule based on your time zone

    

14. The machine does not automatically turn on. To enable this, in the Policy Settings blade, select Auto-Start

    

15. Change the schedule based on your time zone.

    

It is particularly useful to create resources in the Azure portal, then save or edit the resource group template. Resource group templates will be explained further in a later lab.

Exercise 8: View the resources you created

Going back to the list of resources in the resource group, we'll go through the list of each resource, with a description. Feel free to click on the resource and view its detail blade.

Also, our resource group template has added a random string to the end of many of the resources. In this description, we'll replace that string with .... (order of resources may vary)

1. incidentcache....: This is the Redis cache that we use from the application to make data access faster. The modern-cloud-apps hands on lab adds support to the application to be able to leverage the cache.

2. DevCamp This is the DevTest lab that is used to manage the VM images and artifacts

3. incidentdb....: This is the documentDB database that will hold the JSON incident documents stored by the application.

4. DevCamp.... This is the Azure Key Vault that is used to manage secure credentials

5. DevCampVnet: This is an Azure Virtual Network, which will allow components of the resource group to communicate as they were on the same physical network.

6. addevcamp....: Storage account for storing artifacts for the DevTest labs.

7. ddevcamp....: Storage account for storing the VHDs for images used the DevTest labs..

8. dpdevcamp....: Storage account for storing for VHDs for the machines DevTest labs..

9. incidentblobstg....: Storage account for storing the uploaded images and the Azure Queue, from the modern-cloud-apps lab.

10. incidentdiagstg....: Storage account for storing diagnostics from the services in the resource group.

11. incidentappplan....: App Service Plan, which defines how the app services in the resource group will be configured.

12. dotnetapp....: App service for running the .NET application when deployed to the cloud. If you are not using .NET in the labs, you can safely delete this.

13. incidentapi.....: App service for running the API service that provides a REST API to the web applications.

14. javaapp....: App service for running the Java application when deployed to the cloud. If you are not using Java in the labs, you can safely delete this.

15. nodejsapp....: App service for running the Node.js application when deployed to the cloud. If you are not using Node.js in the labs, you can safely delete this.

    In the second Resource group, there additional resources created

    

    

16. windev....: This is the Windows server virtual machine that we are using as a development machine for these hands-on-labs. You can delete this machine after the developer-environment lab if you are using an on-premises/local machine for development.

17. WindowsDevPip: This is a public IP that will allow the Windows development virtual machine to communicate with the Internet (eg. via Remote Desktop). If you delete the Windows virtual machine, you can safely delete this.

18. windev...NetworkInterface: This is a public network interface that will allow the Windows development virtual machine to communicate on the network. If you delete the Windows virtual machine, you can safely delete this.

---

Clean Up

Please refer back to this section after the DevCamp concludes

To clean up a Resource Group, we typically simply delete the Resource Group. However, since we are using an Azure DevTest Lab to manage our Virtual Machine, we have an additional step.

Azure DevTest Labs create a series of Resource Locks that prevent accidental deletion of resources. Locks allow us to safeguard against accidental deltion of critical resources, and to delete the Resource Group we first need to delete the locks.

Open your DevCamp Resource Group, and in the navigation pane select Locks. You should see the 5 locks created by the DevTest Lab. To delete, select the three dots to the right of the Notes column, and select Delete.

After all 5 locks have been deleted you are able to delete the resource group. Navigate to the Overview tab and select Delete. The Resource Group will take several minutes to remove, but when finished all resources will no longer accrue charges in your subscription.

---

Summary

In this hands-on lab, you learned how to:

• Set up an Office365 developer subscription
• Set up an Azure trial subscription
• Configure your Azure subscription for DevCamp
• Create an Azure Virtual Machine for development
• Connect to the Azure Virtual Machine and configure it for development
• Use the Azure portal to view the resources that you created

After completing this module, you can continue on to Module 2: Building modern cloud apps

View Module 2 instructions for Node.JS

---

Copyright 2016 Microsoft Corporation. All rights reserved. Except where otherwise noted, these materials are licensed under the terms of the MIT License. You may use them according to the license as is most appropriate for your project. The terms of this license can be found at https://opensource.org/licenses/MIT.