GraphQL+Blazor Toolkit with Sameer Doshi: Getting Started (1/4)

[Music] um [Music] hey everyone welcome to a special series from dev radio where we're going to look at a really interesting toolkit that i'm excited to see get on this channel i've tried it hands on myself i'm really excited to get on one of the teammates who's working on it to get in and just show you what it's all about through an entire series of videos as always we got matt calder with us hey man how you doing doing good this is gonna be cool yeah really cool we got to see a little behind the scenes so we are pretty excited about this so today we got samir with us samir how are you hi samir this thing is just too cool um i saw it on github i pulled it down minimal changes and they're well documented i was able to make and i had it running and i've never done anything or graphql before i've done a lot of rest stuff but graphql is completely different i've done a little bit of blazer but this also has some pretty interesting blazing components it's kind of nice to get started and get moving pretty quickly and that i know i want to get out of your way because i know you got a lot of really cool hands on technical stuff to show us but samir um what can you tell us about this on graphql and blazer toolkit uh sure sydney so um i'm samira doshi and i'm a cloud solution architect at microsoft working in healthcare and one of the things that i often saw with customers uh was customers had analysis paralysis on how to get started with a modern secure stack so if they're working with a stack they're familiar with they're good to go if they're trying to decide on building a new app from scratch there's a lot of talk and a lot of board meetings and uh discussion on do we use react do we use blazer what should we use for a back end and that ends up taking a a long time to resolve and what ends up happening is the stakeholder who initially wanted the app never gets their app for for weeks and weeks and weeks and that's not a fun experience for anyone so what we did with this kit is we put together a starter pack that you can get started with in less than an hour you don't need admin privileges or anything like that you can have it up and running in azure in a production site and have it be secure from the start up so the experience that you described where you're able to just clone it down and get started that's exactly what we're going for and i'll walk you through how to get to there all right so yeah let's let's let's look at that technical walkthrough because again i think people will be really excited about what you have to show awesome uh so what we wanted to do was we wanted to use modern stack so again we're going to use a blazer rundown app complete client-side code and graphql as our back-end api and what we've done on the repo if you go to github repo we've got the starter kit here we have just a plethora of instructions on what to do so these instructions run the the gamut from getting this fully deployed into your azure subscription to the very very minimalist here's what you need to get it working on your local machine and then take it to the next level and get it working on azure so you've got something you can show to your stakeholder and that's really what we want you to do is right there in the meeting where the stakeholder is present pull down the starter kit get started and start showing your stakeholder exactly what your app can look like so in this instructions we've got instructions for creating your your deployment like your static website uh that you're gonna run this in we've got instructions for creating all of the azure ad resources that you'll need and again you don't need to be an admin in order to do this and then we have the actual code to run the project so without further ado let me show you what that looks like and i'll show you the only changes that you actually need to make to get this running okay so here's visual studio i've pulled down the project and i'm following the instructions that are included in that readme and they are very simple let me just walk through i go over to get changes we'll see the only things that i changed are the two app settings files within the project and those app settings files have been changed so that they include values from my azure active directory and there they are very very simple and you can see exact samples of how to do that right there on the github but without further ado let's just go ahead and hit f5 so the only things that change in those configurations i'm going to hit f5 to launch the applications we'll see what that looks like and we'll hop back into visual studio for just a brief second to give you an overview of the projects it's pretty interesting because like you said the instructions on that github website walk you through okay in this json file change these settings and in this json file change those settings and it even has links to tutorials if you've never registered our application azure id so it's pretty comprehensive we are so what the application will do is it launches in two pieces one is this banana cake pop this is our graphql back end and i know we're all interested to go into it especially with a name like banana cake pop but we'll we'll leave it alone for a second and go to the front end piece which is uh as you've seen it's the boilerplate blazer app and and just to our nose i've got i've got my screen here in dark mode there's the boilerplate bootstrap blazer app it has authentication enabled let's go ahead and let's just click on fetch data from graphql and see what that looks like all right so the app is going to authenticate because we want to be secure it is fetching data from graphql and it happened really quickly because it's happening locally and it outputted the response so this response is from my api app so it's got kind of a heavy text and then it also says my id here uh we also have an access token which is pretty cool so that's pretty much single sign-on with your azure ad account so that was cloud-based but the api you're calling is local and both the front-end and api are using um aed for security is that correct that's right uh this is a uh secured end to end so you cannot access the api without getting an access token uh and we put this access token here so that if you're working with that ide that we were on a little bit earlier but at cake pop you have easy access to it but what we want to do is we want to make sure that yes you can get started quickly but we don't want you to get thrown off later on in your development journey by having to then implement security we want security to be built in from the start so i know we're all interested to walk through some of the code and what i wanted to do is give a brief overview and then we'll walk through the code in a later session yeah i'm gonna stop the debug here and i've got two solutions blazer ui which is exactly what it sounds like it's the ui component and i have the graphql api and that is it those are the only two projects within my solution both of them can run independently and like i said before when you pull down this code from github you only need to modify configuration both to get started but we've structured them so that it's easy to make modifications to either one so that you can quickly get feedback from your customers because we want you to get value from the starter pack asap so that your stakeholders can get the value that they're looking for um so so sydney without uh further ado i think what we should do uh is uh think about what we'll do in kind of our next session so the two things i want to think about doing are let's let's talk about how it is that we'll modify the ui let's take it past the boilerplate and take it into something a little bit more customized yeah and then another session let's also modify the back end uh and walk you through a little bit of what graphql has because that might be new to a lot of people and if you've never seen it it is awesome and it will change your life yeah so yeah let's let's do a series out of this so we'll do a video where we go into blaze ui modify that ui like you're talking about um for those who are familiar with blazer and want to see some cool tricks we'll do that and for those who are new to blazer would definitely um have enough information to help you out and put you in the right places and the same thing for the back end uh we'll look at graphql which i'm very interested in um as someone who hasn't had a lot of experience with it and um look at how all this is built up and how like you smear like you said you can customize this smear again looking forward to the rest of the sessions in this series we're definitely going to get dick dick we're definitely instead of getting over it's definitely going to dig deep into this tool kit and have a lot of fun so samara matt i'll see you in the next session see you then [Music] you

Channel: Microsoft DevRadio

Views: 25,649

Rating: 5 out of 5

Keywords:

Id: AcDkciT3kDI

Length: 10min 3sec (603 seconds)

Published: Wed Aug 11 2021