ArcGIS Javascript API #esrijs 4.x – 22 – Moving to Node Js, Express, npm, git

ArcGIS Javascript API #esrijs 4.x – 22 – Moving to Node Js, Express, npm, git

what’s up y’all this is Hussein Nasser
from IGeometry where we give you software engineering by example welcome
to another ArcGIS JavaScript API episode and this episode I want to take this
application to the next level and I want to make it more professional if you will
so yeah I want to you I want to start so the past month or so
I’ve been experimenting with different editors and different technologies and I
fall in love with no GS and start working more with nodejs
and I want to use start using the no GS more into our application here and plus
I I discovered another great editor called Visual Studio code so we’re gonna
start using the using that instead of sublime text so yeah so here what you
see is our github repo with episode 21 that’s the last episode we did and I’m
gonna start fresh like so wherever you are now you’ll be at the same stage at
mirror I’m gonna start fresh I’m just gonna clone this repo and start working
up to actually serve this HTML page or this work with no GS instead of whatever
we were doing before right so let’s start doing that okay so just if you’re
using Mac they’ll be like the easiest thing here and yeah if you’re using
Windows I can pretty much do the same thing it’s just bunch of commands so go
ahead and before you do that go ahead and install node.js I’m gonna reference
here how to install it it’s just very simple just go ahead and install it the
garden must all get so we can get there get command those two things you need
and that’s pretty much it so look at the command prompt here and I created a
folder called web apps let’s go to this it’s empty now so let’s go ahead I’m
gonna create I am going to clone this repo into this folder but
that will actually create a new folder called the repo names OGS API for let’s
go ahead and just copy then literally just get clone and then crashed that in
few seconds whoo we got ourselves a nice folder here and now we can control
ourselves with this now we have a full clone of this application so that’s the
first step we have cloned the app the next is we’re
gonna make this application notable right so we won’t know to restart
recognizing that so to do that you have to do NPM which stands for node package
manager and then you just do a net so this folder becomes our project and
let’s go ahead and initialize that all right so what do you want a package name
call it Jason virgin escape description index rjs that’s the start of the
application all right so let’s keep it indexed to GS and test command we’re
gonna leave this empty now get repo default accept all the default and then
they say yes and just like that we have initialized the node package manager and
the get in this folder so this folder has this put both these two pieces of
information so we have package to Jason and this is very important we start
editing that file and but we’re missing another file where we actually start our
application right so before we do that we need one more package and now it
called Express and that will help us that will help us serve the pages or the
static pages that we have in this case our G dot HTML so Express is a very
simple app that as a package extension node that helps you do a lot of things
and one of the things the small thing that it does is help you serve files and
it helps you listen to a specific port so we have more flexibility so it’s good
go ahead and install this so to install this you get NPM and install Express and
in few seconds Papa Papa we installed an p.m. I mean
Express and that right so that is really cool and simple right so that that
actually installed some other files so that package that folder now have all
this work and us and we can start writing some app so let’s jump in and
open our Visual Studio code again just Google dad download it it’s free it’s
really cool and I just opened Visual Studio code and the moment we do that
we’re gonna open a folder and guess what there’s the folder that’s the same
folder we work on GS API for X let’s just go ahead and do that and yeah
that’s the folders and these are the files and this is the for our file we’re
going to change that to make it point to the public server of jjs the JavaScript
API we’re gonna do that and we will need the index to j/s file which will be the
start of our application so let’s go ahead and create index ojs
and next to gist just draw a skirt file the first thing we’re gonna do is we’re
gonna create a constant variable here it’s not the constant variable that’s
alright so this is a little small I don’t know if you can make it a bigger
can we make will start to figure it out file preferences seedings text editor it
is what font size let’s make this 18 all right
did that work I do not see that working save oh it did work all right
is that better guys let’s make it 24 nice
all right that’s much better anything so we’re gonna create a new constant called
app and then that constant is equal require and that we’re gonna import the
Express we’re gonna import the Express application here and then we’ll create
an app and to create an app is basically we’re gonna invoke that Express variable
and just like that we have an app now so this app will allow us to do a lot of
work and one of the things we wanted to do here is for simplicity we wanted to
listen to a port in our application and we the beauty of this is you can specify
the port so I’m gonna say unlike I is where you have to do so many much stuff
right just to do that simple thing let’s go ahead and do listen I’m gonna listen
to port 8080 because that’s my favorite port and then when that happens you’re
gonna call a callback and I’m gonna use a simple arrow function here let’s just
say console the log and say we are live on port 80 we can always put the port as
a constant and do all this kind of things so now that we did that we will
go ahead and go back to the lecture command terminal and do NPM one so when
I do that I’m gonna get an error and the reason is the application doesn’t know
where to start yet right we need to tell the application hey when I say NPM run I
want to start with calling the index dot yes how do I do that
remember this file back to the Jason dad allows you to do that so remember this
this script is actually very beautiful we need to NPM run you will be ever
allowed to specify a label and then run different command based on based on that
so since we were just doing simple simple things here was create a script
called start and then that script is literally called node index of GS that
means run the index of GS use not GS using node J s if you are using Ubuntu
or some Linux it’s just a bundle in specific you have
to say no js’ it’s just like node was taken for some reason or you have to do
some sort of work around to do that get around that and if we did that and saved
obviously go back and do NPM Bron and then we get a label says start one label
right okay we’re gonna do NPM run and then there’s one label called start so
I’m gonna call that star and we actually are live on port 8080 so but right now
we’re still not done so what do you want to do is here right so we need to start
serving the the current directory as as HTML files right as static files so what
one of you would do is basically called aptitude and then we’ll do ab dot static
if I’m not I’m sorry its Express does static and then we’re gonna serve the
current directory just like that that means serve me the current
directory which is include any issue if I include that right so let’s give it a
shot right control C and then NPM run start and then if I go back here and
just say HTTP the same Mac 8080 and then IG dot HTML I will be
served that page while there are some problems here what do we have here
we have a lot of Earth’s and the reason is because it’s trying to locate ID
that’s HTML trying to locate there what Hussein Mac 8080 which doesn’t exist
right so I can actually call start copying that folder into the same path
and that should work but I don’t want to do that because I don’t want to start
pushing that the API into my git repo just for copyright issues I don’t want
to get into trouble so what I gonna do here is actually replace that to point
the to the public and stances so gesture doc Joyce calm I think let’s
just move to 4/6 why not right and then same thing here save and then I think we
do need to close that restart and then just like that refresh that will start
pulling the HTML and hopefully we’re lucky enough that the site is not down
okay it’s like we have a limited number of calls to make to that our joyous
website right but yeah it looks like it looks like the site is now but yeah was
was up and down a second ago I think what we have here is like the site
limits the number of API calls to it right and unless you pull the offline
version first right so we can I guess we don’t
yeah let’s go I don’t pull the off lumbers and just to show you that it
actually works right so yeah we’re gonna copy that remember where did we put our
stuff guys we put it on know what modules HTTP server then this folder
right copy we’re gonna copy that but I’ll remember to remove it just a
second just to show you guys that this actually works so let’s go ahead and
actually paste it here just like that this will be added to the repo right so
once this is copying the entire API which you can obviously download from
the ArcGIS website all right now so the git repo see just
discovered that file as that’s cool about that the visual studio really
liked it so now we can actually undo that work which is ridiculous but yeah
let’s just try that out now we need a start again I am hoping that this will
actually work and obviously it does all right so I’m gonna delete that code just
in case I’m gonna push the code which has the public API instead but yeah I
wanted to start doing that so I can start simply making a change and pushing
I’m gonna show you how to do that in a minute now I’m gonna show you how to
push a new code which is episode 22 right now alright now that we did that
and I know that this will work so I’m gonna actually go and undo that work
HTTP is calm and HTTP gesture dark joy is calm then let’s go ahead and
go and just delete that because I don’t want to push this right now that we did
that I think our stuff is ready right obviously might not work but it will
work after maybe 30 minutes or so right because there’s like a limit of the
number of calls that you can make anyway we prove that it works right so we’ll
just assume that it works okay so now that I have everything ready I have all
my project ready let’s go ahead and push that change right so to do that we’re
gonna do get add I’m gonna add all my work
to that small branch that I add just call it and then I do get commit I’m
gonna commit my changes and I’m gonna say this is episode 22 right just like
that it creates everything right and then what we do is basically get push
and just like that this will be pushed to that public get repo and if i refresh
that we don’t need it anymore sir by the first ed I now have the full files and I
have everything here now if I delete that I don’t really care because I can
always reclone and then run that so now guys if you cloned this at the stage
all you have to do is just p.m. install and you don’t have to install Express
and do all the work that I did in p.m. install it will detect say oh this guy
has this packages and he needs Express so I’m gonna install Express for you
once you do that NPM run start and you’re done see two or
three commands and you’re done that’s the beauty of node and the packaging and
the deployment stuff which is really cool ash all right guys subscribe if you
like this video check out my books on Hossein Nasr calm I have a lot of books
that I wrote on out joyous technology check it out check out that if you want
to learn geodatabases JavaScript and a lot of other books or I had an original
almost four books there check out it will support the channel and I’m gonna
see you in the next one good bye

3 thoughts on “ArcGIS Javascript API #esrijs 4.x – 22 – Moving to Node Js, Express, npm, git”

  1. Programmer's Corner

    Are you intrested in coding? There is a app called 'amino' which has a community special for people who love programming/coding! Join it by this link:

Leave a Reply

Your email address will not be published. Required fields are marked *