 On today's Visual Studio Toolbox, Aaron is going to show us how we can write some code, check it into source control, deploy it to Azure without ever having to leave Visual Studio Code. Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green, and joining me today is Aaron Powell. Hey, Aaron. How are you, everyone? Thanks for coming on the show. Thanks for having me. Thanks for being so tall. Our producer is making me sit because you're so much taller than I am. Well, at least this way I can reach the desk so that we can do these demos today. Yeah, I can reach the desk too because the chairs are so tall. But that's not what we're here to talk about. No. First of all, introduce yourself. You are a Cloud Advocate at Microsoft. That's right. I'm part of the Developer Advocates Team at Microsoft. My focus is JavaScript and .NET, and today we're going to be looking at a bit of JavaScript stuff, but I've been doing web stuff for about 15 years now, so I've seen pretty much everything that's come and gone. Cool. So we're going to look at, we're going to create an Azure Function in Node, and what we want to focus on here is Visual Studio Code, and how powerful Visual Studio Code is, and how easy it is to bring in GitHub and bring in Azure. So it's all from your cockpit, if you will, the Visual Studio Code, and you can do everything you need to do. Yeah, exactly. So I've got here the GitHub repo that I've already created. Just to give us a bit of a starting point of a project, and I want to show you how we can have that full workflow to start from GitHub, but one click to create a new version of this. So I'm going to start by forking this repo into another organization of line, and then once that's done, we won't need to use the browser or anything else, we can do everything just from VS Code. Oh, cool. All right. So now that that's forked, I'll go and grab the URL for the GitHub repo, and we can clone that, click Copy, jump over to VS Code, and then launch the Command Palette, so Control Shift P or CMD Shift P if you're on a Mac, and we'll use the Git clone. Paste in the URL of our Git repo that we want to clone, and then this will just ask us, what do we want? None of this command line star for jumping out to a third-party tool to work with our Git repos, I just do it straight from my editor here. So I'm selecting folder, hit clone, and that's going to go away, download all the source code from GitHub itself, set up the repo that I can open now within my VS Code. Now this assumes that you have the Git extension installed in Visual Studio Code, yes? So this isn't using anything other than just the Git stuff that comes with VS Code. So we don't even need the GitHub extension. We have one that can do some more powerful stuff, but we don't need that if we're just going to clone some repositories and do all that sort of thing. Cool. So we'll start, launch that up. It does assume that you have Git installed on your machine though, yes? Yeah. I think that comes with Visual Studio Code. If not, it's an optional install that you can add quickly. But now, here we go. Here's our repo ready to go. I have installed an extension for working with Azure Functions. It just gives me some better tooling support, debug support, and things like that. It also makes it so that if I was to hit F5 in my debugger, which I'll do now, I can run this application locally and debug straight off Visual Studio Code. Okay. So what is the application? This application is a really simple Trivia API. So I found a couple of trivia questions online that you hit an endpoint and Azure Function HTTP trigger, that will then give you a list of questions and a bunch of incorrect answers to those questions and the correct answer. You can use it to quiz your friends on something and then they can try and guess what the right answer is. Then there's another endpoint where we can validate what is the correct answer. What are they set and selected? Was that correct or not? Okay. Cool. Cool. So right now we're installing the dependency. So we're running an MPM install to get all our node modules that we need to run this. And we're also installing the Azure Function Core tools. So this is the host runtime for Azure Functions. Now we need that obviously to be able to launch it. And that's just the dependency into our project. It's defined in the Git repo that we've downloaded. We haven't had to go out and install something else. So this will just download all of those on the first run. You won't need to do that again for every subsequent run just the first time. Got it. There we go. So now the dependencies have all installed. You'll see some logs are starting to come out. That's the Azure Function host starting up. We've got our URL here at the bottom, which is our API endpoint, which I can just control click and follow. It'll watch up in my browser. And here's the response we're getting back. So this is our HTTP trigger. I put a break point in VS Code, debug what's happening there and it's then just the same development workflow you'd have with any other application using any other development tool set that you might be used to. But we'll jump out of the debugger because I want to show some other things that we can do with VS Code that you might drop out to other tools to do normally. One thing that you often be doing if you're working on a project with other developers is creating branches so that you can do your changes and then merge them back in rather than everything happening in master and constantly dealing with conflicts. So to change a branch in VS Code is really easy. We can just click on down in the bottom corner here where it says master, which is the name of the branch I'm currently on or I can use the command talent. I'm just gonna use this here and then I can select to create a new branch. Nice. I'm very familiar with how you get to do all this stuff from inside Visual Studio. Yeah. It's awesome without having to, I mean, you can of course go out to GitHub or Azure DevOps and do all the stuff there. But it's way better to be able to do it from inside Visual Studio. The more you can, in Visual Studio Code now, so the more you can do inside without having a context, which because you know what happens, right? You go to the browser to go to Azure DevOps, your MSN homepage comes up and next thing, you know, it's 20 minutes later and you've read a bunch of articles and you haven't got anything done. Exactly. Not that that's ever happened to me. I've heard of this. Yeah. I've always laser focused when I'm going through. Right. So we'll create a new branch. So you create a branch from, which means that if someone else had pushed a branch and you want to contribute to that one, we can use create branch from. But we want to create a branch ourselves. So I'll do that here and we'll do that update response. Let's just change the response that's coming back from our API point. Hit enter and this is just going to create that branch and then check it out. So swap us to that branch and we'll see that in the bottom corner as well. Now says update response. I can come over and let's open up one of our files. Got an index.js here and instead of just returning all the questions because that also gave us an indication of what was the correct answer and the incorrect answer, maybe we only want to give people which is just the correct set of answers. So just the available answers, not just the correct one, but all the answers. So we're going to change that and do questions and we'll return this with, we use a map function. So just to create a new object. So if you're a .NET developer, this is similar to a select. And we'll create a function in here. We'll call that question. And here we'll return. We'll do the question itself, which is question.question.question.question. That's not going to be confusing at all, is it? And then the answers, we'll do question.incorrect answers. So this is an array of incorrect answers. And then we will concat onto that. We'll create a new array with question.correctanswer. Correct answer. So that's just going to combine them all into one array. And then maybe we'll do a sort on that. So we don't know that the last answer is always the correct one. Okay. So we can save that. And now I can check that in straight from my editor as well. So rather than, again, going to another tool or going to a command line or anything like that, I can use this palette here on the left-hand side. Click on that. And this is listing all the changes that I've got. And it's telling you you have two in a nice yellow color. So the first one is that when I did my install the dependencies, the NPM install, I might have had an updated version. So my package lock, which is just telling me, here's all the dependencies that I have in my machine. That's just had an update. So I've probably had a new version since I last run through this exercise. So we can include that one or we can ignore that. I'm just going to choose to discard the change. Because if somebody else has a different set of packages, you don't want to get a conflict. Exactly. You can put it, push it up to the repository. Exactly. Or you might want to. I guess you can decide. Yeah, so we can- Everybody should be using the exact same packages or it's okay to use different ones. It's kind of a call. And we can actually do that diff as well straight from within the site of the editor. So I can click on the file and it can show me what the diff is between those two. So we're really, really interested in this index.js file that I've updated. So I'm going to discard the change to the other one. And it's going to tell me that those changes are going to be lost. That's fine. I'm not interested in them. And now we can add a commit message for our changes. Updated the response. Is there a way to require that in the Visual Studio Code? Yeah, so it will enforce any policies that you've got as well. So if you don't put a message in there, it'll say, hey, you can't actually make any change yet. It can't commit those changes to your repository. And then we can hit, there's a shortcut key which is just control enter. Or I can hit this check here, which commits that change. And it's because Git requires you to stage as well as commit. It's just saying you didn't stage the change first. So do you want me to stage and commit? Okay. So again, similar sorts of workflows you might have seen in Visual Studio as well. So we get all that here too. We get that set. That's all done. Now our diff doesn't represent anything's changed because that change has been committed. We can easily jump back to like our master branch. And this time I don't have to create new branch because that's one I already want. Click master, drop back into that change has been reverted. Cool. But what happens, you know, you brought up before of conflicts that if I make a change and I push that and then someone else in my chain makes a change to the same file, well, what would happen? Like, how do I deal with that? Do I have to now go into GitHub or whatever I'm using as my source control and tweak on that? So let's simulate two people working on the same project and enforcing a conflict. So we're just going to do a sort on here because I want the questions to be sorted by default. So we'll save that. And again, we'll come back here and do our commit through Visual Studio code, updated response to be sorted, commit, click yes. And now we want to merge that branch in. So this time I'm going to use the command palette, control shift P, and then we do get merge. So what branch do we want to merge into our current branch? Select my update response. And it's going to go, oh, we've got a conflict because you've edited some part of the same file multiple times. And this is what we will see. And there's a bunch of options that you can see across the top there as well. We can accept the current change. So this is the stuff that's in the current branch that I'm on. The master branch, and that's the top change here, which is the questions that's sought. Or we can set the incoming change. So what is the branch that we're trying to merge wanting to give us, which is that bottom half? We can choose to accept both changes. So if it's like, maybe it's actually an additive then we just had like a white space change on the line above. We can merge the two together. Or I can just edit the file in line and do that change. Oh, cool. But I only really care about the incoming change because that's a much better way of returning a response. So hit accept incoming change. It's going to apply that onto my file. And then we still have an outstanding update inside of our source control tab here on the left hand side saying that the merge has been completed but we haven't yet committed that to our Git repo because we want to make sure that you are certain that you wanted that merge to happen and that the merge conflict was resolved correctly. So it is, I can hit commit because it's already populated in a commit message for me. And that didn't actually work. There we go. There we go. Sorry, I'd forgotten to actually stage that change. So it didn't think that it needed to do anything because it was like, well, no, you didn't do anything yet. And I said, no, no, except the merge. So that's done. And now this is all within my master branch. That's all happened straight within inside of our editor. Very nice, very nice. Probably the last thing though is that it's great that it's working on my machine. But unless I'm shipping my laptop to production, it's not particularly useful, is it? I want to be able to deploy into Azure. Yes. And I want to show you how you can do that entirely from Visual Studio Code. Right click, publish to Azure. Exactly. So I've already got the Azure Functions tools installed and I've already connected this to my Azure account. So you can see that down in the bottom that says Azure and it's got my account signed in. Yep. So there's an Azure icon down there right there. That's where you would go to connect, right? Yep. And I can see Azure Functions that exist across a whole bunch of subscriptions that I've got. So I can deploy to an existing Functions app if I already had it in there or I was working in a team environment and someone else had created the resource and I wanted to deploy. But I want to create one entirely from scratch this time. So I'm just going to launch the command palette and we're going to select Azure Functions to deploy to Functions app. Mm-hmm. And select the subscription I want to deploy to and then I want to create a new Functions app. Now I can do an advanced one which is going to do a whole bunch more steps of asking me a lot more questions. But if I just quickly want to throw this up to test it and choose that first option and give it a name. So we'll call it Trivia app. Trivia app and we'll hit enter and select the Node.js runtime because this is a Node application. If I was doing .NET then I'd select the which version of .NET Core I want to deploy to. If it was Python, et cetera, et cetera. I'm going to use the Node 12 and then the region I'm going to choose East US. And what this is going to go off and do and set all those resources up for me. So for an Azure Functions app we're going to need a storage account. Yeah. We're going to need a resource script first obviously. Then we're going to need a storage account then we're going to need the Azure Functions app and we're going to want application insight so we can monitor our application. Right. So that's what it's doing behind the scenes. Cool. It's going to spinning all those up through the Azure APIs and making sure that they are ready to go for us and it will then deploy our code base up there. Yep. Sweet. All from inside Visual Studio Code. Exactly. We haven't had to leave our editor except to do the initial grab of the URL where I get repaired with. And I think this is really cool. Like I think a lot of people know that Visual Studio Code is great as an editor. Right. So I do most of my development in Visual Studio but if I just want to look at the contents of a .cs file or .xaml file I pop up Visual Studio Code because it's really, really fast and it's great and I can obviously make changes in there as well but I think it's perhaps a less known than it should be which is why of course we're doing this show. Exactly. Visual Studio Code, you would expect that inside Visual Studio since it's your full featured IDE that you should be able to do all of this stuff from inside Visual Studio now we're seeing that it's also true with Visual Studio Code. Exactly and it's great also if you're working a cross-platform team. So if you've got people that are working on Mac or Linux machines they can have that same power that we've been used to for years doing Visual Studio development. So it's set up all of our Azure resources now and now it's going to prepare our application to deploy. So it's going to run some NPM commands to install the dependencies that it will require for production. We probably don't want the debug versions we want the actual production versions and then it's going to copy all those files up for us. Right. We just quickly jump over to the Azure portal and we'll find our resource group that I have and this is the one that we just created. Okay. And if we pop in here we'll see that those are the resources that we need and we didn't have to think about it. We didn't even have to know what those resources that are required are. Right. It just sets them up for us. So again if you're wanting to quickly get it up there and deploy you can do that straight from the editor. I'm just going to pop up this window as well. And now that our dependencies are installed what it's doing is it's zipping up the Azure Functions application. Yeah. And it's going to be copying that up. Essentially a web deploy. Okay. It could be doing from many different locations. Right. And like most things it takes as long as it takes it depends on your network connectivity depends on how big the app is. It depends on latency. It depends on all kinds of things. Yep. And as someone who's used to Australian Internet this is happening a lot faster than I'm normally used to it happening. Excellent. So that's all set up there. We'll come over to our Azure portal again. It's like through our functions application and this will load up in a second and we'll see the functions that have been deployed under the tab here on the left-hand side. Yep. There we go. There's our get all questions and our check answer and grab the URL for this in a moment. For some reason it hasn't generated that. That's very annoying. Let's just click off and click back on. Ah, there we go. Order of execution problem. It was trying to, it displayed the URL option just after I clicked away. So pop that into a new tab. Here's our Azure functions and ta-da. Yay. And the only reason we went to the browser was to check a HTTP response. Right. Very, very cool. All from inside Visual Studio Code. Exactly. Fantastic. And you said that with the exception of the Azure function core tools, everything else that we did was already in Visual Studio Code. Exactly. It was just the one extension. Yep. Just the one extension to be able to deploy and that was all we needed. Sweet. Yeah. Awesome. All right. Thanks for showing us that. I'm glad to. That was very cool. Hope you guys enjoyed that and we will see you next time on Visual Studio Toolbox.