welcome to code creative i'm travis tolson and with us as always is sarah tolson the other tolson no i think i think we've established you're the other tool i'm the other tulsa now i love how that works you've been in this industry for 10 years and i come along and experience doesn't matter when talent enters the room no okay anyway so here we are we figured out our streaming laggy issue yeah i think we've got the issue worked out uh the the wi-fi i had to jump off wi-fi so we are now hardwired into the router and have the full speed uh available and i think we're set to go so to kick us off why don't we jump over and we can try that recap again all right let's do it all right ready okay go for it all right so let's see last time we started off talking about setting up this dev environment because we're going to actually try and build some dev tools to enhance what we can do on platform with tools off platform right so to do that we were setting up a dev environment you were showing how everything starts with the server you put it on and all that good stuff uh you showed us how to put docker on your server which they can we can i could put on just my normal computer because i'm not fancy i don't have a server i think you do no no i no what if i want to put it on my computer like a normal human being that does not have a server that's okay right yes absolutely okay um so we put docker on there it's this app you download and that allows you to create these little containers you see up here um which can be different build environments that can all run at once um so this allows you to build this allows you to experiment with your uh application you're developing in different build environments um also is a good way to ensure that uh multiple devs can work on your application without having to worry about different build environments and stuff like that right right okay so arrow okay we have docker and then the thing we use to actually build stuff in our little docker container is called node.js which is an engine or is v8 the engine there was there's a whole car analogy here but it's a thing you download it you install it and it is uh we were using it in vs code it's a javascript runtime environment yes that thing um but we're using that so that we can build javascript run applications outside of the browser um and so you were showing us this whole process as our kinky dinosaur that andrew pointed out the other day so yesterday the other day what we were trying to do is talk about like this whole idea of hooking in and talking to a servicenow instance and we talked about using a mid server that periodically goes to the dev environment or whatever environment to find out if there's any jobs that need to be done and then the server or the dev environment will push the work to the server and it's like this big circle of life um i like my colors by the way but the the glitter pen is still my favorite i'm really feeling this and then we started talking about set up steps and that's when we started having laggy laggy issues and i went ahead and undid the setup steps that we did previously so i can start all over again uh so for those not paying attention to the chat phil asked while we were doing the recap if we had used the now cli specifically for custom commands and uh no i have not phil has apparently and it seems to be based on scripted rest apis which that's really cool and honestly similar similar to kind of what we're going to be doing here it's just that what we're going to be doing here will be completely off platform as opposed to using the now cli feature although we will be using some cli that's command line interface okay you gave me that look man i can't wait till we get video on so people can just see the looks that i give you uh phil says that he's created a table and columns directly from terminal oh that's cool but why would you do that when you have a nice interface that you can just go and click and do the thing and call it a day um i would say is it quicker if you once you know how to do it i wouldn't say it's quicker it's more so from an integration standpoint uh when you have an integration that's like a step in the process that you're teaching it to do command line click click click command line is is something that every system understands basically every computer has a command line at the base um and so command lines a lot of the programs that a lot of what i'm going to be using today has various command lines to it and uses command line for those tools uh it's just something that system admins are are familiar with see what phil says okay so that's cool he said you could standardize and back to create data models right okay so i could see like using the terminal to do part of a long string of commands or something like that right on the quick that would be cool yes and that and that's the thing is that when you have a command line you can use those batch scripts to do whatever you want as opposed to having to use specific languages and application architectures and everything else so um all right so you're gonna set up are we gonna go through the steps yes yes okay okay so uh and we're gonna be testing out some of these new tools again so bear with us when we talk about yamls you have to show my my camel because i'm very proud of it all right so let's zoom in over here to the vs code and the first thing we're gonna do is create a new folder um what was i calling this thing now army knife yeah now army knife which bothers me well it's like swiss army knife but you know for surface nail okay i'm gonna make it a snow army knife i'm gonna zoom out while i'm doing some of this stuff because and i'll kind of zoom in and out to show the important parts as we're doing this you're kind of making me dizzy yeah it's it's it's kind of jarring when you're moving around you and all your new toys i know all right so the first thing i want to do is i want to create a docker file um so let's zoom in on this docker file real quick and we'll take a look at it so um basically like we discussed last time this is setting up your uh your docker container um in your directory where you're saving everything and then you're running in p.m to set that up right so you're installing node.js stuff into this container yes yes so the container is going to be running linux it is going to be copying the image uh from in fact i think i can do a thing here huh that's cool okay anyway um you just did that to play with your toys i did i did and it was fun um do you have to like hold it down to do that okay that's cool anyway anyway um we're learning so it's going to copy the node 12 image that's an image prepared by the node.js folks that already has all the tools installed for node.js we're going to change our working directory basically navigate the file structure to go into the user source app folder which is a special one for the node.js image we're going to copy the package.json file from our folder over here to the folder in the container then on line 11 here we're going to run npm install which uses the node package manager to install uh all the dependencies in that package.json uh and then we are going to copy the app basically everything in here from here into our container and that is the gist of that particular uh thing so um phil asks is docker basically just a local virtual machine that's a really good so in a roundabout sort of way kind of um so a virtual machine contains an entire full copy of an operating system a container is not a true virtual machine it's actually a process segregation basically um in some ways it emulates a virtual machine environment so you you have your own separate environment that you're working in basically if you make any changes to the operating system files the container will have a copy of it but otherwise use the underlying operating systems files so your you know uh your your host os provides all of the uh oh the the all the operating system pieces that are needed and then the docker container runs a slimmed down environment of it i guess you could say um phils asks uh do i know of solaris yeah yeah the solaris os from sun microsystems they uh he says they had containers yeah linux also has um containers as well i forget what they're referred to as but they do have their own specification for containers um i want to say all three of them are fairly similar in their implementation it is not a full ver a fully virtualized operating system it is a lighter weight system that runs as a process on top of an operating system but it does give you similar system separation yeah keep them separate yes it's what helps you keep your environments separate from one another um maybe that's what the song was about so i do want to use this same docker file for now army knife this one does exactly what i want oops so that's just called docker file no extension on the end of it um and then we're going to then i need a docker compose which docker compose is the the yaml camel the ammo file um that contains the instructions for how to build uh the overall container so this is what adds the services uh to uh creates those service containers uh and sets up so like builds the environment yeah yeah that's where i put my notes anyway the docker file and the docker compose work together to build the environment um phil says really useful because npm install is a command required when building custom components and it gets the dependencies from the relevant json file yes yeah so um the all of the off platform tools that servicenow's been creating lately the now cli the and everything associated with it the new components all of that is using node.js as well um somebody at servicenow and they hate me so [Laughter] so a lot of the concepts that i'm using here will apply to those as well uh so i am going to [Music] copy most of the well let's copy this one over and then we'll edit as needed are you gonna make this like stack available somewhere yes i will yes i will so what i'm doing right now is i am actually setting up a development environment this is a much higher level thing than than a lot of developers are realistically going to deal with most of the time most of the time developers will download a tool like create react app that already has the build environment set up you just use it for development yeah that's something i love about developing for service portals i just open my little widget editor window and all my stuff is there and i just do the thing and move on with my life yeah so once i have this set up you will uh i'll put it in a git repository and folks will be able to then use this themselves so first of all the docker compose specifies what version of docker compose it's using different versions have different structures we're using 3.1 then we define a series of services which in this case i'm going to change this one to the now army knife service and that's just giving the service a name okay uh it's like the dollar sign blah blah blah thing that you make no no those are angular services which is a completely different concept the the services here will actually create you you'll see the services when i flip over to the uh well here let me show everybody and not just you when i flip over this docker tab you see how i've got this glide fast labs underscore glide fast labs yes so that is one of my services that is currently running is the glide fast lab service um so this one will then have the now army knife and if i open up this service you'll see there's files and an entire folder system under here this is the container where everything exists okay um so in the docker compose i am just giving this new service a name build is where the docker file is which is dot or the current folder uh user is node that's from the node.js [Music] image same working directory setting up two volumes again this is just part of setting up the node.js environment yeah uh that's more complicated stuff i'm not going to dive into then we have to then we have to expose ports if we want any kind of network connection with the docker container then we have to expose the port that we want to use so like uh network connect or internet connections usually go over port um or 443 i think for https all right let me stop let's back up volumes if i am grabbing this out of your git repository and setting up my thing can i just like copy and paste and use this one yes okay how about the ports can i do that with the ports too yes if you pull this from the git repository after i set it up you will be able to just run it as is without making changes okay so i am going to expose uh let me pick uh 9 000. power level is over 9 000. i am so glad that you occasionally like that was not intentional i chose i chose 9 000 randomly but it shows 9 000 because it's a nerd number oh lord uh i should not need the environment variable that was specific to my other environment do we need to explain why that's a nerd number or just let people wonder i i think the people that no no no the people that need to know yeah yeah and then command is like run the thing when when docker kicks off you have to run some kind of command that command should be long-lived that is it should keep running ideally you're running some kind of you gotta have something to start kind of like how when we were doing this store state and i had to do like the initial load thing so there was something there yes kind of like something there from the start not only something there but something has to keep running you have to have like a server or a process running in the background otherwise what will happen is the docker container will come up and then it'll go immediately back down again oh okay um and then i'm going to get rid of these two volumes volumes is when you want to um store data when you want to keep data persistent yes then you have to have a volume which i well we may get there i don't know it depends do you want to listen to music or not i totally just lost my thing phil says uh oh phil wants to know why 9000 is a nerd number oh my gosh that's all i gave you if you've ever seen the anime dragon ball z okay one of the main characters in the show vegeta who is just like the resident badass he makes it to earth and he's like gonna conquer earth and uh he's got this little uh this little spyglass thing that goes over one eye and it's like a little meter and you can see like the power level of different people right how powerful they are as a character you know and he he gauges how strong his opponents are this way well one of the more famous lines in in the the thing is when he finally sees um goku the main character of dragon ball z through his little uh power meter thing that he wears on the side of his face and he's like his power level is over nine thousand so anytime you see like a z index and css or something like that and nine thousand is a number more than likely it was chosen by some nerd that has watched dragon ball z time too many it's glorious okay so that's my sketch my little my little thing on your face so so i'm using his laptop to do the sketch notes with and it it like it fell asleep on me so anyway so this yaml keeps keeps running and it gets tired well the animal doesn't run the yaml just describes the animal tells it what to run yeah yaml is not a yaml is kind of like html oh it's it's a descriptive language not a programming language absolutely not a logic language tells it what to show not necessarily what to do yes exactly it describes what the result of the container should be and then docker reads it and or docker compose reads it and executes from there bill's never seen dragon ball z dude that was like a part of my education growing up go check it out all right so what i am doing now is i am um so i pulled up a local file here this test folder which is just the one that i use when i want to figure out what certain npm commands do so i need to build my package.json file and i don't always know exactly what to put in there because you've got stuff like this here so is this step three yes we're now going to be working on the package.json file okay um phil says yaml is a human-readable data serialization language it is commonly used for configuration files and in applications where data is being stored or transmitted that is absolutely true but it rhymes with camel and that's funny that's been like an ongoing joke here so phil i have to ask did you look that up or did you just know because i mean that was just a beautiful that was wikipedia quality stuff that was textbook right there um he says yaml targets many of the same communications applications as extensible markup language xml but has a minimal syntax which is inten which intentionally differs from sgml copy and paste hey good job we'll still take it thanks phil so we're making our json package yeah we're making our um package.json file so this is specific to node.js okay so what is the package.json it is basically what the docker uh it is the docker compose file equivalent for node.js okay um it describes how node.js should build the application and what scripts and options are are available okay so that's the packet you know i'm trying to take the notes so uh this npm install express express js is a um um uh a web framework it's it lets you build web applications yeah uh it lets you build websites is what it does um so it's just called express express.js it is a it is a web server or has a web server in it um so what i'm going to do is if i take a look here at this package.json it's currently mostly empty um because this is just my test project where i experiment with running commands so i'm going to close this real quick and i'm going to put that npm install express and we're going to do save dev now we'll do save save versus save dev decides where in the package json it's getting saved is it being saved as a production dependency or is a development dependency oh okay save is for production save dev is for development so i'm going to run this so you're doing your code in production no no well you're just doing save i am saving it as a production dependency very different from coding and product okay okay so i'm going to hit enter and now you're going to see this run and it is downloading and installing this is pulling all the node modules all the different node packages that are required for express okay so it has now installed and now i'm going to take another look at this package.json and you will see that it has changed under the dependencies oh it has the express in there now right so i've now installed express into this one and it looks like it didn't have any uh anything else that installed with it basically i'm looking at over here in the files and the package.json was updated and node modules were added and that's it so no random binaries or additional structures were added and that makes me happy phil says save dev is for locally applicable settings but not for those things which get packaged um basically save dev is for it's it's really your your development dependencies um it's when you go into whatever your production environment is you will not be installing those dependencies phil says this stuff is super relevant to wider servicenow off platform dev yes yes this is this is diving off the deep end of going off platform um so yeah this is this is cool stuff um but we will be integrating it to the platform which to me is that much cooler you know what you keep using that i word and it kind of terrifies me so phil says i failed to get a t-shirt in last year's hacktoberfest due to not knowing what he was doing nice that's okay phil i need to make us some cool service now related shirts we don't have enough like like inside joke service now type swag you can make us t-shirts all right so the next thing i'm going to do here is i'm going to take my old package.json from glidefast labs uh and i'm going to pull that over i'll just copy your page right yeah and then i'm going to edit it so once again uh zoom in here step four this is this is still step three this is this is setting up the package.json uh so now army knife is the name of this package version zero private is true at least for now uh we're not going to be doing roll up so this is the script you can uh basically that npm run sumscript name will run these scripts in here uh rollup is what i'm using on glidefast labs because i'm doing a build process for that one um for this one we are going to be running express and i want to say i want to say it had it in here no it did not um let's see npm init npm install express let's check the hello world node app js see i got a feeling that ah that's what i needed okay so express has an express generator and this is actually what i wanted i didn't want to install just express i wanted to use their express generator so some node packages have a command line interface a cli okay that allows you to automate fancy things in this case setting up an express application so this is going to set us up with uh all of the basic code required so i'm going to copy this and i'm going to jump back into my into this little test folder here and we're going to come down here into my terminal and put that npx express generator in there and we're going to let that guy build uh yes continue okay so it built out an application ah there we go that's what i was expecting last time you can see here that it's no longer just node modules it's added public routes views app uh and binary did that that command mpx express generator built all that okay the create react app stuff does the same thing it builds out a scaffold it builds out a skeleton or a template uh you'll see all those words used pretty much interchangeably um but that sets you up with a basic application that you can then modify as opposed to doing what i had to do on the glidefast lab side which was built the entire thing myself so this gives you a so these first three steps give you like the environment with everything you need to actually start building yes and so you can see here that that also gave me a start script okay what's the start script dude uh it is going to run uh the node command on bin www so it's going to run this script here but what does that script do um for that i'm going to say hold on a second and you will see because there is no substitute for seeing this stuff in action uh oh is it going to do a thing yes it will do a thing um all right so then i'm going to copy the dependencies naming variables is so much fun for me and we're going to put these as dependencies not dev dependencies because i'm going to treat this as a production tool not as a development tool okay so now i've got all that set now i have to copy the um all right so phil asked where did cookie parser come from is that gdpr compliant out of the box i i don't know um the cookie parser i don't think it i don't think it injects cookies by default i think you have to explicitly tell it to but i'm not positive on that i guess we'll kind of find out great um so if i end up in uh a jail over in europe we're getting sued in europe you'll know why yeah please don't do that that would be very inconvenient for me at least wait till the toddler is out of diapers all right so now i'm going to take these folders here and i'm going to these are the ones created by that npx uh command the express generator and i'm going to pull those into now army knife so now i've copied everything that npx built and the express generator built is now in now army knife on my server so i should be done with that at this point uh carlos asks what tech involved prevent the node module folder to be sent when we push it to the server um what tech involved prevents the node module folder from being sent when we push it to the server um which to pushing to uh which server carlos uh so like i i know that generally speaking when you push when you push to get uh you usually don't want to push node modules okay you want to install the node modules whenever you pull it down the node modules is the reusable code that you're using that everybody else made um and you do not want to push that to get oh yeah because that would be a huge freaking mess right so um you would have a massive amount of modules in your repository that had nothing to do with your written code yeah so what when you push that somewhere or to wherever we will want to add that to a dot get ignore file um oh and by adding it to that ignore file like it wouldn't push it up is it the same thing when you're pushing up um stuff to like service now like components and things is there like an ignore file you add it to um not a hundred percent sure the the node.js uh so the the servicenows tool is based on webpack and webpack is going to um webpack is going to walk through your code and it's going to identify all of the code that you use to create your component and it will compile that into the smallest package that it can manage without um without risking corrupting the code while still keeping it compatible to your current code yeah uh and it does a lot of fancy stuff to me so maybe it looks through and it's like oh we have that on our side so we don't need that yeah so so webpack uses what's called tree shaking so it builds a tree of your oh you're telling me about this and then like shakes the tree and it's like anything that's not attached to a branch all the like orphan code you're not yes it falls out yes yes so when it when it looks through the code any code that isn't touched by your what's called your entry point the the main point of your of your code anything that's not reached by that or reached by children of that gets thrown out so the image i have in my head is when you play minecraft because like anybody listening to me don't act like you've never played minecraft um but uh like when you play minecraft and you have like a tree but then you have like the random bushes that are like just hanging out in the middle of the air fire doesn't get to those because they're not attached that's like the thing that comes to mind for me but anyway maybe that wasn't a great analogy well let's see i think i'm actually set up at this point so we have an environment so well we have a project this is our project folder okay so we've got like we can like start slinging code now some code has already been slump what we're going to do now what we're going to do now is we are going to build this container so the first thing i need to do to build the container is i'm going to open and i'm going to open a terminal at that folder which is real easy in visual studio code and this is why i use vs code for everything uh nowadays it's got docker tools built into it if you install the plugins for it they've got an entire remote development tools package i am actually using that right now this is as you can see up here connected via ssh to my to my server um so i'm going to open up a terminal on that server under the now army knife folder and we'll zoom out and if you take a look down here in the terminal you'll see that i've got the projects projects now army knife um why is that projects projects that's weird you're in the projects oh it's because of that up there got it okay never mind the thing is telling you your code's janky jeez so wait wait so we're building the container now yes now we're going to build the container okay so we've built an environment and now we're going to build a container docker compose up uh build so this is the command we're going to use in order to use the dockercompose.yaml configuration file that we set up composer is going to read that file and build it if we did not use docker compose i would had to have done a docker run and added a a whole bunch of stuff to the command line uh i would have had to have taken a whole bunch of manual steps with this i can just do docker compose up which builds up up your command container yeah okay so i hit enter and you'll see it's building network it's building all the things you can see it going through all the steps creating the images uh or pulling the images down successful oh and we have an error why do you have an error okay so we can see here that it created now army knife it attached to it error missing script dev a complete log of this can be found here all right i know what the problem is so it says missing script dev if you remember correctly in my docker compose we said npm run dev right here on line 14 is my command npm run dev but in my package.json my scripts i have npm it would actually be npm run start because start is the name of my script in this configuration yeah that's actually the one i've seen before so npm run start is the command i want to run and this actually also gives me the opportunity to point out that um you know as soon as the container had nothing else to run it shut down it did not keep running so now i should be able to ah go back hit up arrow to go to the previous one hit enter we're going to let that build again it is building zoom out real quick um let's see phil says projects is workspace and inside yeah pride yeah phil the uh the the projects is my workspace uh name up here and projects is also this folder name on that per on that particular server um now what's odd here is i would have expected all right so i'm going to hit ctrl c to kill the current process uh that was not quite what i expected first of all i want to check this port port 9000 because i suspect that express does not use 9000 by default and if we take a look right here in the uh in the www file of the binary folder port is equal to whatever we pass as the process environment or 3000 i'm going to change the default to 9000 in this case it's like doing the important tag in your css actually no now let's not change the code let's leave the code alone you have to figure out why it's not running i'm going to add an environment variable to this so you're not going to use the important tag no i'm not going to use the important tag so this should change the environment variable in this container to set the port to 9000 actually now that i think about it i believe the correct is actually equal to and i think i have to do that syntax i think that's the right way to do it we'll give this a shot so i'm going to do a clear and we will run this again i love watching you like troubleshoot and talking your way through it like you planned these bugs but i know you didn't no i'm just screwing up there's a lot more bad language when i'm troubleshooting all right so real quick um phil asks does yamal care about indents like python um yes i believe it does i don't know how sensitive it it is to white space but i do believe it is white space sensitive um and the syntax is important i actually got an error earlier where the ammo was telling me because i did for i was doing hostname and i did host uh is localhost and it came back and it said no that's wrong this is supposed to be a string not an object and so i ended up having to change it to something like that um that's so weird where can we learn about the syntax of this i wish i could tell you most of this stuff i learned just by googling when i ran into specific problems um because there is so much going on here you've got the yaml syntax you've got the docker compose file structure you've got docker specific commands you've got node.js the package.json json format there's so many bindings and layers in setting up this environment which is why i say this is a really really high level this is stuff that architects do this is you know if you're stepping off of servicenow platform this is not something that most lower level devs are going to do when you're working in a in a product development company the architecture team is going to be building out these tools and the development right the development team is going to do docker compose up and get themselves an environment and start writing code yeah this is why when the poll came back and was like hey let's do that dev heavy stuff off platform i was like no so next what i'm going to do here is i'm actually you can actually through vs code you can attach two uh the terminal inside of the container i can attach to its operating system that's fancy so uh i right click and i hit attach shell and now down here you'll see that i'm actually in this uh in in that node environment now so i can type env to look at the environment variables and you can see port is set to 9 000. so that environment variable was passed over so that is good um unfortunately i don't quite see what i would expect to see because i thought it would spit out a uh let's see what's phil phil saying here uh being able to segregate these things and understand what is responsible this example this is a yaml issue yeah it's being on a single shared platform is actually alien to a lot of devs but in service now it's the polar opposite yeah for for folks who have developed primarily on servicenow so servicenow has like sarah hey you have words wordpress and yes squarespace too yes you have um i'm a designer and my whole site is like out of box squarespace because i'm lazy but when a lot of your development experience is on service now servicenow is the build environment it is the build tool like even uh there are like vigorous head nodding yeah there's a lot of developers that you know have developed on service portal and no service portal but have very little understanding of the angularjs underneath it because servicenow abstracts that away um so you know having that that shared platform is a huge advantage and it's one of the reasons why it's so fast to develop applications i mean i know sarah you have you have you yourself have probably developed applications on servicenow faster than it's taking me to set up this development oh my gosh yes i would have like a fully running ui by now right and that's that's one of the huge advantages of a platform like servicenow is you don't have to set up the development environment and this is this is before even talking about setting up database and access control and credentials oh gosh yes and what killed me is when i started diving into the stuff for the now uh the now experience framework and uh you know they're like oh do net install now cli blah blah but for those of us that are not used to that traditional and set up your dev environment sort of thing they left out so many steps and i was like on the edge of tears i was so lost um so yeah this this is this is so it did work this is so far away from what many of us portal developers are used to and there are some of us that came from like traditional development but it's a learning curve and it's there's a huge leap there's with no bridge in between that yeah so just just i'll be happy when you put this up on git and i can just download it and use it well oddly enough it it's actually running right now we'll find it so um i was expect usually with express there is an output where it tells you that it is now listening on poor whatever port you set it to uh it did not happen and so i was trying to troubleshoot why it didn't happen what i did was uh i added a port forward so basically on the container the express js server is running on it's listening on port 9000 yeah okay so it's listening for connections that port is exposed to the host server because of remember when we set the uh port exposed port in and we bound port 9000 on the host to port 9000 on the container well we had to bind one more port and that was binding my desktop computer the one i'm working on port 9000 to my server environments port 9000. so now what's happening is when i go into localhost ninth ah when i go to localhost 9000 it is taking from this browser and it is sending it to this computer port 9000. the port forward in visual studio code is intercepting it and forwarding that request to the host server port 9000 and then the host server port 9000 because of our docker configuration our docker compose right here oh cool you hover over it it gives you a little exp explanation so uh the host is forwarding from port 9000 to container port 9000 so it forwards that message on to the express js like the port pony express yeah kind of and so the net result is that if we come over here you can see welcome to express we're actually hitting the web server okay so now we can actually start doing some for real real coding and such um this is after building the container and then we can do for real-world coding yes our environment is now completely set up it is now usable now we may have to in order to add um in order to add other node.js packages which we will have to um we may have to or we will have to tear down and rebuild the environment there are ways of getting around that with hot module reloading and stuff like that but um the value of a lot of that stuff is more important when you have larger projects and more people it's useful but it can also be quirky to set up it's imperfect um there can be bugs with it and issues with it and so you have to balance the complexity of your development environment against the speed that you need to develop at so the purpose of the hot module reloading is to increase your speed if you're one developer how much is that going to benefit you versus the time it's going to take you to set it up configure it and make it run um okay 51 minutes phil says nice are we shooting for a certain amount or something um i mean you mentioned cookies earlier so at some point i'm gonna need cookies i think we'll kind of go for like maybe another 10 minutes here and then we can shut it down for the night i'll just kind of show the basics of uh express js and what we're dealing with on it and that will tee us up and set us up for next time where we'll bring in uh probably axios the axios package which will let me actually integrate into my personal dev environment okay so the the fourth step was like building that container um which is what we just finished and uh so we're gonna look at what we have existing in our container right now what uh express.js is yeah and then next time we'll look at adding some other packages and that'll be step five yes okay so if i turn around and i take a look in here first of all you'll see my environment has been built and it is running it has files and if i go into that user source app the working directory yeah you can see binary folder node modules public routes views app.js our docker fi all that stuff got copied into this environment that was that copy step yeah in the docker file um so all of that is now in here but what's cool is that uh so these folders here um in this in this docker environment are separate folders from these ones over here on the host they're copies of one another but they're not the same but what's cool is that because we have bound these volumes change i make to these folders and content on the host will copy over oh that's convenient so yeah that is that that's one of the really cool parts about developing this stuff um so now uh if i take a look at the app js this is kind of the setup for express js uh and this was built by that generator that express generator you can see all the basic setups you can see some of the routes so like for example the routes slash users here is being used down here app.use slash users is the url slash users is the url user's router is the code that handles it so if i come over here and put slash users uh it says respond with a resource right here okay now this is coming from this require right here so i'm going to go to definition this is all like right click functionality built into vs code yeah uh go to implementations no none of that ah it's been a while since i've used this stuff and you can still put it together just like that huh like you like we've been going through this whole process and you've just been like bit bit bit bit bit but oh it's been a while since you've done this it's been a while since i've used the context menu to look stuff up oh okay dude that's some kind of memory i can barely remember like where i put my keys so this require is going to require from routes slash users so folder routes users.js or actually technically no that's going to go to the index.js first so we can see that routes index routes users this one see how it says respond with a resource so if i change this guy here and we'll just give it a good old-fashioned hello world save it now this may be where i have to rebuild let's see yep see this is where the hot module reload comes into play uh so what i'm going to do is i'm going to kill i'm going to control c in my terminal up enter to rebuild it it's going to rebuild so once you get used to the the how to do that it looks like it's pretty yep oh look you made a thing so now we'll get that out json format well this is this one i was setting up specifically as a rest api yeah so basically what we will be able to do is we will be able to set up a web page we will be able to set up some rest endpoints server side and we will be able to integrate this rest server here with servicenow's rest endpoints uh so we'll be able to set up credentials so that we can turn around and connect to our personal development environment and begin to manipulate uh that servicenow instance from a tool that we create separately um phil uh uh oh we got a couple questions here so uh carlos says this is a front controller cool uh mvc out of the box yes uh so it is set up as uh you know i wouldn't call it an mvc well i mean what does mvc stand for model view controller okay uh so i guess it is a server-side model view controller i'm used to client-side model view controllers um so yeah it's i guess it is model view controller on the uh on the server um yeah express comes with that pre predefined and ready to go uh so that makes it really easy to to get up and going uh on building this stuff out um and then phil says in custom component development it does that hot build what's the difference okay so basically what you have here is uh this goes back to that hot module reloading and live reload these are two different concepts hot module reloading is more of a server-side concept where if i change something on the server for example this uh how this router works the server has to restart to apply those changes hot module reloading puts file watchers in place so it actually watches the files for changes whenever you make a change and save it it will kick an automatic process to restart that server we can set that up uh with this with a tool called nodemon and we may look at setting that up eventually because that one will be worth speeding up our processes for um but there's also live reload which is when i make a change to something the server uh to to like client scripts it's automatically refreshing the browser automatically refreshes so for example with some things and it's neat yeah so i believe it's 1001. oh that one's not running here let's let's throw this one up real quick 1001. you have an extra zero in there or ten thousand i i think i've got it right okay so make it sure so if i pop this guy oh nice nice um i was getting feisty uh earlier today i'm sitting here trying to work and you're like boom suck it no um so this is from the glide fast lab stuff i was working on so if i come in here to my project story forge site index.html i think you'd do the red text to trigger me no that that one i think is i forget where that one is i'll find it but if i save see how it automatically reloaded so that is uh is live reload ten thousand and one is more than nine thousand just broke my brain why um [Music] but yeah so this here is set up with live reload in place live reload is when you change a client-side setup and it automatically pushes those changes across to the browser and if i do a little inspect element here you will see [Music] this live reload script here that gets automatically injected uh into uh into the script or into the html uh in order to set up that that live reload um so yeah that's that's kind of how that works that's the difference between the hot module reload and the live reload but what both of them enable you to do is keep focusing on writing code instead of having to control c up arrow enter wait for it to rebuild control c up arrow wait for it to rebuild yeah boss i'm gonna need you to do that so i can just download the software and it already does all that and i don't have to worry about it we will inevitably set that up because we'll end up setting nodemon and live reload i may set that up off sounds like a pokemon off uh off live um because while it might make for an interesting live i really want to spend more time on live integrating the service now and you know maybe i can do maybe i can do something in notebook or something on how i did it um that sounds like a good way to go about it because like some of these different things you could spend some time detailing the hows and the why yeah what's of this stuff but we want to show some progress with this right you want to keep my attention which is never strong but yes ultimately you can see here that we've got the glide fast labs environment we've got the now army knife environment both of them are running on docker both of them using node.js one on port 9000 one on 1001 running two different applications and aside from unless we integrated them over the network neither one can touch one another they're completely separate environments so you know there's your advantage of docker the node.js is giving us the power to set up our separate website that we can now build tools that integrate the service now the first one i want to do and i i have a feeling some i i want to say i remember somebody already kind of started something along these lines but what i want to do is i want to be able to rip code off of a server download off of servicenow download it and be able to change the scope on it so that i can inject it into a different application i want to say somebody's been working on stuff where you can like download an entire application and change change the scope um and i kind of want to work in somewhat of that direction where i can like rip files off of servicenow i i really need a better process for being able to reclaim intellectual property that i've implemented on customers um in customers environments so that i can reuse it later um and also sometimes as a safety blanket for when the customer says hey we're cloning over i'm really really paranoid about that stuff and having a button i can click that guarantees that i downloaded the right stuff that's nice it is going to be better than the did i export the xml of the update set or did i export the update set as xml i have lost so much good code to that and inevitably when you showcase your service like especially for service portal you showcase like functionality built out before the design they're like oh we want that one build it just like that and i'm like oh that took me like 30 hours to build and i didn't get the code i'm getting smarter about that yeah and that's that's the stuff that i am i'm going to be working towards with this tool i'm going to be building an off platform tool that i can connect to multiple environments one tool connect to multiple environments and be able to do some orchestration and administration across different environments really to improve my uh to improve my toolkit so that when i'm going into implementation projects i have the tools that i need to both to perform administrative functions but also for uh code analysis and gathering analytics and you know being able to to inspect a customer's environment and say hey you know we notice this we really like to recommend that you do a b and c because it's going to set you up better i would love to have to build a tool that logs into my client instances and gathers the metrics i need to be like so this is why your service portal sucks and this is what we're going to do to fix it and answering some of those tough problems too when you're developing like one of those projects that you were on at one point and you were asking me for help on it and both of us threw our hands up and were like well this is going to be painful because it was an hr implementation where another partner had come in and just customized everything and we had no idea what records were even out of box or baseline baseline baselines baseline's the right word oh service now do not send the swat teams after me oh really you're not supposed to say out of box i did not know that i don't know if it's still a thing but once upon a time there was a big push to use the term baseline and everybody was like no it's baseline it's not out of box i don't know if that's still a thing really the only part of that the only thing like that i've dealt with is like we all refer to like normal ui service now as like the back end but you don't want to put a link in the header of the portal that says backend you know so we're like this is the platform ui versus the service portal you are so yes uh let's see so that cross-instance development as an individual how does that work across the team honestly i don't know yet phil figure it out but one of one of the reasons that i am setting this up as a third party app is so that eventually if there is demand for it and interest and reason to maybe we can implement some a multi-user environment for it where we can connect to multiple i don't know maybe this thing is just ends up being a dev tool that people can download and install as individuals to use maybe it ends up becoming something larger and we can turn around and you know create a common environment thing i don't know we can have it log in and just put like a message on the the system logs that says like sarah was here [Laughter] i'm gonna name it graffiti we'll maybe we'll do that as the first uh oh my gosh that'll be that'll be our integration hello world all it does is log sarah was here that is amazing i am on board um but to make sure that we're making use of the front end aspect of it we'll give a little text box so you can specify the message that you want to send i approve um um yeah phil as far as analyzing code goes so most of your code analysis tools built into servicenow are all regex based i want abstract syntax tree based i want to do actual code analysis i want to actually look at it and be able to identify when there's a nested glide record um that would be free you know i want to be able to analyze potential performance risks you know uh if somebody's having a performance problem i want to click a button i want to point at an instance click a button and have it come back and say uh this is this this is the most likely location of your performance issue because of x y and z um and you know another name for this tool could be auto travis because honestly this is a lot of the stuff that i end up doing on projects people will come in and say my widget is running slow as garbage and i don't know why can you tell me why and i have to go in and look at this code manually and read through thousands of lines of code very quickly to try and find potential sources of the issues and i know what i'm looking for but me looking at it is faster than telling somebody else what they should look for um and you know if i can take that subject matter expertise and put it into an automated tool then i can save myself time i can amplify everybody's skill sets around me and i mean isn't that kind of the heart and soul of what we do as developers is making other people's lives easier and making other people better at their job by automating the stuff that we do well man just don't let anybody have auto travis because then like you'll be auto travising yourself out of a job i i would it be the first time i've trained myself out of a job i i pride myself on training myself out of the job i love teaching other people and equipping other people to do the job and then i move on to something else i will the pro the world is full of problems i will always find something else i am not worried about that yeah you definitely found something else after you trade you trade yourself out of the whole service portal gig which you know thanks by the way no problem happy to help very much i'm the biggest portal snob now you know you've just ruined me and yes yes phil abs abstract syntax trees we we are going we are going really really deep off off the edge on on this particular series this is going way down the rabbit hole docker node.js abstract syntax trees you are wasting linting parsing um yeah if you're if you were looking for the insane stuff you came to the right place i think the next series we do after this we'll go back to platform and do more kind of trying to do more low code applications to you know bring it back to service now land a little bit but this one this idea first of all everybody was really interested in this idea we had like over half the people wanted to see this well this is something different and a lot of the the material out there is all based on platform you don't see a lot for uh you know how we can use tools off the platform to enhance our experience um and maybe this will help future product developers you know folks who have an idea for something to integrate with servicenow but aren't really sure how to go about it this is how they all work if you look at a lot of your product companies out there they are using build tools like the glide fast labs one that i introduced in uh in part one um they are using web pack and roll up style build processes to build their uis and they are using uh go and uh golang express js on node.js they're using these types of things to write applications that integrate to servicenow this is uh i i mean this is like this is real world product stuff here um so i am naturally very excited about it because hey it gives me a chance to build the tools i've been meaning to build uh it removes my excuses for not doing so and puts my feet to the fire with people watching me do it [Laughter] um i'm i'm you know i i complain a lot about integrations and this off platform stuff that gets away from my forte but honestly um knowing the direction their the servicenow's going with the uh now experience framework and everything getting used to seeing this environment and understanding this environment better is gonna help me and a lot of service portal developers that are in the same shoes i where we're used to this very easy to put together development environment and they're just like oh no here you go hope you learned how to do this at some point um this will get us used to it and make us ready to create those um really nice custom brand specific uh experiences on the new framework since they're taking away our service portal well and and i i want to encourage you and i want to encourage everybody else who may be looking at this and thinking wow this is way over my head type stuff um node.js i do have a little more experience on i have been doing it for a little bit longer especially with express js but docker is like brand spanking new to me um i and one of our co-workers showed it to you right um i think justin showed it to me um at the very least justin has helped me learn a lot more about it uh and then he shamed you into buying more tech for your setup of course that's awesome that's his job i'm just sitting here like at least do something to hide all the wires in our office and then i'll be good but like this this code creative every project you see here code creative code creative io glidefest labs uh now army knife engine x is a little bit older nginx is about two months old i think or no actually nginx is older because nginx was last year um on uh when i was doing the the salary survey tool oh yeah um that last year's salary survey tools when i first started on docker all these other folders all those are within the last two weeks so i have not been doing this stuff for very long so i mean if if there are experts out there that know more and you're like wow this guy's an idiot yeah i am uh i just got started on this stuff i am still learning it myself uh and still getting used to some of these docker environments myself and i'm just kind of learning it as i go along um so you know don't be afraid to to to dive in and just start learning it you're going to encounter errors you're going to encounter issues you're going to encounter you know stuff that's confusing but google is a very powerful tool carlos asks is get the best solution to accommodate five devs on the same custom app yes unequivocally um absolutely undoubtedly so servicenow does have a get integration with studio and i guess i mean it's passable it works i'm not gonna say it doesn't work and it works okay um but it it's more of a backup tool it's not a good multi-developer uh environment team development is really what's meant for that on servicenow but you have to have multiple environments for that and that's just unrealistic for most companies so offloading some of your code to get git is definitely an option building repositories outside is definitely an option i know of a couple product companies that have set up their own build tool integration chains where they push their code up to service now using a using a tool much like this um there's also the there's the vs code plugin and i haven't tried this yet but there is a vs code plug-in um i have a workspace no not that one i have a workspace and it is servicenow projects i believe yeah so you can see that i've got these scoped applications and i've got the source code for them and this is using the vs code plugin now i have not tried this yet but i suspect that you can um i suspect that you can stash this into a git repository do your development here and then push this code to service now because that's what the vs code plugin does um yeah phil says vs code plugin for servicenow is amazeballs i agree i love it um and i suspect that you can add git and make this a get file i have not tried it but i suspect that you can and at that point you would be able to push this code using the vs code integration you'd be able to push it to servicenow and have the git repository that is more traditional phil says you are still on the same instance ah that is true that is true you might not benefit from git one thing that is cool about it though and maybe the vs code may be a solution in and of itself for multi-developer environments because what happens is if you try to push and there's a conflict like what you have locally does not match what's in the server um it'll raise a conflict and give you a chance to reconcile it oh that's nice um which is when you're doing update sets um yes yes except it's not update sets it's like live while you're safe while you're pushing your save so like let's say that you and lauren were both working in the same instance on the same widget at the same time one of you is going to win that battle oh yeah and if you don't use the vs code plug-in the person that wins overwrites the other person's stuff in their and the only records you have is that it happened is the history you have to go back into history and find what you need oh that's awful in vs code you'll still have your copy she'll still have her copy and there will be a conflict when when one of you tries which one is the and you say and you also have the chance to merge as well much like with updates yes so there's a lot more protection in there when using the vs code plug-in so that means there's a lot less grumbling when they're committed and you find out that stuff didn't do what you want right and then you get all kinds of you don't have to worry about the you don't have to worry about the editor automatically logging you out and then you hit save but it doesn't save oh that problem goes away um you also have all kinds of plugins for visual studio code that simply don't exist in servicenow um you know you have really enhanced capabilities with your macros that you can do um which i think is what phil was mentioning on the syntax editor macros um so i mean there's a lot of superpowers in vs code and servicenow's been opening up a lot of opportunity both in the web component development tool the now cli the visual studio plug-in a lot of tools that enable you to make more use of visual studio code and for those of us that are on the pro code side it really opens up a lot of opportunities phil says the problem is really regardless of how you maintain your code base is if five devs are all touching the same artifacts at the same time which comes down yeah and and one of the uh phil says which comes down to app design and why utils are bad bad bad absolutely and one of the advantages that i do find in using this oh it went away go back to my remote not that one go back to my remote explorer yeah because it likes to open in the same sorry we'll fix it um [Music] so one of the thing with multi-developer environments is that what you have to manage is conflicts that's the most important thing uh this other most important thing is the ability for a developer to test what they are doing without interfering with other developers work this glide fast labs thing here is really designed to do that because what it does is it builds a distribution bundle this can then be used as a script include it can be used as a ui script it can be used as anywhere that an i a an inline uh anonymous self-executing function uh the iifes um you can turn around and build using es6 source code you can build that into a bundle and then take that bundle to service now and you can use jest for testing this code and so you can actually have a multi-developer environment outside of servicenow test the code get it to where you want it use a git repository and then push that code to servicenow once everything tests and is ready to go that's beautiful so there are options for multi-developer environments but a lot of the time you're better off excuse me you're better off moving to get git and yeah probably separating yourself from some of the platform development tools a little bit and going a little deeper on pro code servicenow's multi-developer stuff it just you only have one environment and that's the limitation is you have one development environment uh and development environments for servicenow cost a lot of money and until servicenow gives us the ability to within a docker package which they have um to turn around and what was that i allergies little dust dust in the air um you know but they might already have the capability okay um that was kind of loud it wasn't like a toddler sorry my bad um [Music] but you know if they were to offer the ability to run those local environments on on like a docker environment maybe we could get to the point to where we had true multi-development environment capabilities until then i'll be until enjoy the fact that i'm the only portal developer that goes on a project most of the time because it is hard when you're working in the same widget like i was working with another developer on a project that i'm still on right now and she and i work very very well together um but it was it it's hard hey are you in the widget no okay i'm gonna go in the widget and we had to like go back and forth and it it was just a mess yes and even this was like the best of circumstances she's a really good scripter yeah yeah and even with um unless you build build tools in servicenow there are limitations like this story forge app is being developed here because this bundle goes into an angular provider um or sorry a js dependency if you include multiple js dependencies the browser has to download all those individual dependencies if i tried to modularize uh an application like this all of these would be individual downloads from servicenow and that would be very that's awful that's yeah that's that's terrible um so building it into this environment where i can create a bundle and drop that bundle into service now so much better experience um now like 50 minutes ago an hour ago i said 10 minutes yeah you totally did and then you started talking about all the things and yeah well everybody's really excited about this and we're all like contributing and and the conversations flowing and it's nice it's cool we're having fun um i'm making comments that you're missing because you're speaking so passionately and we're all laughing [Laughter] so yeah at the end of the day that's the direction we're going next time we will pick up on we'll pick up on actually implementing some stuff on our now army knife uh to integrate to servicenow we'll start with that uh hello sarah hello my name is sarah that's not wrong with nh that's what it's gonna say it has to say yes and uh so we will give that a shot and then time provided we may go a little further on starting to try and rip code uh out of service now um so with that i want to will we have a thing like a visual thing next time yes we will my hair will make me actually like put on pants i may end up setting up a few things behind the scenes to get us there because i have to install some additional packages set a few things up so that we can actually do work next time i was talking about the camera so they could see your butt oh those visuals yeah i mean i got those already hashtag priorities man ready ready ready you better talk oh my god better duck you better duck you better duck see hi everybody oh my gosh you're terrible you're actually kind of off screen right now no i'm not take a look you'll see i don't trust you the trust i have in you my husband does not go that far you can show my star wars poster star wars poster yeah oh no i'm just gonna hang out here because you can't be trusted see now it's trying to point at you i'm trying to keep it off you but anyways anyways so next time we will have visuals i guess and uh sarah will continue to hide behind the keyboard so uh with that like to thank everybody for joining us and uh hope to see you next time