AngularJS Tutorial - Part 9 - Adding Indexes & Deploying Video Lecture - IT & Software

so so far we have a web application up
and running on their own sheet which is
able to create edit delete their search
sort and paginate to do this so that's
the basic basic structure of cutting
programs you might write or at least
subsets of it so for example anything
that has like a login system you'd
probably have some way to create search
edit to late etc users it's often a
natural application will consist of kind
of multiple multiple entities like that
which you have this basic functionality
around so we've tried to make it
reasonably fast and easy and reusable to
create that kind of functionality big
problem is no one else can use this
fantastic application because it's
currently sitting only on my laptop so
we need to deploy it another issue is
that if I go and screw something up in
the future I have no way to like go back
to an earlier version of the working
version of my application so I really
want to put it in some kind of version
control system and that would also be
useful when other people come along and
offer to volunteer to make my wonderful
application even better and we'll have
multiple people working with a another
good reason to have it in a version
control system so it actually turns out
that the easiest way to deploy stuff
onto all kinds of systems is to go
through a version control system anyway
so what we're going to do today is we're
going to deploy this on to something
called app harbor which is specifically
a hosting service for net applications I
will wait you however to Heroku as well
Heroku is something for deploying
various other types of applications
including Ruby and Python and I
particularly have this page open flask
Postgres on Heroku because I think this
is the closest to what we're doing it's
like a pretty fast lightweight easy to
use web application framework the Python
code flask
at a pretty pretty nice database
Postgres and there's a nice web page
here that I'll link to from my blog
which somebody else has written which
describes how to do similar things to
what we're doing today with map Harbor
using flask and Heroku
so anyway today we're going to do our
net slash angular application Plus app
Harbor so you'll see it's surprisingly
easy actually to get this from my laptop
and part of the web where everybody can
use it and the thing the reason this is
really useful to me is that you can
quickly like prototype stuff check it up
on the web get your friends or
colleagues to use it like as an internal
tool or whatever get lots of feedback so
you can't really get lots of kind of
iterations based on real feedback as you
develop your application so the first
thing we have to do is get our code into
a version control of the tree of course
all the cool kids use github so that's
what we're gonna do so we have a folder
here angular tutorial which is the
visual studio project github for those
who haven't used it has a really nice
little Windows application which of
course you can use the console but I've
actually been finding the windows
application you know a bit more
productive in some ways that the console
recently so that's my carrot to all the
choice and that's unusual for me because
if the for the last 15 years I've always
used console based version control
clients this is the first time I really
like to Ocoee so I got to create a git
repository on my laptop so that
basically means that my laptop is going
to keep track of every time I change
your file up so that I can click go back
to previous versions if something goes
wrong I'll see exactly how things have
changed or so forth this is actually
really really really useful for data
scientists like for example if you're
entering a cowgirl competition it's
super cool every time you like submit a
solution you can't basically commit your
your get code at that point give a
little mess
saying this corresponds to a particular
submission and then later if you try to
remember why it was that that earlier
one is better than this later one you
can go back and see exactly how the
codes changed so there's lots of good
reasons to stick stuff in to get and
this is how easy it is
grab the folder drag it to where it says
drag and drop it and give it a name I
gotta push it to github and create and
that's it so that's exactly how easy it
is to create a git repository nowadays
so that was pretty cool wasn't it so
let's have a look at our git repository
so the first time we look at our kit
repository obviously there's a fair bit
of stuff in it showing you and that's
because absolutely everything in here is
new so let's commit our basic initial
commit so let's just call it initial
commit so when we commit that means that
we're taking the stuff that's on our
computer and basically saving a
particular version of it so I'll click
commit so this is actually sending it to
the server at this point it's just
saving a version of it basically locally
so that we can go back to it later now
in order to actually send it to the
server
we'll have to click the publish button
there we go so we do have an initial
commit and you can see we could go back
and undo this commit or whatever or else
we can actually send it off to the
server so I'm going to send it off to
the server which means publishing ever
since I'm using the default github
configuration it's public so it's
important to realize that unless you pay
them to have a private repository
clicking this is actually going to make
your code available to everybody
so now that that's finished publishing
you can see here it says that it's in
sync so we can actually go over to
github now and have a look at github
comm and we can see here's all our files
so the next thing we're going to do is
let's just follow through the little
blog post here so we've created a github
project we've committed our code so now
we're going to create an application on
App haba so literally here is that PABA
once you've signed up it's just as
simple as typing the name of your
application so what should we call this
angular tutorial there we go and you can
say where you want it based so that'll
give you a lower latency depending on
where you are create you so here is the
page for app harbour for setting
everything up and all we have to do is
connect our app harbour application with
github and that way it's going to go to
github and pull in my code and compile
it and run it for me so to do that we
click figure github on our main app have
a project page but before we do that we
should add the SQL Server add-on so like
there's lots of databases and other
services you can add to App Harbor most
of them have like a free version which
is a little bit a paid version that's a
bit more Heroku works much the same way
so to do that we will go install add-ons
from the add-on catalog we will go to
you can see there's lots of them here
we're going to go down to sequel server
and it shows you here what different
versions you can get how much they cost
it's actually not bad for 10 gig of
database which is quite a bit 10 bucks a
month so you could run a decent you know
systems but not much money okay so get
the free 120 Meg which actually for like
a prototype is going to be enough to
manage you know use the data or another
configure data for a reasonable number
of users so I've now added the SQL
Server to that application so now I'm
ready to attach it to github so here we
are configure github so what is the
repository so you can see here it's
listed all of my github repositories so
I gotta grab angular tutorial I'm not
going to add that as my application so
you can see that it's got a link to my
github it's gone away it's found all my
repositories I choose the one I want and
it's going to now download everything
from that github over here so while
that's happening let's go to the next
step so currently our database is set up
to use like a local database that's on
my particular laptop but we now have a
database provided by App Harbor for us
that we want to use but we only want to
use it when we're in app have' not when
we're running locally and this is quite
cool like Visual Studio has like a
built-in way to do this basically to say
I've got different configurations
depending on whether I'm in development
or in production in particular in the
configuration file which is web doc fig
there's one file called web config
release one file called web config debug
that's in those files you can like
basically say what are the differences
between my development setup and my
production setup now this is
this is super super date approached and
you can in fact add additional
configuration so you can add a staging
configuration as well so that way you
could kind of stick something up on a on
a better server or something like that
the actual way it works is kind of
slightly obscure if you're not familiar
with it which is it uses a kind of
particular kind of XML transform format
which is why I've actually just got the
particular code that you need ready to
copy of paste so I've just copied it I'm
gonna go back to visual studio and I
will go to web doc fig web not released
config so there's a default version here
which just tells you how it works and I
will just paste it this version so a
couple of things you need to change the
first is you need to put the correct
name of your database context so in my
case I can actually go to the context
class and see what appears here that's
actually over my database context so I'm
going to paste that in there and then
the second thing is I need my connection
string for App Harbor and app Harbor
will tell you that if you ask it nicely
you can just go across to I think it's
in configuration variables here we go
here is my sequel server connection
string so I can just click this button
to copy it go back here and paste it
that is not what I'm into copy let's
assume that if I scroll a little bit to
the right I might use there we go
instead and now everybody on the
internet knows the secret password to my
320 megabyte sequel server followed up
with spam so I've saved that
so at this point I've now got a
configuration of this switch such that
when I upload it to app Harbor
Papa knows that they are considered
production so they know that when they
compile this they're compiled it in
release mode which means any
transformations in my web dot released
config get run automatically and that's
all that's required so we now have to
push this of course to get up from where
this is quite cool what actually happens
is when you push to github because if we
configured it to be connected to a
barber it basically tells that partner
that something's been pushed to it and
then that Papa goes and grabs that
automatically and rebuilds it so that's
how easy it is to deploy something new
is literally you just commit to github
so let's do that so I just clicked that
commuted changes and github and it shows
me that I've got some changes here where
don't really stop config here and if I
fold that up you can see that's the only
file there so give this a commit message
web dot release start config DB
transform so just remember that when we
commit this it just saves kind of a
snapshot locally I actually have to
click SiC to actually make that get sent
across to github so now if we have a
look in github
we can see there's been a change just
now we can see exactly what changes have
been made you can see what was added and
released that added and removed rather
which files are changed so forth feel
free to come and leave comments on my
exceptionally interesting committee if
you want to so let's go back and have a
look at app Harbor so you can see on a
par but now it's noticed that something
got committed to github and therefore
it's now working on deploying this
change so as you can see this particular
status here is queued which means behind
the scenes it's compiling this if
there's any tests in it it'll it'll run
the tests I believe it'll do the release
transformations and behind the scenes it
will go away and like make sure that it
as it switches over to the new version
there won't be downtime for you and like
this is not particularly different to
other systems like you know AWS or Azure
or whatever what's different is just the
process of like setting it up for
deployment and having it connected to
github and stuff is pretty empty and
even the fact that you can add like
services like sequel server and so forth
it gets the point here where it's
successfully built it and at this point
I can click this deploy but that's going
to actually make my exciting thing ready
upon the internet so you can see now
it's status is active and if there was
any problems you can actually see
exactly what all the messages are here's
all the steps that it was doing it was
running tests which I don't actually
have unfortunately and so you can see
exactly what happened there here it is
so if I go to host names I can find out
the post name of the application that's
created for me and in general it's
pretty easy
yes it'll be the name that you gave it
with hp.com so if I click on it we
should be able to see my application
running oh we need to index dot HTML so
we should make some changes in the
future so that the default route rather
than going to this default Web API pages
goes to our impressive application yet
for now we can type in index dot HTML
manually so right now this is not
showing any tattoos and that's because
our our seed hasn't been retina and now
of course our seed is only really for
testing purposes so maybe that's
actually exactly what we want but in
general your seed will be something
which does precede it with test data but
seeds it with like the specific data
that you need for your application to
work so maybe there's some particular
sort of products products table or some
particular settings that you want set up
and so forth so actually in real life
you do want your seed to run and also
you need to make sure that your
migrations which is like the changes to
the SQL that get automatically created
as you change your models also get run
so in fact to have that work we do need
to do one more thing and this is
specific to c-sharp type applications
there's a similar thing in in Ruby Ruby
on Rails as well with them a great
migration setup so how you do it to be
different in each case but the general
idea is that we need to make sure that
when the when the thing is deployed that
that seed and migration stuff actually
gets run so to make sure so that was a
thing that in the package console to
remember was called update - database
like we type update update - database
each time we wanted to make sure the
seed method was run and that the
database migrations had all been run we
can effectively do the same thing every
time that
this app is actually run by overriding
this on model creating method and
putting this code into it
right so let's just again copy and paste
the code and we'll go into our context
and this is where we can paste in that
code I'm using the appropriate context
statement so basically all this says is
that you know every time you are running
this application you should first of all
migrate the database to the latest
version so that's good that we saw what
happens when we forget to do that
because in the future if you like
changed your database and then suddenly
thought oh wait my application is broken
because the database didn't change on
the fire end you know how do I like call
update database this is how you do it so
of course all we do now is we commit it
update database automatically
we can then sink that that sent it off
to the server app Harbor will then
automatically get told by github once
that commits complete that will then
rebuild the application we can then
deploy it and as soon as we go to it it
will then automatically run our seed
method and any doubt database migrations
that it used its last time it's quite
need it actually like keeps like a kind
of like a hash of the state of the
database so it knows about exactly what
database migrations it needs to run to
get to way from where you were last time
to to where you are now which i think is
supernatant so if we go back to angular
God not angular if we go back to cap
Harbor we can see how it's going and we
can see this is currently processing so
while it's processing our old version
continues to run as before so doesn't
like stop it or anything so that's quite
nice so that commits from github you can
see even the commit message of years
yeah that harbor it has finished being
compiled tests run etc and now we can
deploy that so at this time this latest
one is currently active so it's it's
it's can always go back to a previous
version with github yeah you can just
click deploy and deploy a previous one
the nice thing is that for every
database migration it has both up and
down methods which means that when you
go back to an older boy it'll actually
aren't why if the database changes to
make sure that the code at that point in
the database at that point they're
automatically in sync
which i think is also pretty amazing so
let's go out to see if we now actually
have some data so we'll hit f5 and we
can see the data is now or being
populated we can check that things work
so for example edit that's fine
cancel search research so this is quite
nifty right so this thing don't we build
quite quickly and I had running on our
laptop we were able to get them ready
literally in a on a public public web
server it's got a kind of scale and
everything for me automatically if it
gets super popular which I'm sure it
will and as it kind of as I need more
space or more processing power I can
just buy upgrades as a service and you
know I'm not sure if I would necessarily
use this kind of service to like run you
know something because at some point you
want the ability to customize things
maybe a little bit more but I think for
for kind of testing out things with
customers or creating internal tools or
creating little helpers whatever it's
you know I would much rather rather than
people who get like a little Python
script or something and say oh you could
use just by downloading it from github
and installing - installing these
dependencies then you can run it with
the console blah blah blah you know it'd
be so much cooler if every time somebody
had little script like that they said oh
I've made this available behind a web
interface okay here it is
please feel free to start using it
that's like that would be WP ace I think
alright so there we go so that's our
beautiful to-do list running on the
internet it's taken us more than an hour
to both teach and develop this but I
think it's fair to say that if you have
the templates ready you want to type so
forth it take an hour-ish probably not
the first time you do it maybe later I
recognize that the last step of
deploying it there was you know some
code a couple of times that we had to
like copy and paste like that XML
transform and the automatic database
thing which is not particularly
attractive to look at but literally that
never changes right so you can just copy
it paste it I'm sure it's something
quite kind of that stuff will end up
behind bits of gooeys or people I don't
think it they stop anybody from going
through these steps you just have to be
able to copy it post to my blog or stick
it in a template on your whatever