Continuous Builds with your GitHub projects using Azure Pipelines

hi my name is Edward Thompson I'm a
program manager at Microsoft working on
Azure DevOps and today I'd like to
introduce you to
Asher pipelines now available in the
github marketplace Azure pipelines is
the premier continuous integration
service for everything from open source
projects to enterprise software it
supports any language on any platform so
it supports your project whether that's
a nodejs app Java Ruby on Rails net or
heck even old schools see an azure
pipelines provides build agents for you
for Linux Windows and Mac OS so that you
can build your project on every platform
and they're hosted in the Microsoft
cloud so that you don't have to manage
them
best of all Azure pipeline's provides a
free pipeline for your project with up
to 1,800 minutes of build time per month
and it's even more generous for open
source projects as your pipelines
provides no limit on the build minutes
for open source and you get up to 10
pipelines in parallel for free that's
why I rely on Azure pipelines from my
open source projects especially one
project that you may not have heard of
its called Lib get 2 but just because
you haven't heard of it doesn't mean you
haven't used it Lib get to is the
project that get hosting providers like
Azure repos and github use to manage
pull requests and as a maintainer of an
open source project that makes up the
critical infrastructure of software
development it's crucial to me that we
have a robust and reliable continuous
integration service being able to
validate changes ensuring that pull
requests build across all the platforms
we support and that our tests pass for
every contribution is crucial for my
open source project and it's crucial for
your software projects too so I'm going
to show you how you can add Azure
pipelines as a continuous integration
build for your software project to build
and test the master branch of your code
and validate all requests let's take a
look at how easy it is to get started
with Azure pipelines
here I have a very simple project it's a
pocket calculator well sort of it's
actually a nodejs application that looks
like a retro calculator the kind that we
nerds had back in the day before the
phone in your pocket could calculate
integrals and of course I published this
project out on github I'm excited to
share it with the world in hopes that
other people will use it and maybe
contribute back to it maybe somebody
will find a bug in my code or maybe
somebody will theme it up so it looks
more like the pocket calculator that
they remember from their youth but if
I'm going to take contributions I need
to have a build pipeline configured so
that when somebody opens a pull request
I can make sure that their change is
billed and that all the tests pass and
the easiest way to do this is with as
your pipelines all I have to do to get
started is to go to the github
marketplace just look up in the top
banner of github calm and click
marketplace there are a bunch of great
services here to integrate with github
but for continuous integration builds we
want azor pipelines so I'll just type
that here in the search box
and then click on the search results I
can click on read more to get more
details about Azure pipelines and when
I'm ready to get started I can just
click to setup a new plan in the pricing
information I'm reminded that Azure
pipelines is completely free for open
source projects so just by selecting the
free plan you get unlimited billed
minutes across up to 10 simultaneous
build queues it's the most generous
offer for building open source projects
and it's free for private projects as
well private projects get a single
parallel job with up to 1,800 minutes of
build time included every month and if
you want to scale up beyond that you can
add additional private build agents but
for open source projects it's still free
for unlimited minutes when you're ready
to get started just click install it for
free on the next page you'll choose
where you want to install as your
pipelines you can install it directly to
your github account or into a github
organization which you might have if
you're part of an open-source project or
a company I've actually created an
organization for my application so I'm
going to select to install it there then
I can click complete my order and begin
installation on the next page you'll
need to verify that you want to install
as your pipelines this permission is
needed so that as your pipelines can
read your repository and write its
configuration into your github account
this adds the continuous integration
workflow and adds builds into pull
requests as a safety precaution you may
need to enter your github password here
to confirm this access
and finally you'll need to sign in with
your Microsoft account and if you don't
have a Microsoft account yet you can
just click to create one it's free and
easy but here I'll just type in my
username and password
and once I'm logged in as your DevOps
will set me up with a new account to
build my github project once my account
is created it will bring me to this new
pipeline designer here the first thing
that I need to do is make sure that the
correct repository to build is selected
that's easy
since I only have one in my organization
and that's my calculator app so I'll
click on it when I do that as your
pipeline's will analyze my repository to
try to figure out what kind of project I
have checked in and how to build it it's
detected here that I have a no js'
project which I do it also selects some
other project types in case it gets
wrong if I were using react or view I
could select those templates if I were
using webpack I could select that I
could even design my own pipeline from
scratch but of course I don't need to
let's take a look at the node template
that Azure pipeline's has recommended so
when I click on it it shows me the build
yeah Mille Azure pipelines uses a yamo
configuration file to describe the build
pipeline it's a technique called
configuration as code which is great
because you can check in the build
description right next to the code that
it builds so as your code changes and as
the build needs to change to support
that those changes to the build
configuration get version right
alongside your source code so as your
pipeline shows me this yanil up front
before it finishes creating the pipeline
this is an opportunity to make sure that
this matches what I expect from my
project and it is it's just building my
nodejs project with NPM so this is
perfect so to complete the setup I just
need to click save and run this actually
adds the yeah Mille file directly to my
repository on github and sets up an
azure pipeline's build that reads it
I could also select to use a pull
request which would let other
contributors to the project look at the
yeah Mille before it goes live and pull
requests are definitely a best practice
but since I'm just getting started with
this project and I don't have any other
contributors yet I'm happy to just click
Save and
run and commit it directly
and once I do that you can see that this
actually starts a build of our project
it's going to find a free Linux build
agent in our cloud hosted pool of build
machines it's going to download my
project's repository from github and
then it's going to run the build script
which runs npm install then npm run
build i can actually watch the console
output from the build as it runs to see
the progress as it goes and once it's
finished with all the steps you can see
that it's succeeded so that's great but
I can make this even more powerful by
tweaking the configuration for my
project the out-of-the-box template is
good but it's even better if we
customize it for example I have tests in
my project using the mocha framework and
I want to run them as part of the
validation that I want to perform on
pull requests so I can add this just by
navigating to my project on github I can
click this link right here in the build
output to go there then in github I can
select the yellow file that adjure
pipelines added for me and at the top of
the yeah Mille text I can click the
pencil to edit it and in the script
section right after the npm install and
npm run build commands i can add npm
tests that's the great thing about yamo
it's easy to change
all I need to do is scroll down to the
bottom of this page and type a quick
commit message in
and then click commit changes again
although pull requests are a best
practice I'm just getting things set up
so I'm going to commit directly and when
I did that github notified Azure
pipelines that there's been new content
pushed to the master branch and that it
should queue a new build with those
changes so if I move back over to Azure
pipelines you can see that this did
indeed queue new build for me if I click
on it and then go to the log view and
then click on the build log for the NPM
step
you can see that it did run my test
suite and that they all passed so that's
perfect
as I commit changes to my master branch
on github they're built and tested with
this pipeline but now let's see how this
actually works to validate contributions
through pull requests if I navigate back
to my project on github
I can go through the contribution
mechanism with pull requests let me
navigate to my projects controller
and then click to view it and when I do
one thing that I notice is that this
operation for addition is a little
strange plus a plus plus B if I'm not
familiar with JavaScript and how the
plus operator is both addition and
string concatenation that might look
like an error to me so I might want to
be helpful and contribute a pull request
changing it to just a plus B so just
like before I'll click the pencil to
edit this file and I'll change this
operation to something that looks better
and again I'll scroll down and I'll type
a commit message
but this time I do want to follow best
practices so I'll select this to create
a new branch and I'll give my new branch
a name and then I'll click propose file
changes once I do that github will
navigate me directly to the new pull
request experience where I can double
check my code and then click create pull
request and then again github will
notify Azure pipelines that I opened a
pull request and then it will start a
build against that pull request branch
to validate those changes
you can see it right here on the pull
request page that is turned yellow it's
in the process of running my belt if I
want to see it in action I can click on
the details to open up the github Status
page
then I can select to open this in Azure
pipelines
and by the time I do you can see that
this build has actually failed if I
click on the NPM task I can scroll
through the output to see what happened
if I scroll down I see that my addition
tests failed my test that adds two
numbers twenty one and twenty one is
supposed to return forty two but here it
returned to one to one and this one adds
forty two and zero and expects forty two
back but here I got four two zero it
looks like instead of actually doing
addition its concatenating these numbers
as if they were strings that's clearly
not right let me close this window to go
back to github and then go back to my
pull request
now as your pipelines has reported back
to github that the tests failed so I
have this big red X to warn me about
this this lets me know as a project
maintainer that there's a problem with
this pull request just at a glance so
even though that line of code looked
strange it was actually correct after
all and this pull request validation
build made sure that I didn't
accidentally break something know that
Azure pipeline's has given me this
helpful feedback telling me that this
contribution was not actually a good
change
I can iterate on the pull request if I
go to the files change to tab then again
I can click on the pencil to make
another change to this pull request
obviously the original code was correct
the plus a plus plus B coerces a and B
two numeric values and adds them instead
of treating them like strings and
concatenating them so I'll revert that
change
but if you're not familiar with the
finer points of JavaScript then this is
still a little confusing so I'll add a
comment to this code to make it clear
what it's doing and why
you
now this is a good pull request it takes
some code that was confusing and
clarifies it with a comment so again I'm
going to scroll down
and I'm going to type a comment for the
commit
and then I'm going to click commit
changes this will add a new commit on
the pull request branch so when I click
back to the conversation tab I'll see
this new commit and I'll see another
status update that shows Azure pipelines
is running a build it's looking at the
newest change to see if now this pull
request will build so again I want to
click through to details and then to my
build in Azure pipelines
and I'm going to watch it build again
you
and this time it succeeded just like I
expected I certainly hope that adding a
comment won't break the build so now I
can close this and go back to the pull
request in github
and now I can see that the pull request
has this lovely green checkmark next to
it instead of that ugly red X this
indicates that all the build validation
checks have passed and that Asscher
pipeline's has run all the tests in
other words it's safe to merge this at
least as far as what I've configured my
continuous integration bill to look for
so I can feel confident clicking this
green merge pull request button this
will merge the pull request into the
master branch and in a way that I feel
confident about the code quality
so now I have a continuous integration
build set up the builds whenever changes
are merged into the master branch and it
will build pull requests to validate the
changes before they get merged as a
maintainer of a software project this is
a level of sophistication that I expect
and I want people who are contributing
to my project to know that I'm following
these best practices with CI builds so I
can actually show this to them easily so
that they know the project is healthy I
can do this by adding what's called a
batch to my project page on github this
badge will show contributors that my
main integration branch is building
successfully and that all the tests are
passing it's a bit of a litmus test
really for open source projects and
really for any software project as your
pipelines makes it easy to add a badge
to your projects readme where it will be
shown as soon as anybody navigates to
your project on github to add one to my
project all I need to do is navigate
back to my build in Azure pipelines then
I need to click this ellipses and then
I'll select the option for a status
badge
when I click on that as your pipelines
will show me an example of my badge you
can see that it's green that means my
builds are currently succeeding which is
exactly what I want to see and it shows
me the URL for this image but even
better it gives me some markdown that I
can actually just copy and paste right
into my readme so I'm going to select
that and then copy it to my clipboard
then I'm going to go back to github to
edit my readme and add the markdown back
in my repository I'm going to click on
my readme MD to open it in the viewer
and just like before I'll click the
pencil to start editing and I can select
right here in the file where I want the
build badge to show up in my readme and
then paste the markdown right in
finally again I'll scroll down to the
committee area like before type in a
simple commit message and then commit
the changes
so now when I'm taken back to my
projects readme you can see this nice
green badge that shows everyone I'm
following best practices by having a
continuous integration pipeline for my
pull requests and for my master branch
and that Azure pipelines is keeping my
project safe so you can see how easy it
is to protect your project and keep it
building and tests passing which helps
you safely accept contributions whether
that's from the open source community or
from your co-workers and it's easy to
get started just go to the github
marketplace and select Azure pipelines
to build and protect your project
whether it's nodejs java.net core or
anything else it's free to start with
1,800 build minutes per month and a
single pipeline available at no cost for
open source projects it's completely
free with unlimited build minutes and up
to 10 concurrent builds if you want more
information about Azure pipelines
you can visit dev Asia calm and be sure
to follow us on Twitter we're at Azure
DevOps so again I'm Edward Thompson
thanks for watching and I hope that
you'll get started with Azure pipelines
for your project