Azure DevOps for JavaScript Developers
Download as PPTX, PDF0 likes109 views
The document provides an overview of Azure DevOps and why JavaScript developers should use it. It discusses features like source control, boards for tracking work items, pipelines for continuous integration and delivery, and testing. It also includes a demo of setting up a sample Create React App project in Azure DevOps, including configuring a pipeline to build and deploy the app to an Azure App Service. Resources for learning more about Azure DevOps, using it with JavaScript projects, and understanding Git are also provided.
Azure DevOps for JavaScript Developers
- 1. for JavaScript Developers Presented by Sarah Dutkiewicz Cleveland Tech Consulting, LLC
- 2. Agenda What is Azure DevOps? Why should JavaScript Developers Care? Quick Intro to Source Control Look into Azure DevOps features Demo: Create-React-App in Azure DevOps Resources
- 3. What is this about?
- 4. Formerly Known As… Visual Studio Team Services (VSTS) Team Foundation Server (TFS)
- 5. High Level Overview Allows continuous integration (CI) and continuous delivery (CD) through automation using pipelines Can break projects into epics, features, backlog items, tasks, bugs, and other manageable chunks Can track work against the chunks Can store versions of code using Git
- 6. Benefits for Developers Track coding against work items – explains value to the client Code review and change tracking through source control Automate build and deployment processes Including webpack, linting, etc.
- 9. Basic Terms Repository – collection of related code stored together Branch - line of development Clone – make a copy of the repository Pull – get the changes from the server Push – send your changes to the server Commit – capture this set of code changing
- 11. Branches
- 12. Additional Branches Feature Branches – currently in development, typically running on local machines Release Branches – waiting to be deployed to production Hotfix Branches – for when things go wrong in production and they need fixed
- 13. Initial Flow 1. Create the repository 2. Clone it locally 3. Write code in the cloned folder 4. Add the changes to the staged changeset 5. Commit the changes 6. Push the changes
- 14. Flow Going Foward 1. Pull latest changes 2. Make more changes 3. Stage the changes 4. Commit the changes 5. Push the changes
- 15. Pull Requests Bring the code from one branch into another branch If you can’t push directly to a branch, a pull request is needed. Can be set for approvals, relying on code to build, relying on code to be tested, various other gates
- 16. Sample Pull Request Requirements Configurable by DevOps admin Example x # of reviewers Linked work items Comments resolved Successful build Code coverage check
- 17. Features of Azure DevOps Live Tour and Demo if Online
- 19. Overview Section Dashboards of overall project views Includes a Wiki
- 20. Boards Work Items Boards Backlogs Sprints Queries Plans Activity Feed Calendar Product Vision Estimate
- 21. Work Item Process - Agile Allows backlogs Allows bugs to have tasks Image taken from https://docs.microsoft.com/en-us/azure/devops/boards/work-items/guidance/choose-process?view=azure-devops
- 22. Work Item Process - Scrum Similar to Agile User Story vs Product Backlog Item Issue vs Impediment Image taken from https://docs.microsoft.com/en-us/azure/devops/boards/work-items/guidance/choose-process?view=azure-devops
- 23. Work Item Process - CMMI Capability Maturity Model Integration More formal processes and change management Image taken from https://docs.microsoft.com/en-us/azure/devops/boards/work-items/guidance/choose-process?view=azure-devops
- 24. Work Items
- 26. Commits
- 27. Sample Commit
- 29. Pipelines vs Releases Pipelines Run the linter Compile the code Run the tests Build the sites, change scripts, etc. Releases Deploy the code Can trigger releases based off of pipelines
- 30. Environments Allows you to manage multiple environments Supports virtual machines and Kubernetes
- 31. Deployment Groups Used for targeting multiple resources for parallel deployment Can be used for deploying to Azure or to local resources
- 32. Test Plans Test Plans Runs Used for manual testing Can create test cases for a manual tester to follow Can integrate with a browser plugin for running the tests Needs the Enterprise licensing
- 33. Artifacts Custom npm packages Can store different “views” Related: Get started with npm packages in Azure Artifacts: https://docs.microsoft.com/en- us/azure/devops/artifacts/get-started- npm?view=azure-devops&tabs=windows
- 34. Demo: Deploy CRA to Azure Prerequisites: Azure DevOps subscription create-react-app repo in subscription Windows App Service with Node runtime
- 35. Demo: Pipeline for CRA Azure Deploy Tell the pipeline to run a specific Node version npm install to get dependencies npm run build Publish Artifact of build
- 36. Demo: Release Setup for CRA Azure Deploy Set up artifact from build Demo using 1 stage
- 37. Demo: Release Details for CRA Azure Deploy
- 38. Demo: File structure on the App Service Site is in D:homesitewwwroot manifest.json precache-manifest.js static folder Most site files appear in here
- 39. Final Words of Advice
- 40. Build often.
- 41. If multiple people on the project, pull your main branch often.
- 42. Take advantage of CI/CD automation.
- 43. Resources
- 44. Azure DevOps Azure DevOps on YouTube: https://www.youtube.com/azuredevops Azure DevOps in Developer Community: https://developercommunity.visualstudio.com/topics/Azure+DevOps. html Azure DevOps Services Documentation: https://docs.microsoft.com/en-us/azure/devops/?view=azure-devops Azure DevOps Demo Generator: https://azuredevopsdemogenerator.azurewebsites.net/
- 45. Azure DevOps and JavaScript Configuring Azure DevOps Pipeline to build and deploy serverless…: https://www.darraghoriordan.com/2019/10/19/azure- pipelines-serverless-graphql-react-yaml/ Build, test, and deploy JavaScript and Node.js apps: https://docs.microsoft.com/en- us/azure/devops/pipelines/ecosystems/javascript?view=azur e-devops&tabs=code
- 46. Understanding Git Axosoft’s Gitflow Tutorial: https://blog.axosoft.com/gitflow/ Git Immersion: http://gitimmersion.com/ Git on Codecademy: https://www.codecademy.com/learn/learn-git GitHub Guides: https://guides.github.com/
Editor's Notes
- #2: Presented July 2, 2019 at the Ohio North SQL Server User Group