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.

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.

7. Source Control

8. Why?
Change tracking
Accountability
Versioning
Code review

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

10. Repository
Sample Repository
Including create-react-app

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

18. Key Groupings
Overview
Boards
Repos
Pipelines
Test Plans
Artifacts

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

25. Repos
Files
Commits
Pushes
Branches
Tags
Pull Requests

26. Commits

27. Sample Commit

28. Pipelines
Pipelines
Environments
Releases
Library
Task groups
Deployment groups

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/

47. Twitter: @sadukie
LinkedIn:
https://linkedin.com/in/sadukie
Any Questions?