GitHub actionsdemos\/calculator site<\/a> and, if you\u2019re not already signed in to GitHub, sign in now.<\/li><\/ul>\n\n\n\nNote<\/strong>: This is the baseline project we will fork and use for this lab.<\/p>\n\n\n\nOn the actionsdemos\/calculator site<\/strong> page, click Fork<\/strong>, to fork the repository to your own GitHub account. If prompted, select the account to fork the repository into.<\/li><\/ul>\n\n\n\nOn the page displaying the forked repo, at the top menu, click Marketplace<\/strong>.<\/p>\n\n\n\n<\/p>\n\n\n\n
Note<\/strong>: The GitHub Marketplace<\/strong> provides a variety of tools from Microsoft and 3rd parties that help you extend your project workflows.<\/p>\n\n\n\nIn the Search for apps and actions<\/strong>, type Azure Pipelines<\/strong>, press the Enter<\/strong> key, and, in the list of results, click Azure Pipelines<\/strong>.<\/li><\/ul>\n\n\n\nOn the Azure Pipelines<\/strong> page, click Read more<\/strong> and read through the benefits of Azure Pipelines.<\/p>\n\n\n\n<\/p>\n\n\n\n
Note<\/strong>: The Azure Pipelines offering is free for anyone to use for public repositories, and free for a single build queue if you\u2019re using a private repository.<\/p>\n\n\n\nOn the Azure Pipelines<\/strong> page, click Install it for free<\/strong>. If you have multiple GitHub<\/strong> accounts, select the one you forked the calculator to from the Switch billing account<\/strong> dropdown.<\/li><\/ul>\n\n\n\nOn the Review your order<\/strong> page, click Complete order and begin installation<\/strong>.<\/p>\n\n\n\nOn the Install Azure Pipelines<\/strong> page, use the default option All repositories<\/strong> and click Install<\/strong>.<\/p>\n\n\n\n<\/p>\n\n\n\n
Note<\/strong>: You have the option to specify repositories to include, but for the purposes of this lab, just include all of them. Note that Azure DevOps requires the listed set of permissions to fulfill its services.<\/p>\n\n\n\nIf prompted, authenticate with your GitHub password to continue.<\/li><\/ul>\n\n\n\nWhen prompted, on the Setup your Azure Pipelines project<\/strong> page, in the Select your Azure DevOps organization<\/strong> dropdown list, select your Azure DevOps account and click Create a new project<\/strong>.<\/p>\n\n\n\nWhen prompted, on the Setup your Azure Pipelines project<\/strong> page, in the Project name<\/strong> textbox, type Integrating External Source Control with Azure Pipelines<\/strong>, leave the Project visibility<\/strong> set to Private<\/strong>, and click Continue<\/strong>.<\/p>\n\n\n\nOn the Azure Pipelines by Microsoft would like permission to<\/strong> page, click Authorize Azure Pipelines<\/strong>.<\/p>\n\n\n\n<\/p>\n\n\n\n
Task 2: Configuring your Azure Pipelines project<\/strong><\/p>\n\n\n\nIn this task, you will configure the Azure Pipelines project based on the fork of the GitHub repo you created in the previous task.<\/p>\n\n\n\n
Note<\/strong>: You are now on the Azure DevOps site and need to set up your Azure Pipelines project.<\/p>\n\n\n\nIn the Azure DevOps portal, click on Pipelines<\/strong> in the navigation panel on the left.<\/li>Click on the Create pipeline<\/strong> button at top right.<\/li><\/ul>\n\n\n\nOn the Select a repository<\/strong> pane of the Pipelines<\/strong> view in the Azure DevOps portal, select the fork of the GitHub calculator repository you created in the previous task.<\/p>\n\n\n\nNote<\/strong>: Azure Pipelines will analyze your project in an attempt to determine if any existing templates would be a good fit. In this case, the recommended template is for Node.js<\/strong>, which is perfect for our needs. Some alternative templates are also suggested, although the recommended one is the best for this lab.<\/p>\n\n\n\nOn the Configure your pipeline<\/strong>, select Node.js<\/strong>.<\/li><\/ul>\n\n\n\n<\/p>\n\n\n\n
Note<\/strong>: The build pipeline is defined as YAML<\/strong>, a markup syntax well-suited to defining processes like this because it allows you to manage the configuration of the pipeline like any other file in the repo. It\u2019s a pretty simple template that identifies the pool to pull a VM from for building, the process to install Node.js for building, and the actual build itself.<\/p>\n\n\n\nOn the Review your pipeline YAML<\/strong>, click Save and run<\/strong> to save the pipeline and queue a new build.<\/li><\/ul>\n\n\n\nOn the Save and run<\/strong> pane, accept the default settings and click Save and run<\/strong>.<\/p>\n\n\n\n<\/p>\n\n\n\n
Note<\/strong>: For the purposes of this lab, you can commit this new file directly to the master branch.<\/p>\n\n\n\nNote<\/strong>: It will take a moment for the pipeline to complete. During this time it will configure the build agent, pull in the source from GitHub, and build it according to the pipeline definition.<\/p>\n\n\n\nOn the Summary<\/strong> tab of the build job\u2019s pane, verify that the build completed successfully.<\/li><\/ul>\n\n\n\n<\/p>\n\n\n\n
Task 3: Modifying a YAML build pipeline definition<\/strong><\/p>\n\n\n\nIn this task, you will modify the YAML build definition in the forked GitHub repository and track the build process triggered by your modification.<\/p>\n\n\n\n
Note<\/strong>: While the default pipeline is a great start, it doesn\u2019t do everything we would like to have automated. For example, it would be great if it also ran our tests to confirm that the changes don\u2019t create bugs. Let\u2019s return to GitHub where we can edit the YAML by hand.<\/p>\n\n\n\nOn the Summary<\/strong> tab of the build job\u2019s pane, next to the Repository and version<\/strong> label, right-click the entry representing the GitHub project repo hosting the fork you created earlier in this lab and select Open link in new tab<\/strong>. This will open a new browser tab, displaying the GitHub page with the content of the fork.<\/li><\/ul>\n\n\n\nNote<\/strong>: Since this lab will involve stepping back and forth between GitHub and Azure DevOps, it\u2019ll be easier to keep a browser tab open to each.<\/p>\n\n\n\nOn the GitHub page displaying the content of the fork, locate and click the entry representing the file azure-pipelines.yml<\/strong>. This will automatically open the file and display its content.<\/li>On the master\/calculator\/azure-pipelines.yml<\/strong> page, in the upper right corner of the pane displaying the file content, click the Edit this file<\/strong> icon in the shape of a pencil.<\/li><\/ul>\n\n\n\nNote<\/strong>: Our project already contains tests written using Mocha so we just need to execute them in our pipeline.<\/p>\n\n\n\nTo add the test run, add the npm test command directly below the npm run build command, with the same indentation. In addition, update the displayName entry to ‘npm install, build, and test’ to clearly indicate what each task of the build is doing:<\/li><\/ul>\n\n\n\nCodeCopy<\/p>\n\n\n\n
npm test\ndisplayName: 'npm install, build, and test'\n<\/code><\/pre>\n\n\n\nScroll to the bottom of the page, replace the default commit message with Adding npm test<\/strong>, and click Commit changes<\/strong>.<\/p>\n\n\n\n<\/p>\n\n\n\nNote<\/strong>: Again, it\u2019s acceptable to commit this change directly to the master branch considering that this is a lab environment.<\/p>\n\n\n\nSwitch back to the browser tab displaying the Azure DevOps<\/strong> portal and use the breadcrumb navigation to navigate to the Pipelines<\/strong> pane of the Pipelines<\/strong> view.<\/li>Verify that the new build triggered by the update already appears on the Recent<\/strong> tab in the Recently run pipelines<\/strong> list. Click the entry corresponding to the pipeline, on the Runs<\/strong> tab, select the most recent run, and, in the Jobs<\/strong> section, click the Job<\/strong> entry.<\/li><\/ul>\n\n\n\nOn the pane displaying job details, click on individual tasks of the job and follow it through to completion.<\/li><\/ul>\n\n\n\n<\/p>\n\n\n\n
Task 4: Proposing a change via GitHub pull request<\/strong><\/p>\n\n\n\nIn this task, you will propose an invalid change and review the results of a build triggered by a pull request.<\/p>\n\n\n\n
Note<\/strong>: One of the great benefits of this pipeline setup is that we now have a quality gate that\u2019s automatically run every time someone commits a change. This makes it much easier to manage a project that could have any number of contributions coming in at various levels of quality.<\/p>\n\n\n\nSwitch back to the browser tab displaying the GitHub page displaying the content of the azure-pipelines.yml<\/strong> file, navigate back to the page listing content of the forked repo and click Go to file<\/strong>.<\/li><\/ul>\n\n\n\nAt the calculator\/<\/strong> prompt, type arithmeticController.js<\/strong> and, in the list of results click api\/controllers\/arithmeticController.js<\/strong>. This will automatically redirect the browser session to the master\/calculator\/api\/controllers\/arithmeticController.js<\/strong> page, displaying the content of that file.<\/li><\/ul>\n\n\n\nNote<\/strong>: This controller contains the core functionality of the app. However, the code for the add<\/strong> operation isn\u2019t completely clear. Put yourself in the position of someone with good intentions, but a lack of experience with JavaScript. They might identify this as an opportunity to help out by cleaning up the code to make it better.<\/p>\n\n\n\nOn the master\/calculator\/api\/controllers\/arithmeticController.js<\/strong> page, in the upper right corner of the pane displaying the file content, click the Edit this file<\/strong> icon in the shape of a pencil.<\/li>Change the line ` \u2018add\u2019: function(a,b) { return +a + +b },to \u2018add\u2019: function(a,b) { return a + b },`.<\/li><\/ul>\n\n\n\nNote<\/strong>: This is an incorrect change that would result in invalid outcome.<\/p>\n\n\n\nScroll to the bottom of the page, replace the default commit message with Modifying the add function<\/strong>, select Create a new branch<\/strong>, set its name to addition-cleanup<\/strong>, and click Propose file change<\/strong>.<\/li><\/ul>\n\n\n\nOn the Open a pull request<\/strong> page, click Create pull request<\/strong> to initiate the process of getting your untested changes into production code.<\/p>\n\n\n\nNote<\/strong>: Azure DevOps will detect the change and start the build pipeline. This will result in failed checks, triggering an update the GitHub UI.<\/p>\n\n\n\nNote<\/strong>: Return to your original mindset of \u201cproject owner\u201d.<\/p>\n\n\n\nOn the Modifying the add function #1<\/strong> pull request page, in the All checks have failed<\/strong> section, click Details<\/strong> to learn more.<\/li><\/ul>\n\n\n\nReview the ANNOTATIONS<\/strong> section and click the link View more details on Azure Pipelines<\/strong> directly below it. This will open a new browser tab displaying the failed run of the job in the Azure DevOps portal.<\/p>\n\n\n\nOn the failed job pane in the Azure portal, click the Job<\/strong> entry to display its details.<\/p>\n\n\n\nIn the list of job tasks, click the npm install, build, and test<\/strong> task to view its output.<\/p>\n\n\n\nLocate the section that lists out failing tests.<\/li><\/ul>\n\n\n\nNote<\/strong>: It might not be immediately clear why the tests failed, but all of the history we\u2019ve accrued in the pipeline makes it easy to identify that something from this new pull request is the cause. The next step will be to figure out why \u201c21 + 21\u201d produced \u201c2121\u201d instead of the expected \u201c42\u201d.<\/p>\n\n\n\nClose the tab displaying the failed run of the job in the Azure DevOps portal.<\/li><\/ul>\n\n\n\n<\/p>\n\n\n\n
Task 5: Using the broken pull request to improve the project<\/strong><\/p>\n\n\n\nIn this task, you will correct the invalid changes introduced in the pull request created in the previous task.<\/p>\n\n\n\n
Note<\/strong>: Return to your original mindset of \u201cproject owner\u201d.<\/p>\n\n\n\nReturn to the browser tab displaying the Modifying the add function #1<\/strong> GitHub page and return to the main page listing the content of the forked repo.<\/li>At the top of the pane containing the listing of the repo files, Pull requests<\/strong> and then click the entry representing the most recent pull request.<\/li>On the Modifying the add function #1<\/strong> GitHub page, click the File changed<\/strong> tab and review its content.<\/li><\/ul>\n\n\n\nNote<\/strong>: It appears that the changes were made by someone who didn\u2019t realize that the plus signs before each variable were necessary to coerce those variables to their number representations. By removing them, JavaScript interpreted the middle plus sign as the string concatenation operator, which explains why 21 + 21 = 2121 in the failed test.<\/p>\n\n\n\nOn the Modifying the add function #1<\/strong> GitHub page, click the ellipsis symbol directly under the Review changes<\/strong> button and, in the drop-down menu, click Edit file<\/strong>.<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture1-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture2-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture3-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture4-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture5-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture6-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture7-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture8-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture9-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture10-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture11-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture12-7.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture13-6.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture14-5.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture15-6.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture16-5.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture17-5.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture18-5.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture19-4.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture21-3.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture22-3.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture23-2.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture24-2.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture25-2.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture26-2.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture27-1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture28-1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture29-1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/04\/Picture30-1.png\")
<\/figure>\n\n\n\n