Web AppBuilder for ArcGIS: a Deep Dive into Enterprise Deployment

so this is the session for web app builder for ArcGIS to deep dive into enterprise deployments my name is Marc Torre and a esra employee in professional services and based out of the Charlotte office so day-to-day I can work with clients implementing ArcGIS you know different patterns and practices and my colleague Nick Pergamum is out of the st. Louis office yep and the st. Louis office I mean professional services I do a lot of project work so it's very similar to what you guys will do using web that builder to create applications for customers that's my job so that's that's why they bring me into this - to kind of hit things from the perspective that you guys are dealing with everyday cool yeah so kind of it you know show of hands you know we kind of like to get an idea of who were we're talking to and kind of what our audience is how many of you guys out there are our arcgis enterprise kind of users awesome awesome and how about ArcGIS online everybody's artisinal I know it's cool awesome so all right so kind of a brief overview what we'll be looking at I'm gonna talk about some of the kind of typical patterns that we see in professional services in regards to our chess enterprise and and using web app builder in and with our chess enterprise I'll go through some of the the the the basics of some you know getting it running installing on your machine some configuration a little bit of security and then Nick's gonna get to do all the fun stuff he's gonna get into the actual development and kind of best practices there and we'll come back we'll talk about deploying these apps that you've generated and a little bit of post-deployment ideas tips tricks so on and so forth will generally kind of jump back and forth in between slides and go onto our machine so you know bear with us we have audio Visio video so we kind of like to clarify what enterprise deployment is and kind of I guess us in professional services tend to think of it as enterprise not only the product but a large user base or I've got a lot of people using the system there's a centralized area for that system so canonical source of information that everybody can go to and so that's kind of what we you know throughout the talk will say Enterprise you know meaning meaning that we want a lot of collaboration with lots of users from central location so the first kind of step in that is defining where that centralized location is or any so we have artists on line which is a completely ESRI managed ESRI responsible for multi-tenant scalable system right anyway of our chess enterprise right that's where you are in control of the software you install it on your infrastructure you know you're responsible for keeping it updated for controlling the service level agreement right so it's kind of in your hands and then part of that is is you know that it's never a black or white issue you know professional services we see kind of the entire spectrum of implementations and setups and I know going on site and installing you know working with with clients you know no tube to trip or two trips are ever the same and I just usually everybody has a little small difference in their system or security so so we usually see some hybrid and ArcGIS Enterprise out of the that that hybrid piece comes in in terms of portal using ArcGIS on my base maps or any some of the living Atlas stuff there's there's there's things that enterprise uses from ArcGIS online and that's if you have that capability that connectivity if not our Geist Enterprise allows you to go completely disconnected right so we can completely disconnect from the from the outside world and run our our enterprise there so that's where the the enterprise lives right is that ArcGIS online or is it enterprise so once we've got our our kind of base of operations set up we're gonna jump into web app builder right so out of the box we have the embedded version of the web app builder and so this is a web app that allows you to build web apps the ArcGIS online version is fully hosted fully integrated in the system and and built in right we don't have to worry about upgrading it we don't have to worry about kind of maintaining that application and then we have the same applies on the portal side right so web app builders built into portal when you install web app builder or sorry when you install portal you get that that same version of web app builder so for the developer edition ESRI has taken that code from ArcGIS online or and and packaged and Bumble that up into a zip file so you can go out and download the source code and run web app builder outside of portal or ArcGIS online you know there's pros and cons to both all right so the the embedded version you're kind of limited customization wise to what we provide in terms of widgets and themes it's not really supported to to change or modify that built in version with the developer edition that world kind of opens up and and we as developers can go in create our own widgets modify themes run code we can have direct access to that app the embedded versions right we have to go in share go create a web map and then when you share that web map it becomes available to open in the embedded version of web app builder so being that this is the dev summit we're gonna kind of focus mostly on the developer edition alright that's what we're gonna be talking about I do that one one slide about the embedded version but we'll get there and I'll talk about it so we got a portal got our web app builder kind of what we've seen you know common patterns like I said there's usually kind of shades of gray I mean by far I think you know at least for me the the most common pattern that we see and that I work with is portal and dev edition of web app builder and then what you'll see is as kind of as your your organization's get smaller then you move to ArcGIS online alright to store all your items and and use dev Edition locally using ArcGIS online is that portal and then and then the portal with the embedded version and then ArcGIS online with independent version and just a note kind of in on the the patterns a lot of the times you know when when clients will call me up and say hey we need to do we need to have an application to do X Y & Z a lot of the times will will kind of take a iterative approach to these right and and and take that hybrid approach we'll say okay well let's let's stand up a quick embedded version using ArcGIS online kind of get the the main functionality running put it out there let our users kind of hit it use it and then those questions start coming in oh well this is a great app but I'd like to add this widget or I'd like this widget to actually do this instead of you know Z so at that point then we can take web app builder download it load it up use those same items that we were using before whether those are from portal and and we have that now access to that full source code all right so hopefully everybody's kind of gone out and go to developers are kiss comm and find the web app builder dev Edition and so when you download that zip file you extract it you put it on your machine somewhere or in this case you want to put it on a server the first question we kind of wanted to two answers is where where the JavaScript API is coming from right because by default in the downloaded version it's going to use our our CDN right and grab go out to jsr kiss comm and grab the latest version of the api and use that and that's that's great for getting started but again in in instances or organizations where we might not have that connectivity or we just want to manage the JavaScript API ourselves you can download the the JavaScript API and set that up on your system and point the your your portal to to use that in this case portal already has already comes with a version of the API [Music] alright so I've got a portal here installed locally on my machine alright and if I look at the web adapter and then JavaScript API Jib JavaScript API all right I could see that we've already got a hosted version of the JavaScript API for us they're all good okay one other kind of quick important note you know as you guys probably all know the web app builder developer edition is built on top of node.js so I think of node you know and then I guess essentially it is kind of a headless chrome instance yeah yeah so there's several different ways to run that to start the web app builder right by default we use the startup dot dat so this is just a bat file that we can start up double click it's going to spin up that web app builder version and it gets an output here hopefully we've come up okay so right so our app comes up so what that means is every time you want to use web app builder you have to double click that start up top dat not necessarily the the the best option so one of the the other options you know if you have node installed locally we can come in here and see if we have node all right that looks good I can come in to my extracted version is that big enough for me if it's is it good boys if if we have the node installed version and we can come right into the the web app builder directories and right so I've downloaded this into my onto my c drive under the WAB directory gone into the the the actually the folder I just called a 2.7 SDS I'm going to just go into the server directory there and see everything there there's a server j/s file if I say node server J s that will perform essentially what the DAT file is doing start up that port again that comes up they can refresh this going and we've got our our app running again okay so we'll stop that and one of the nice things that the web app builder team has provided to us is there is a npm script in the install and it called install windows service and what that's gonna do is take that node command and run it through a process and install it as a Windows service on our machine all right so I can go into services now refresh it and now I've got a arcgis web app builder service running i can start that back in here and refresh it and so that that kind of runs is normal what's nice about that is you don't have to worry about going in to start up the bat running at each time you know and kind of as you'll see further on what we're gonna do is share this this web app builder instance with our our organization so we don't want to have to kind of manage that and it's running as a Windows service allows it to run kind of on-demand as we need it okay back to cards and so I know kind of hopefully everybody's worked with app IDs creating an app ID you want to log in to your to your portal and this is kind of a little bit out of order because the node demo but before you can run web app builder you'll need to generate an an app ID on your your portal so you want to come in to your content create an application give it a title tags all the necessary items there right and then scroll down to the bottom and you'll see this registration info and so what web app builder is going to do is say I need to talk to a portal somewhere right and I need to make sure that we're we're we have items we can use and and and have some connection to the portal so the redirect URI here is really important because web app builders going to go out talk to the portal and then portal is going to tell web that builder you know send a kind of a request back and say okay we'll send a request to this URL that's that's authenticated all right and so I know these this you know I've kind of scratched and gotten into some trouble with these redirect URIs but essentially you want to make sure that your your urls point back to the to the web app builder version and an app that that your you're using okay so where is that live if we look at I've got a code so I'm just gonna take this out I know alright so in the in the web app builder code here there is a and and I'm just looking at the this server directory here and there's a sign in info dot JSON file alright so every time you sign in and provide that app ID it's gonna write information to that I just took the the app ID out of mine and you'll notice now it's looking at I'm gonna just repay stit in here it's gonna ask me to sign in I sign in and now every time I go back alright that's persisted and and we can login portal knows who I am my account should be logged in there you know so that app ID is kind of our important and and can can be confusing and head-scratching sometimes but all right so that handles kind of getting it going and running configuring it you know now that we've got our web app builder app running as a Windows service right it's accessible all we can take that item and share it with featured apps so if I come back over to my portal here you see I've got a shared item I can come in there and just click it and I'm off and running I in web app builder we're good to go okay one so this is this kind of jumps out of the the dev edition a little bit but I thought that's kind of cool and I wanted to show it real quick do you guys I think last year I don't know do you remember Nick when this the custom hosting widgets was it last year yeah so that so so now we have a way to actually host custom widgets inside the portal right so Nick it's gonna write these cool widgets I want I say no I like those would just I want to put them you know in my portal for for my embedded version users to have available right so what we need to do with that is we need to create a virtual directory right somewhere enable an honest but anonymous access and it'll HTTP and able coolers allow it to handle JSON because actually what it's going to do is is push out the manifest files of our custom widgets right so we're going to go in kind of like we did before with the application ID but we're gonna check this application extension that's highlighted there the extension builder and then for the manifest URL you'll want to give the virtual directory path to the manifest of your widget so here on my machine I've got this directory called custom widgets within that I've got a select export custom widget within that directory there's a manifest file right and this just kind of is the metadata for the widget all right shows you know what it is what it does kind of information about it right so I've got that in that folder and I could stick a bunch of widgets in there but I need to go register each widget manifest separately as a separate item all right and over here in iis I've got that custom widgets virtual directory so if we go back to portal them and open up web man so I'm gonna share this guy great web app builder right now remember this kicking off the embedded version and just real quick just kind of wanted to give you an idea of what this this looks like so if we go into widgets I'm gonna add a widget now I've got this custom tab over here and there's my custom custom widget so I could go and add that to my app and and running off and running all right so one thing to note is when you when you when you register that application ID that actually takes that that information the manifests and stores that in the portal item so if you update that at any time you want to update your your app ID all right once once you kind of register it kind of breaks that that information okay kind of to jump back to our our web app builder version right we've got that running and shared and it's accessible and we kind of want to disable the embedded version now because we want people to use our our local version so we're gonna go through and show how to disable the the web app builder tab from from the portal right the air on that slide there I need to update the version but essentially what you have in your your portal directory here right that's the the good version 10 6 right there's a config j/s file and within that file I mean it's it a ton of portal configuration settings alright so you can come in here and tweak settings for your portal the one we're kind of interested in is what about builder enabled all right we can just switch that to true to false save it restart the portal and we'll do that now gonna restart our portal but you'll just go into services restart your portal for ArcGIS and that will remove that tab look at right from the sharing sharing dialog alright so now when we go in create web app we just get the configured new web app we don't get the web app builder tab there so a little bit on the the security in HTTPS certificates and we have web app builder ships with self-signed cert those are stored in the CA cert em file and CA keep EEM file and and those are usually you know fine for for local development and getting started but generally if we're going to be serving this to a lot of users will want to embed our our see a signed certs and you'll notice when I when I go into web app builder here alright I get those those nice green locks and that's that's just because we at ESRI have a certificate server right so we can go in request certs for our machines and so we took those convert them into PEM files and we'll go into kind of doing that now but you know if we look I just converted that certificate from my certificate authority into a PM file with a key and replace the original ones and now now our web app builder running on three three four four port is is valid and secure alright ok so that's it for me I'm - Nick alright thanks thanks mark so now you've got Enterprise Builder kind of up and running you've got it installed you you started developing poking around and doing some things I'm gonna take you on a journey about a year later where you've got multiple developers you've got a ton of custom logic that you've written you've got a bunch of widgets and you're trying to wrangle that so that's where we get into the enterprise development space so what are we talking about when we talk about enterprise development like I said generally it's a project that's got more than one developer that's contributing to it typically it's a project that's deployed in a multiple environment so like Mark was saying you've got a bunch of users you don't want to just deploy everything straight out to production so you've got a development server you've got a staging server you've got your production server you've got these different stages you know good clean development practices and then usually it's a project that's grown to a significant amount of complexity and so what do I mean by that oftentimes and professional services we kind of run the gamut of what people want you know it starts with a user's like hey that that one widget that's out of the box is cool we want to customize that a little bit we've got other talks that kind of go into that so I'm not going to hit that I'm gonna hit and focus on the things where you know you've got logic that just doesn't fit cleanly into a single widget and we run into that all the time there's pros and cons too and I want to spend a little bit of time talking about that and then the the real fun one is when you're digging down into the guts of web that builder itself and you're starting to tweak things down there we find ourselves doing that as well so that's that's what I'm gonna focus on here this is this is down the road stuff when things are getting fun so a little bit about source code management paradigms you're you're working with multiple people so you've got to have this in place there's a few different ways to do it I've seen a bunch of different ways that people tackle this issue and we definitely have a recommended approach but you know the like everything else there's not one size that fits all it's really gonna vary on what it is you're trying to accomplish and how your organization does things so these are what I see I see people not having any source control please don't do that that's great if you just started with web app and you're just poking around and getting going that that's cool don't don't don't source code control you know your playground but when you're developing things for production you absolutely have to have that in place so we see with the second one here there's some people that will source control just everything you don't need the source control web that builder itself there that's not really necessary typically what we do is we keep the zip we unzip the zip and then we've got that stored somewhere else in our directory structure which I'll get into in a second I see this other one too where people will create one single application and their source code control just that either by exporting that web app or by going into the server apps / whatever your app is that they'll take that guy and those source control that I mean that's better it's better than not having any source control but there's reasons to not do that so what we typically recommend is that you only source control the code that you're changing that way you're keeping your logic separate from what that builder and I'm gonna go through what we've got for a build process to take that code that you have and inject it in the web app builder one of the really good things that that gives you is you can upgrade the development of addition of web that build are a lot easier if you've done this option where you're just controlling your single application and you're kind of going in there and adding stuff to it you'll get to the point where you're like hey we need to upgrade web ad builder versions what were our changes what what code did we make in there it's a it's not super clean so we always recommend keeping your code separate from my by builder injecting your widgets if you do any custom other logic inject that as well and the way that we do that is something like this you know web app builder has already built on nodejs so there's two other packages that node has called gulp and grunt they boasts that basically do the same thing for awhile I use grunt now I use gulp I don't know I do you just change after a while it's good to kind of look at different things and what they do but what we set those guys up to do is take the code from your repository run it through a build process which can inject it into either stem app itself or into whatever app that you've created there's not a really clean way that I've found to say which one goes where so sometimes I inject it into both of those sometimes I inject it in the stem app and then when you go through the app creation process it will pull that your logic over it the app that it creates oftentimes I find myself creating an application and then building into that so injecting the code into the apps / - I will show some of this bill process in a second and but this is kind of like how how it works with with gulp the way that gulp is set up is you build concise tasks and you can build these tasks for all sorts of stuff and what I'm doing today is just barely scratching the surface of what we have like our build process do so these are like the concise steps we've got a default task little run I'm gonna get into this environment thing in a second but we'll load an environment file we'll have to configure tasks and then these other copy tasks which will inject the code over there and then you finish that up with a watch task which will watch your repository and then any time you make changes into that it copies it over for you you can build as many of these tasks as you need so typical typical examples of other ones that we use is linting you can throw your unit tests in here we're an enterprise space B unit testing please that's great stuff to do so that's that's kind of how gulp works grunt is the same way you know your building that this build system I like gulp a little bit better because it's it's JSON or it's a JavaScript grunt is JSON files with the the multi environment configuration I've had a lot of really good questions from you guys that talk specifically about this stuff you know you've you've got your application you want to deploy it into multiple environments so a typical configuration that you have will look like this this here where you're specifically pointed to a service well when you build that for the different environments you need to point that to different services so that's what we have for the environment part of our build process we can spit it through and change the configuration is to look like this how we do that is another gulp package it's called gulp replace and it uses another node package called yards where you can pass in environment variables so we've got our environment variable sitting over here in this dev JSON staging JSON or prodigious on gulp we'll pick those up based on the command-line argument that you pass it it will go through with the thing called gulp replace and replace all of these this at at whatever the ADA that is not important it's just to make that stand out make it easy for a gulp to find those instances of those variables to replace there's nothing that had like triple adds at the beginning your instance what I picked that and then it generates these configurations for you so let's take a look at the way that we typically have our development environment set up here's that environments file these are super super simple so remember think big think lots of URLs lots of services that we're pointing to these will have you know a variable in there that's pointed to the end point that you've got this is what we have for development this is what we have for production that's not a real one but if you get the point and this is what we have for staging we end up when we do this we end up having to source control our configuration files as well so instead of having those configuration files point to that specific URL we've got that environment or that variable in there and then what we do you know like so this is your web application running if you open this widget right now it's pointed to that when you go in here and you say build this for staging you can run that it does its work to replace those variables that we've got give it a second and then when you reload your application now it will be pointing to the staging server so you can take that up take that package that up and that can be your release to your staging server same with production all that's done via via gulp we we heavily use that stuff so definitely check that out and look into that like I said we also keep our source code separate from web app builder so we have a source folder in that we've got our widgets I've got one single custom widget in this example it's really tiny but it gets injected down here into web app builder itself so that's that's how that works it keeps things clean and we add this wav folder to or get ignore so we don't commit that and then the process we follow is that every developer goes and installs whether that builder on their local machine and that's how they set up their development this this is always a fun topic for me I love this one because it doesn't take long when you're developing custom applications to get to the point where you can't just write your code in a widget you feel you feel bad adding all that logic just in that widget folder so there's there's absolutely very very valid reasons for doing this kind of stuff we find lots of times we'll develop a custom widget and then it'll have a UI element in it that they want a customer once somewhere else so you don't want to duplicate that code you want to put that in a common spot and then the question always is well if it's not gonna go in the widget folder where does it go we always put it in the libs folder so if you look in web app builder itself there is under our applications there's a libs folder so we will make a custom folder that goes in here you could just inject it straight into libs that would work too but again we'd like to keep things clean so we would make a folder called custom and then everything would get injected in here and then you can include these classes that you create in your widget just like everything else so here's an example of you know the UI element in multiple places this is a some filter statistics we had two widgets that that had that same logic so that when in the libs and then we had a folder for filter status and then it's a dojo digit so your digit files go down in there when you add things to libs you have to update your build system your build system can't just pull from source it's also got a pull from libs now so that's what this is showing you just it's a build system you're constantly having to tweak it as you add other things there's not much to this slide but I don't want to gloss over this this fact you know when you think whether that builder you're thinking in terms of widgets and you know lots of times you want to share those widgets there's a way in you know the online version of portal to add your custom widget to it if you start going to town adding all this application logic you can't just pick your widget up and move it it's got other than other dependencies so it's kind of a per long con thing you know if you if your goal is to make your widget portable you don't want to do this kind of stuff if your goal is to have a lot of you know small components and a lot of application logic then absolutely go to go do it you you certainly can and then just a couple additional tips and tricks to kind of round things out you know as we've had multiple projects looking at web builder it's become you know important to understand what web ad builder is doing and how it's doing its job so we could automate a lot of this stuff don't be afraid to look down in there and understand what whether that builder is doing we're developers so bill go tinker have fun and then understanding web ad builder configs like I said we source control their own configs because we're doing a lot of variable replacing and they're so having a good familiarity with what those configures are doing is important as well get to know Jim you better you know Jim you is that framework library that web ad builder is built on there's a ton of good stuff down there there's some CSV utilities that I just used for something in one project I was working on there's some jet geo JSON converters down there there's a whole slew of digits that are available to you to include into your custom widgets to you know use those it's there for you and that's all I got back to you mark no my microphone okay okay so a few more slides you know so we've we've kind of have our application built and then you know it's kind of what next so depending on what implementation pattern you've kind of decided on the deployment of those applications kind of berries right so by default and the embedded versions that's kind of done for you right no problem we really don't need to do anything once we create the app we have the URL that's it's deployed essentially for us web apps used as templates right so if you save your web app builder and just and save that as a template it's hosted from web app builder that's probably not you know the the best place for it to live we really want to kind of have that in its own own own home per se and then the developer edition right applications right so so this is kind of the fine-grained option where you need to manually deploy this somewhere and I know kind of in my case and I think Nick too is what we'll do is use build tools to deploy the actual applications right so we'll have a cloud server somewhere that I can run a continuous integration on it'll go out to github pull stuff down build it and and have our deployed app right okay I think we're almost there I do I did want to show these the use of proxies I know you know these these always come up and I don't I think you know we're working with proxies almost every day there is everybody gone and use the proxy some github the proxy yeah all right so it provides a lot of resources for kind of working with secure services cores Oh F Oh auth logins token based on the ten ocation you can log all the requests that come through the proxy it's pretty cool and helps because what happens a lot of times is everybody wants doesn't want their services out there just kind of for anybody to to mine and drill and find so they'll secure their services develop an application based on these services and then well we really don't want the users in this app to be presented with prompted for credentials right so we can by using a proxy we can take those those credentials embed them in the proxy and the proxy will take care of the authentication for us and the end-user won't be prompted for credentials so I just have a real quick kind of simple sample here so it's essentially two files right so in our if well go out and grab the config file I'm going to add a URL to some server out there with my username and password in it and then in my app where's my app [Music] configs okay I'm gonna tell the app to say hey any requests for these particular services that live in this URL I want you to proxy those fennec ate them and open the app without prompting the users so if we come in our web app builder version here I've got two apps both based on the same web map that contains the same same item right one that is being proxied and one that is not being proxied so if i look at this here without the proxy apps kickoff hopefully and I'm prompted for credentials right you need to Afeni Kate to see this this service if I look at this this app here everything's working correct okay there so my service comes through I've got my point I didn't get prompted for credentials what happened is that request the app made a request proxy saw that we were making a request for that particular service when I got a token appended to the quest pass it back to web builder and we can now use this app without having to to be to prompt our end-users for credentials okay so some other web app builder presentations coming up today the advanced development tools and techniques by Gavin and George that they go pretty pretty deep into actual widget development and then the JavaScript applications for the enterprise I know you might know more about that one yeah they've got a build process to four like minifying all of the web app builder code and then making your package ready to ready to deploy though they'll dig into that too so that's a really good one yeah all right and we could do do you have some time so yeah we can take some questions and you know please rate us so he can fix what's broken and so on and so forth so and I'll be at the I'll be at the web app builder Island the rest of the day so if you have any questions to for me yeah greater swing by what resources I mean I would definitely point them to these web builder presentations that we're doing and we've been talking about doing a blog series that goes into depth with these I think we're gonna discuss that more and see if we can get some things out because they're you know when you get into this stuff there's there's a lot of these nuances and a lot of the things that we find ourselves doing a lot that I think would be really helpful for everybody else as well good question yeah and a lot of it like what Nick said is is just grab the the developer edition all those those widgets all the back end all the stuff that that we use to build to to build the Builder or in that gym UJS directory so you know like the filtering selects and the selection manager and all those things some of them are documented but you know you can actually go in it's a none minified code so you can go in and actually see how those components are built and how they work from looking at the source code so a lot of times what I'll do is I'll just kind of spin up one and see how web app builder does it a lot like in the settings and configuration file there's a lot of those gym you components or you use so you can kind of say okay I'm gonna get a filtering select that filters all the feature layer point feature layers that I can get a look at that component see how it does it grab it or just reference it yeah I mean as far as the build system stuff it took us even us internally awhile to figure out how to streamline that process so I think a series of articles that talk about that is is really good to be doing in the back yeah the the default port is 33 44 and then if you want just HTTP it's 33 45 and HTTPS is 3346 it directs them to that URL to that port yeah yeah yeah the service yeah right right um that's a good good point I don't know do you know Nick I'm not sure yeah yeah I don't know we can check on that if you want to yeah yeah yeah yeah now I agree yeah that's a good point right yeah come swing by the island and we can talk about that stuff anybody else all right well thanks guys we we appreciate your time have a good rest of the conference we'll be here for a while so if you'll not come

Channel: Esri Events

Views: 1,568

Rating: 5 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Esri Technical Session, Esri Developer Summit 2018, Esri Dev Summit 2018, Nick Brueggemann, Mark Torrey, Web AppBuilder for ArcGIS, SSL certificates

Id: jG1YMtjaGUU

Length: 50min 15sec (3015 seconds)

Published: Mon Apr 30 2018