of this series you can find the full
playlist here or in the episode
description we talked about what
continuous integration is and why
developers do it that episode was
theoretical
today we’re going practical we’re going
to setup continuous integration on a
what apps IMM PJ and you are watching
fun fun function in the last episode I
talked about how a team that practices
continuous integration uses an automated
verification system in order to be able
to merge multiple times per day in that
video the concept of an automated
verification system was very abstract
but today we’re going to get down and
dirty and look at what an automated
verification system looks like in real
life there are many different tools that
you can use to set up an automated
verification system in this video we are
going to be using circle CI partly
because circle CI is sponsoring this
video but more importantly circle CI
have been my personal favorite CI
solution for the last year so in this
video I in this video we are going to
create a web application push it to
github add circle CI to the project and
finally watch circle CI build and test
our project on each merch all right
first things first we want to create an
app in order to get going fast we’re
going to be using a template project we
are going to be using Redux starter kit
we are going to be using this because
it’s a pretty sane setup and it also
contains a few example components that
have unit tests written for them okay so
let’s clone this but the boot go to my
code directory and then we go get clone
and we were going to cold Wow my blood
my god it’s hard to type today get close
and I’m going to calling this fun fun
app
now if we check the get remote alas no
what oh I need to actually be in the
directory found fun app let’s check the
remotes get remote how do you do this
just we’re both yeah all right so now
the origin is pointing to the template
we don’t want that we want to create our
own repository so what I’m going to do
is find how I do that how do I do that
fun fun app and example app for
continuous integration oh it looks like
I’ve already done this once I have
reversed for once and then yeah we don’t
want any readme or stuff because that’s
already in the template I’m going to
leave this public so that you can check
it out on my github we’re going to leave
a link in the obscure description and
then we’re going to click create
repository not people and then we’re
going to be copying this this earth is
this an earl even though it’s H I I’m
going to call it an ER and then we are
going to go get remote or M or a gin and
then we want to get we don’t add origin
and we’re going to paste in our earth to
a fun fun app and now it’s the origin is
pointing pointing towards our new github
repository so we’re going to we are
going to clear the console and then
we’re going to do get Jewish origin
oh my god why I take it home okay
refresh cool
we now have an app ish let’s let’s see
cross and come on not sound test failed
see about okay we need to actually
install the dependencies first so let’s
do an NPM install ooh it’s massively
exciting to watch an NPM install process
hey we’re know we should be able to run
NPM tests around sharding finish in one
point seven seconds that’s a lie
forty-six tests completed and this is
the basis of the automated verification
system that we talked about in the last
episode in that episode we talked about
how long-term urges can waste a lot of
time and how we can save that time by
instead doing multiple merges per day
but in order to be able to do multiple
merges per day we need an automated
verification system and that is what we
just saw an example on it’s going to be
something like running NPM tests and it
builds your code it’s maybe it runs a
linter on it
and it runs some unit tests that is a
basic automated verification system we
are making such good progress it is time
Coffee contains caffeine it’s very on
the house we need this Crossman say
thank you for the nose get it open good
one
[Music]
vitamin C is very good water it Sun if
you are a new viewer welcome you are
watching an episode of fun fun function
I really sneeze every Monday morning Oh
800 GMT but you will forget that and
miss it
thankfully you can use the YouTube app
to turn on notifications all right back
to work mmm so at this point our
automated verification system is just a
baby there are many different things
that we can do to make our automated
verification system better but the one
thing that we are going to focus on
today is adding remote verification what
do I mean by remote verification well
when I run NPM tests what I’m doing is
local verification remote verification
is basically adding a build server to do
the verification remotely so that
verification happens in a central place
whenever a team member merges a change
to the repository the reason we do this
is trust if we rely on local
verification having our developers run
the automated verification system on
their local machines then the repository
ends up being less trustworthy me as a
developer well sometimes just forget to
run the tests prior to merging where I
my tabs are installed a new dependency
but I forgot to add it to the
package.json I only installed it locally
so it works when I run the test but when
I merge it and everybody else checks out
it breaks for them on the other hand if
the automated verification system runs
remotely in a predictable way we can
trust that the repository is in a good
condition it kind of gives the team this
unavoidable quality contract that we all
work according to a kind of shared
safety net and that creates trust not
only
the code but also within the team we are
going to be using circle CI today which
you can think of as remote verification
as a service when I set up my first
automated verification system many years
ago
the common way to do it was to use the
open source to route Jenkins I I don’t
want to put Jenkins down too much
because it has served me well and it’s
free and open source
but in my experience configuring and
hosting Jenkins is very very fiddly at
least when you compare it side-by-side
to software as a service offerings
it’s especially companies like circle CI
that have continuous integration as
their main business they basically have
to provide a very good product or they
won’t survive nowadays I always use
hosted CI because I found that it saves
me a lot of hassle with hosting and
configuration so let’s get Circle CI
running this project first order of
business is to tell Circle CI how to
build the project and we do this by
creating a new folder and we’re going to
call that folder circle CI not there
delete delete delete I suck no okay
here again we’re going to create a new
folder dot circle CI and we’re going to
inside of that folder create a config
dot yml so config dot yml looks like
this the first thing that we are going
to do is that we specify which version
of circle CI that we want to use and
we’re going to use version to roll that
is the fancy-pants new version that made
it out of data just last week then we
are going to specify a jobs section and
in that section we
have a build section and in that bill
section we need to specify a working
directory directory and we generally
just going to keep that – home temp next
up we’re going to tell Circle CI that we
want to build our project inside our
docker container which has node 7
installed so we write docker and then it
we want the image to be circle CI node
and version 7 let me pause here for this
and let me talk about how extremely
happy it makes me that docker
exists there are several new features in
circle CI 2 though but the one that I am
personally most excited about is the
first-class docker support because I
have wanted a docker centric build
system for years what’s nice about
docker in in general is that it creates
these very predictable deployment
environments so that we can develop and
test our code locally and when we when
we do deploy it it will live in a an
identical virtual environment on the on
the production server when you use
docker you just you’re a lot less likely
to run into the problem when things work
locally but then break when they reach
production and the reason why you run
into that problem a lot less is because
the two environments are pretty much the
same docker makes a lot of sense when
deploying things to production but it
also makes a lot of sense in the context
of continuous integration
prior to docker you had these
configuration scripts that set up the
Cir environments I have run into so many
situations where your mic bills were
randomly failing because one of the
build agents that randomly were
I signed my bill had some
dependency missing or it was some kind
of alteration in the operating system
that made things go worse like what they
the bail agents were not identical and
predictable with doctor we can fix that
it’s amazing it’s very common to use
docker when you do CI
but Circle C I wonder though and other
build systems kind of welded docker on
to the build system circa CI 2.0 makes
it the very center of the build system
it’s completely docker centric and that
just makes me happy
soccer is amazing anyway let’s continue
with the actual subject of video setting
up and alternated remote verification
system we now need to define a series of
build steps first we need a check out
check out is your shorthand for cloning
the git repo circle CI is aware of the
existence of our github repo and has
access to that so we don’t need to
specify any any Earl here or credentials
or anything like that circle VI takes
care of that we then tell Circle CI to
run npm install and then run NPM tap and
that is all we need to do let’s commit
that and push it so gate 3
now get add a little circle ti.com feet
of Pineville again get get get a commit
message added sir search circle see icon
there and then we get push origin master
next step is to sign up for Circle C I
go to Circle ti.com slash fun CI that
link is also in the episode description
this link doesn’t give me any more money
or anything it just tells Circle CI that
you came from funds and function I
mentioned this in the last episode but
one really nice thing about Circle C is
that they have a decent free tier even
if your project is private so it’s not a
trial it’s permanently free if you have
a small project the resources on the
free plan will be perfectly adequate for
you
you only need to start paying if you
start building a team and even then they
have some pretty nice trial options to
figure out what what stuff you need if
your project isn’t private if it’s open
source then service the AI offers some
really nice and are completely free
plans anyway when you go to this link
you will end up on this page there’s
some text here but text reading that’s
for Java programmers you click this
button green then you’re on this page
you click here start with github now you
are going to be prompted with some
github permission questions I however
have already authorized with github so I
will just end up inside of the circle CI
dashboard now to get circle CI to run
our fun-fun-fun app we go to projects
here and then we click add project and
the ting adding project and then we
search for fun fun app darn no matter
it’s because I’m on the wrong
organization I don’t let me change that
can I change the organization oh here if
you are part of a github organization
you can change that here so you probably
want to change to your own name I guess
or whatever organization you have
perhaps you work and then you find your
app if this is the one and we do it
setup project alright and okay so I’ve
the repository here I can pick between
OS X and Linux that’s that’s nice but we
want to be logged Linux and we could
take either a new or old or version of
circle CI and we can pick whatever yes
start building I’m sure it’s going to
work okay queued sale oh it’s because
I’ve written the name or it’s alright
circle CI naught circle I aren’t gonna
it add a data to duty to circle see I
consider Channel come get commit mm-hmm
I am domed it in the head head I also
cannot spell
okay git push origin master okay now
that we have pushed let’s go to builds
and see if we have have it running so
yeah here it is I am dumb in the head
and I also cannot still running also you
see here that here is the prior build
that it was failing and here is also
unfortunately built from my my rehearsal
that I named the same thing so Circle T
is is confused by the fact that I
created the science same record twice I
probably should have done that anyway it
looks like it’s fixed let’s check that
build out so this is what it looks like
it has spun up the environment that took
a second it checked out the code that
didn’t take a second then it did an NPM
install and that took a minute and then
it ran an NPM test now as you see here
the overwhelming bulk of the build time
is spent on installing NPM modules in a
future video I would really like to
explore build optimization a little bit
having a fast automated verification
system it’s really important when you
are merging multiple times per day and
having a remote verification system can
help with that a lot if you set it up
well for example circle CI offers some
very useful caching infrastructure for
this particular problem we don’t have
the time to dive into that in this video
but if you are following along you can
try adding that for extra credit I’ve
added a link to the documentation for
the for the caching in the episode
description now finally because
Destruction is fun we are going to break
one of the tests and see make sure that
see the the build fail let’s see we go
to some boost or specs here I expect the
get state location – how do you write
this not too deep equal it will break
either way get commit clear get get add
test store create – or spectators get
commit message root go test
and let’s check the builds
Kabam you see how fast it is so here it
is broke a test and lalala let’s go into
it and see we can see if I
you can actually see the npm install
logs here but the NPM build output it’s
too large to display in the browser
yeah that’s NPM install for you we are
waiting for word the pain we are waiting
and run any fails excellent
lookie lookie here it breaks and yes it
has failed let’s fix it again – d/p call
get our tests and then I fix pick pick
pick fixed fix the test and then get
push origin master a little as the
builds white Oh appeared here that’s
strange
waiting waiting
oh it’s fixed it’s green this is the
best thing with tests you make things go
red and then it makes you sad and then
you make things go green and that makes
you happy again and that is mission
accomplished we now have the basic
plumbing in place for our remote
automated verification system this
allows our team to merge multiple times
per day while still feeling safe and
able to trust the state of the
repository so if you want to explore
continuous integration a bit more you
can go to circle VI that complex fancy I
and try this out on one of your own
project you have just watched an episode
of fun fun function if you don’t want to
wait until next Monday morning and you
want to continue watching right now
machine learning algorithms dictate that
website vote is healthy for you I am mpj until next Monday morning stay curious