VS Code for the Web - Azure

vscodeforthewebazure.txt

          o [Music] hello hello everyone welcome to the vs code live stream if you are new here my name is Olivia I am a developer Advocate on the vs code team um and I'm so happy to be here with you all um the live streams are a great chance for us to bring guests on Spotlight different features different things that use vs code um we have a really great lineup today that we're going to be talking about some great guests um but before we dive into that let me know where you're watching from in the chat um if you haven't been
          
          in these before we really like to make this an interactive experience um so as we go through the demo today talking about the product we'll be showing off um definitely let us know your questions we'll be monitoring the chat for that um and asking our guests as we go so it's a great chance for you to be able to talk firsthand with the people people who work on the product you love hello abriel Hi how are you doing thanks so much for joining um definitely drop in the chat where you're watching from um we'll give you a shout out but
          
          with that let's go ahead and dive into the reason you are all here we have merera and Alex coming on today to talk about vs code for the web and Asher hello how are you doing good how are you good thanks how you doing Alex good how are you good um we have Ahad watching from Syria who are saying hello to you um from Taiwan so Mir and Alex I know that this is the first time yall have been on the live stream um but one of my favorite things is the fact that we have people from literally all over the world who
          
          join these live streams it's a really great chance to connect with our uh users all over the world so with that um if you all want to go ahead and just give an introduction since is your first time and maybe just talk a little bit about what you'll be showing today yeah sure um so yeah I'm merera um I'm a product manager on the Azure Dev tools team so we basically um are in charge of a lot of the um cool features that you see that involve like Azure related products in our developer tools so one
          
          of the products that we're going to be showing today is this thing that we're calling like vs code for the web SL aure which is basically the feature of azure of vs code for the web which might not make a lot of sense now but we'll get into that um with the demo today nice I love that little foreshadowing like cool Alex you want to give a quick intro yeah um I'm an engineer on the Azure extensions team for vs code um so we own all most of the Azure extensions for vs code and now we also own this new
          
          product cool awesome I love it um if you're watching uh definitely let us know if you're an Azure fan if you're looking to get started with Azure if you're already exp with Azure just so we can kind of gauge yall's experience level and kind of give you shout outs throughout the way all right well now that we have intros out of the way um Mir or Alex do you want to go ahead and talk a little bit about what you will be showing yeah sure um I can give a background into the product so so like I said um it's the product is called vs
          
          code for the web- aure um basically a very long name but uh we have an existing product called V code for the web but if you type in your um browser vs code dodev um that's the product that would come up right now um it's it's been a product of vs code for a very long time now um but we kind of took that product and we added like a feature on top of it which is the slash aure in that URL um so now the whole thing is vs code. aure and it's basically a development environment where um we bring all the Azure tooling together in
          
          one place for you so you can use the Azure developer CLI you can use a Azure extensions um you can use get up co-pilot and all of the Azure agents that are used um within that co-pilot so um and all of that stuff can be accessed locally obviously but the reason why this is special is because the um the time it takes going from a template to deploying your application is pretty much a one-click operation so let's say you were a developer who you know wanted to try some of the new Azure offerings
          
          that we had um this would be a great way for you to kind of come in you know try it out get wowed hopefully and um kind of stay and use our tools so so yeah that's a little bit about the product but I think that it would be helpful if we showed a demo yeah yeah because I think that that's really cool that sounds like a lot to have all just in the web so yeah I think it'd be great to see it in action so I'll pass it to Alex um to kind of go through the demo I'll be chiming in here there cool um so today's demo starts
          
          from our template gallery and to give a little bit of an overview of the demo we're going to start here at the template Gallery pick a template and then we're going to be taken into the star of the show which is vs code for the web Azure and we're going to deploy that template from the browser um right to Azure and so we're never going to leave the browser we're going to end with a full-fledged like AI app and we we haven't left the browser um so on the template Gallery uh you'll find lots of curated a templates now if you're not
          
          familiar ASD is the Azure developer CLI which is a relatively new uh Azure command line tool for uh deploying and managing a Azure applications and specifically when they're bundled as templates it's very easy to use a to deploy uh and manage manage these apps okay so the template kind of lets you just like click a button and you'll have all these apps like everything you need for it yep configured for you awesome things like cicd and building the app are already configured for you it it's very nice nice okay that's really great
          
          for anyone just getting started and so these templates they range from like more Bare Bones apps like at the bottom here there's just one that's a simple flask app um and then there at the top we have some AI apps featured which these are a little bit more complex um see the one I'm going to be using today is a simple app chat application using Azure open aai and this one is obviously a little bit more complex but um we'll explain as we go cool let's see it so I'm going to go click the try template button uh this
          
          button takes us to vs code for the web uh which as I said is the the star of today's demo on first use this will ask you to sign in with your Azure account but for the sake of demo I'm already signed in uh nobody needs me like to watch me fumble what's your password Alex um so now as we loaded into vs code for the web a lot of things just happen in the background um first and foremost we set up uh your Azure Cloud shell uh and then we used a to initialize the template we selected from the gallery um and so as you can see uh
          
          down here in the terminal uh we we ran ACD and knit Could you actually zoom in just like a couple ticks Alex yeah yeah perfect so in the in the terminal you can see we ran azd and knit and then in the Explorer you can see all the files from that template I'm going to go ahead and close uh the terminal since we're done with that for now and that kind of I'm going to zoom out one so the walkthrough shows up better um um and then a walkthr that we created for this environment was automatically opened now the first step in the
          
          walkthrough is to deploy your template um it's very easy all you have to do is click this big blue button and I'm going to click that now before I explain just so I can you know kind of kick that off because it it can take a little bit clicking that button uh runs AGD up in our terminal and it's going to ask me you know what subscription Azure subscription do I want to deploy this uh app app to to then it's going to ask me for a location and it will like get all your Azure subscriptions automatically
          
          because you're already logged in right yes yes that that's a good point the one thing that's special about this environment is it's kind of connected to Azure in a way that most environments aren't where once you log in at the beginning those credentials will carry over into this so uh all your subscri destion is already there you're signed in on the CLI automatically you notice I didn't I didn't have to do any logging in on the terminal um think it's just waiting for I think it's gonna ask me for another location
          
          must be listing out the locations right now that's really nice though that it kind of just keeps your login because I feel like it can be frustrating when you're doing something and it's like you just get like 12,000 login prompts you're like oh my God okay I don't want to do it anymore that was certainly a goal of this product was to like let's let's try to have people only log in once um and so now that I've answered all the questions that it needed um it is packaging and building our app and
          
          then it will be deploying our app I'm going to go ahead and let that run in the background and we can come back to the walkthrough and I'll I'll let merera go through um some more things about the walkthrough in the environment awesome yeah thanks Alex um yeah so I think like you got a little bit of like a snapshot today we'll be taking a really long time to explain like each of the steps but developers when they come in here they can immediately click on a template um get started in the environment run a up
          
          or click this button that we have here oneclick provision and deploy and they're pretty much ready to go um there's nothing else you need to do and the application that we're deploying today is like a complicated one it uses a lot of you know Azure services it uses open AI so it's a pretty um Hefty template um and the output that you're going to get is this like really cool um you know chat bot assistant that you can use um yeah what Alex is showing um so yeah like back to the walkthr so what our point of this was to again like
          
          this environment is for users that want to get started with Azure um or they want to get started with like any of our services but in a very streamlined way so what we what we did is we kind of broke down some of the key features of this environment into you know deploy your template so so that's the first um call to action that we want developers to kind of take a look at and um deploy and again as Alex um commented this is using the Azure developer CLI so you know all of the a commands kind of come
          
          with it um just want to reiterate that you know we we do some things for you um to kind of ease the load for example like we run a in nit so your your template's already initialized when you get into the environment um so that's a little bit about deploying the next thing that um I wanted to talk about is um chatting with co-pilot so so given today's day and age co-pilot is a huge thing everybody likes to use it um and it's it's kind of a buzzword but the the the point of having it in this environment is again to kind of one give
          
          people access to using co-pilot in this case it's GitHub co-pilot um and you can basically instead of let's say you know getting started on your own or trying to figure out what questions like you want to ask or find things out about the environment we've kind of preloaded the environment with um co-pilot you obviously have to sign into GitHub to access it um but it it's basically just another feature um if you do have a subscription that you can use and um I'll kind of let Alex uh go and um show
          
          that awesome yeah so I'm going to go ahead and click this button which opens the co-pilot Pane and here's where normally I would have to sign in with GitHub but I've already signed in so it allows me just go straight to chatting um I'm going to ask it um how do I set my username and email in git and it nicely uh gave me the exact commands I need so we'll go back we'll check on our deployment looks like it's going nicely I'm going to make a new terminal here and I'm going to use these commands since we're going to need them
          
          later when we push to GitHub yeah I love using cop pallet for things like this it's just so much easier because like I never remember any of these git commands ever you can just insert it right into the terminal just make the changes it's just makes your life so much easier and uh since this isn't this is compute fact I I do have a terminal here it is real I can do everything I can do on my local machine here yeah yeah that's a really good call out because um if any of y'all watching are familiar with v.d just like the
          
          normal vs cod. Dev you'll notice you don't have a terminal because there's not that compute um so you can't like run code do the terminal anything like that it's still great for like lightweight edits and things like that um but sounds like that's a really cool value ad of this um Azure uh experience is you now have that Azure compute backing you yeah so I think with that we can move on to the next step in the walk through let me close up some of this see what's this doing okay we're deploying now cool um and while that's
          
          um coming up I actually have a couple questions I'm sure people are thinking about because anytime we mentioned like aure GitHub copilot we kind of always have the question of okay like you have to pay for a subscription or things like that that but um I know there are some free tiers for Azure and things like that so um you know how does this work with maybe if you have an account you're using free services um if you could speak a little bit about that yeah so so basically um that's one thing I actually didn't touch on at the
          
          beginning so this entire environment is if you have an Azure subscription um it is technically it's not any additional cost to you if you have an Azure subscription so we actually are partnering with um uh a team called Azure cloudshell they are um actually a product that you can actually use in the Azure portal today um it is that terminal button next to your name right at the top um in the portal it basically is bringing this terminal um experience to vs code dodev so like you said like we we in the original vs code dodev um
          
          we basically have a terminal out like uh you know thing on the screen but we can't really run any commands in it because there's no compute backing it so given that we kind of connect to Azure Cloud shell when we jump from a template to this environment we bring that compute in and are able to give people the ability to run debug deploy applications which is like you know what developers want to do um now in terms of cost so the the session itself has like a 4H hour limit so you can kind of come
          
          into this environment if you have an Azure subscription um you can actually use all of our tools and deploy applications for up to 4 hours um for every 24 hours so um like I said this is like a great way for you to come and not really pay um a lot of money in terms of you know deploying these really Hefty templates like these AI templates um but you can come in and actually try it out and be sold on you know some of our um really cool services and offerings that we have to developers um so yeah that's
          
          a little bit about um the pricing I guess on the Azure side now on the GitHub side um obviously like co-pilot is available for you um and it's just like another way to show that you know this is a fully fledged environment um there's really um very limited number of things that you can't do in here that you could do like in um the desktop experience um but obviously in co-pilot you do need to have a GitHub co-pilot subscription I think before the demo sake like Alex was already logged into GitHub so it kind of just already popped
          
          up there but if you were a first-time user it would prompt you to sign into GitHub you know check for a GitHub co-pilot subscription and then kind of um you know go from there okay cool yeah um that's really great to know just so people kind of have like the prrs of like what those accounts look like um you know I can definitely see something like this being amazing for students for example like getting started with Azure so if you're using like any of those you know student free accounts with Azure
          
          GitHub copilot um you know this is a great way to just even build off of that it'll just integrate with those existing accounts so um you know you don't have to worry about just like some crazy charges or something happening cool um and then one other thing I wanted to ask um if if we have time too um is I know you kind of mentioned that this is really great for getting started with these deployments um what if you already have something like this deployed does it still make sense to be using this vs C.D um for
          
          aure experience um or is that like maybe when you would just go into the desktop and just use like the AER extensions there yeah so um so since we kind of signed people into Azure here right um we'll actually walk you that's that's a great leading question into my next step perfect Alex probably tip on too so so basically um if you already have like a application let's say you deployed yesterday and you are on the go or you need to make a quick code change um this is an incredible environment for you
          
          because again it's in the browser it's really lightweight but it also offers pretty much everything that you would need um in terms of compute so the thing that uh Alex is kind of hovering over is the Azure Paine and I'll kind of let him take over because um uh I that will kind of answer your question cool sounds great yeah so in this environment we've kind of preloaded it with some common Azure aure Azure extensions excuse me um you can see all of my subscriptions here uh hopefully you don't have this
          
          many I'll filter it down to just the one I'm deploying to and then this is a actual a very helpful view because this is you can see the template I am using is listed here and uh you can kind of see the services the template uses so this is a container app and this is the environment that was created for me when I loaded into um vs code for the web um and then in the resources pane you can go through and see all of my resources so if I deployed something yesterday I can go in here and interact with it and
          
          see it in here um yeah the there's quite a few Azure extensions actually um and not all of them are installed by default but you know things like function apps have a lot of there's there's lots of features in here for people who deal with function apps there's lots of features in here for container apps um so yeah basically easy portal at your fingertips right code yeah so I just want to kind of highlight like what Alex is showing here so pretty much anything you can like you deployed in the portal you now
          
          have it in vs code for you all in one place so you don't really have to now go between vs code and the portal you can actually just see it all in one space and that bottom the bottom uh kind of box that Alex was showing is like your workspace so kind of what you right now are working on so to answer your question Olivia um it would be a great um uh tool for somebody who kind of wants to check status on certain subscriptions redeploy it um make changes but like not have to rely on like a really you know long process or
          
          like go accessing their local um desktop okay that makes sense and I think you know if any of yall are familiar already with vs C.D that kind of Falls in line with when you would use vs cod. Dev anyways it's kind of when you're looking for those like quick like check-ins um make quick edits things like that that's when it's really helpful because um you know one thing is this is on the browser so you could even just access this like on your tablet or something like that so it's really cool it really is like vs
          
          code on the go is kind of how I always phrase vs code. um anywhere you have a browser just open it um so yeah that's that's a really great call I'm glad to see like just how much is loaded into this with this um Azure experience it's awesome I'm GNA double check on our deployment oh looks like it's done so it success love the text yeah four minutes and 50 seconds to deploy our app let's go ahead and open it and see okay so you know this is a fairly basic chat application but I'm going to ask it why is manage identity better
          
          than using keys and hopefully it'll explain that to me awesome it's working that's cool and this is literally just all from that try try out this template button that's awesome one click and you have a fully functioning chat app yep wow yeah so we we kind of um the whole point of this is to kind of bring developers these really um nice templates but um not really rely on them to have to go and configure their environment so we take care of pretty much everything for them and um they just have to click you know
          
          provision and deploy and they have an application similar to how what you just saw um that was deployed so uh we hope that you know people come and like kind of try out these templates and kind of get used to um you know using this really fast-paced environment um because we've heard from a lot of developers that you know I might be you know I need to show this demo to like a colleague or somebody at work or I might be on the go and need to make a change and I may not want to rely on my like local experience
          
          every single time um so this is a great way to come and kind of try out tools and even if you aren't you know like an Azure developer um you obviously can sign up for a subscription there are like a there's free tiers there but using this environment doesn't cost you anything extra other than just having a subscription to Azure yeah and like I think it's really cool because a lot of times we hear that people just get really intimidated by like okay where do I start what do I do and this kind of
          
          takes out that intimidation factor it's like okay once you have your account set up like just go here hit try you don't even have to like go into a different application you're still just in the browser um and I think anything that can take out that sort of like mental overhead of how do I even get started is so powerful and I hope people find really helpful um and we have a mod who's agreeing in the chat saying accessing all that you need from one place is super cool I definitely agree um and M this is probably also gonna be
          
          a segue into I think what you're about to say but Dorian asked how can I access this yeah definitely um I will get to that in one second we have like one more thing we want to show so um the last step um of the walkth through is kind of saving your work so I wanted to kind of highlight this so this product is currently in private preview right now um we'll kind of talk about like accessing it and like we really want developers to come and kind of try this out and tell us what they like and what
          
          they don't like um that's the point of the private preview um but uh the saving GE work part of the product is um important because um right now you know like I said there's four hours for you to come in and trial anything you want um with no additional cost to the aure subscription that you have um kind of beyond that we the given that we're kind of partnering with Azure Cloud shell it's kind of following their guidelines in terms of like when they like restart their entire service for that given
          
          subscription or tenant that you're using so um before that four hours runs out we really want people to go and actually publish their code um to GitHub which again is all you can do it in this environment you don't really have to go anywhere and do that so I'll have Alex just show that awesome yeah so on this step we like inform you that you know your work is not saved unless you commit code to GitHub or or that's the best way to save your work um and so I'll click this publish to get up button which
          
          takes me to the source control uh view in vs code and I will just commit all these files and then click publish branch and it's going to ask me to sign in okay and then I will publish it to a uh get up repo and so in just two clicks or a couple more with the sign in uh we have um the code that I just had in VSS code for the web now it's on GitHub um and so any changes that I make in in this environment I I can commit to GitHub to save for later or share with um collaborators nice I love that that's
          
          included in the walkthrough because I'm always very surprised to see how many people don't know that you can just do that directly in vs code um because it's so it's so easy there's so many people would be like oh I wrote this code but I didn't like get in knit it and so now I don't know what to do I can't get it into it and so hit just a couple clicks and you'll be in your own repo and you don't have to worry about losing your changes so I'm glad that that's a part of this awesome yeah so that's kind of uh
          
          that'll lead me into kind of the next steps for this um so to um dorian's question how can I access it so we um like I said we're in private preview right now and um we really want um as many developers to kind of try this out and tell us what they like and what they don't like you know as we're going to um working towards public preview um and so we've kind of set up a survey that um customers can come and um kind of just fill out some really uh like I guess Elementary information about themselves
          
          it doesn't take very long it should take you maybe like 30 seconds um but this will basically just um allow us to kind of contact you um we'll send you an email with um you know access to the product um and um from there you know we'll ask you to test it out um we'll follow up with you and um kind of just do an interview so that we can understand exactly you know what you liked what you didn't like you know what you struggled on and where we can kind of improve the experience um and specifically the most important thing
          
          when you're um you know talking about this uh uh or you're filling out this survey is question number five which um Alex will kind of explain a little bit more yeah uh question number five is for the the your subscription ID which is really how we give you access to the product is is based on your subscription ID um and then there's a specific call out on the subscription ID question where uh we encourage or we kind of need a subscription ID within your default and or home tenant and if you don't know
          
          what that is then you're probably fine just give us your subscription ID but if if you have multiple tenants um uh you will need to give us one that's in your home uh tenant and if if you have questions uh you can reach out to um I guess how can they reach us uh what's the best way for them to reach us if they have questions about this question what um yeah I can uh um you can email me um at my Microsoft email and um I can get back to you if you have any questions with your Azure subscription ID cool so we'll make sure that that's
          
          um in the video description um so y'all can reach out to mea um if you have any questions about getting this survey submitted um and the subscription ID it's it's fairly easy to find in the portal right I think it's just kind of like right at the exactly um and if you just have one subscription ID then just copy paste that in here for us and the other questions we just ask you are your name email and the GitHub Alias is um just so that we can add you to our repo um so that you can file any issues or
          
          like the conversations that we have via email we can actually just track it in the repo um and uh basically create bugs and um like triage them so so yeah cool so they can reach out to you if there's any questions about like okay how do I even find my subscription ID how do I submit this um but then once they've been granted access then the best way for feedback is just directly in that repo correct yeah okay and I think um we will we will definitely with everyone who um signs up on the survey reach out
          
          to them and actually conduct interviews um just so that we can like know a little bit more about how you used it you know what you liked um but definitely in GitHub will'll be tracking like any errors or bugs that um came up or any honesty feature requests that people have um for this environment yeah yeah I think that's a great call because a lot of times people are just like hear feedback and they think okay what's wrong with it but feedback is also a great to be like oh wait I would love to see this in here um all that is super
          
          valuable um to hear what's the best experience that you all would find beneficial um so yeah we have that link it was showing on the screen we have it um in the YouTube comments so you can actually just click directly to it um and it'll also be in the description of the video too so in a couple different places so if you didn't catch it um yeah on the screen again um and then again on on demand it will be in that video description so you can just get to it really easily um and you can reach out
          
          to Mera if you have any questions about getting that survey submitted yep definitely I I'm just seeing a chat from um someone with the name of son of delais um I don't know if I'm saying that right um but I totally agree with you um the name has been in the works right now right now it's being called vs code for the web aure but you're not the only one even internally a lot of people in Microsoft are like you know what do we call this thing so for now it's private preview so we will work on it but that is definitely something that
          
          will go in the GitHub as a comment from a developer that said like the name is needs to be change so things like that are really helpful um and we'd love to talk I I especially and I'm sure Alex Alex is a developer so um I love talking to developers um and you know really understanding you know what you guys like and and um um what you don't like so please um take the time to you know fill out the survey and um we would love to hear your thoughts awesome yeah I definitely uh think that it's great to kind of see our
          
          first like live feedback here naming things is hard y'all it is um so yeah we'll definitely take that feedback um and any other feedback as y'all get access is really great to hear cool all right well Mir and Alex is there anything else that you you would like to share with us um before we say thank you and goodbye to everyone um no that's about it I think I summed everything up awesome cool well thank you so much for giving us an overview of this experience I think it's really powerful I think people are going
          
          to find a lot of benefit from it um everyone watching definitely make sure to fill out that survey so you can get access and provide feedback um if you have any questions definitely reach out to me you can even just leave a comment on our YouTube channel we check those too so if you're like having issues we can then like route you guys together to figure it out um but yeah thank you again Mir and Alex for being here thank you everyone for watching at home um we always appreciate having you here um
          
          definitely tune in for future live streams make sure to subscribe to our YouTube channel so that you don't miss out on those um and we also post other um long form videos and shorts that you won't want to miss that have little tips and tricks with that we'll go ahead and log off thank you again to everyone watching ing um we'll see you next time thank you [Music]