VS Code Integration with GitHub and Azure

On today’s Visual Studio Toolbox, Aaron is going to show us how we can write some code, check it into source control, deploy to Azure without ever having to leave Visual Studio Code. [MUSIC] >> Hi, welcome to Visual Studio Toolbox. I’m your host Robert Green, and joining me today is Aaron Powell. Hi, Aaron. >> Hi to everyone. >> Thanks for coming on the show. >> Thanks for having me. >> Thanks for being so tall. Our producer is making me sick, because you’re so much taller than I am. >> Well, at least this way I can reach the desk so that we can know how to do these demos today. >> Yeah.

I can reach to the desk, too, 00:35 - because the chair is 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 from 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 create an Azure Function in Node. 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. You can do everything you need to do. >> Yes, 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. Just start from GitHub, that one click to create a new version.

01:37 - So I’m going to start by forking this repo into another organization of mine. >> Okay. >> Then once that’s done, we won’t need to use the browser or anything else. We can do everything just from VS Code. >> Cool. >> All right. So now, that that’s forked, I’ll go and grab the URL for the Git repo, and we can clone that. Click “Copy” jump over to VS Code. [inaudible] a command palette, so “Ctrl 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 you want?” None of this command lines stuff or jumping out to a third party tool to work with out Git repos, I just do it straight from my editor here.

02:20 - So I’m selecting a folder, hit “Client” and it’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’s stuff that comes with VS Code. >> Okay. >> So we don’t even need the GitHub Extension. >> Okay. >> 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 thing. >> Cool. >> So let’s start launch that up.

02:50 - >> It does assume that you have Git installed on your machine now, yes?. >> Yeah. I think that comes with Visual Studio Code. If not, it’s optional. >> Easy enough to get. >> So that you can add quickly. But now here we are. 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, debug straight off Visual Studio Code. >> Okay, so what is the application? >> This application is a really simple trivia or API.

03:28 - 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 could 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 did they say and selected, was that correct or not? >> Okay. Cool. >> Right now, we’re installing the dependency.

04:02 - So we’re running an npm install, the getaway and 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 defining 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.

04:45 - Go check in my browser, and here’s the response we’re getting back. So this is our HTTP trigger. I put a breakpoint in VS Code, debug what’s happening there. It’s then just the same development work 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 you some other things that we can do with VS Code that you might jump out the other tools to do normally. One thing that you’d 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. >> Right.

05:22 - >> 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 palette. I’m just going to 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. 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 Code now. So the more you can do inside without having a context switch, because you know what happens, 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, like, laser focus 06:14 - when I’m going through data. So we’ll create a new branch. So you create branch from, which means that if someone else had pushed a branch, and you want to contribute to that one, you 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 icon endpoint. >> Okay. >> Hit “Enter ” This is just going to create that branch and then check it out.

06:35 - So swap off through that branch, and we’ll see that in the bottom corner as well. Now, it says Update Response. I can come over and let’s open up one of our files. Go to “index.js” here. Instead of just returning all the questions, because that also gave us an indication of what was the correct answer and incorrect answer, maybe we only want to give people which is just the correct set of answers. Sorry, just the available answers. Not just the correct one, but all of the answers. So we’re going to change that and do questions, and we’ll return this with a map function so just to create a new object. So if you’re a.

NET developer, 07:10 - this is similar to a select. We’ll create a function in here, we’ll call that question, and here we will return, we’ll do the question itself, question equals question.question. That’s not going to be confusing at all, is it? >> No. >> Then the answers we’ll do question.incorrect_answers. So this is an array of incorrect answers. Then we will concat onto that and create a new array with question.correct_answer. So that’s just going to combine them all into one array. >> Okay.

07:52 - >> Then maybe we’ll do like a sort on that. So we don’t know that the last answer is always the correct. So we can save that. Now, I can check that in straight from my editor as well. So rather than again, going to another tool or go into the 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 have got. >> It’s telling you have two and a nice yellow color. >> Yep. So the first one is that when I did my install the dependencies, the income install, I might have had an updated version so my package lock, which is to tell me, here is 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 changes.

08:43 - >> Yeah, because if somebody else has a different set of packages, you don’t want to get a conflict when you push it up to the repository. >> Exactly. >> Or you might want to, I guess you can decide. >> Yes. >> Everybody should be using the exact same packages or it’s okay to use different ones. It’s kind of a call. >> We can actually do that diff as well straight from within side of the editor. >> Yes. >> So I can click on the file and it can show me what the diff is between those two.

09:10 - So we’re only really interested in this index.js file that I’ve updated. So I’m going to discard the change of 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. Now, we can add a commit message for our changes, updated the response. >> Is there a way to require that in Visual Studio Code? >> Yes. So it will enforce any policies that you’ve got as well.

09:36 - So if you don’t put a message in there, it’ll say, “Hey, you can’t actually make any change yet, or can’t commit those changes to your repository.” Then we can hit, there’s a shortcut key, which is just Ctrl Enter, or I can hit this check here, which commits that change. It’s because Git requires you to stage as well as commit. I was just saying you didn’t stage the change first, so do you want me to stage and commit. >> Okay. >> So again, similar workflows you might have seen in Visual Studio as well. So we get all that here too. Utilize it. That’s all done.

10:09 - Now, our diff doesn’t represent anything strange 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 it’s one that I already want. Click “Master. ” Drop back and see the changes have been reverted. >> Cool. >> But what happens, you brought up before of conflicts, that if I make a change and I push that, and then someone else in my team makes a change to the same file. Well, what will 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.

10:50 - 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. Again, we’ll come back here and do our commit through Visual Studio Code, “Updated response to be sorted”, “Commit”. Click “Yes.” Now, we want to merge that branching. So this time I’m going to use the command palette, “Ctrl Shift P,” and we do Git merge. So what branch do we want to merge into account branch? Select by 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.

11:40 - So this is the stuff that’s in the current branch that’s also on the master branch, and that’s the top change here, which is the questions of sort or we can set the incoming change. So what is the branch that we’re trying to merge wanting to give us, which is at bottom half. We can choose to accept both changes. So if maybe there’s actually an additive, then we just add 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. >> Cool. >> But I only really care about the incoming change because that’s a much better way of returning a response.

12:14 - So we 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 merger is being 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. >> Okay. >> 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, sorry, I had forgotten the actual stage that change. So it didn’t think that it needed to do anything because it was like, “Well, you didn’t do anything yet,” I was like, “No accept the merge.” So then that’s done, and now this is all within inside of my Master branch. >> That’s all cool.

13:05 - >> I went straight with 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, and it’s not particularly useful, is it? I want to be able to deploy into Azure. >> Yes. >> 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 it says Azure and it got my account signed in.

13:38 - >> So there’s the Azure icon down there, right there. >> So you would go to connect? >> Yeah, 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 that I want to deploy, but I want to create one entirely from scratch this time. So I’m just going to use the command palette, I’m going to select “Azure functions deploy to functions app,” 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.

14:21 - So we’ll call it trivia app, I will hit enter app and select the Nodejs runtime because this is a Node application, first doing.NET, then I select which version.NET Core I want to deploy to fills Python etc. I’m going to use the Node 12 and in the region I’m going to choose East US. What this is going to go off and do, and set all these [inaudible] app for me. So for an Azure Functions App we’re going to need a storage account. We’re going to need a resource group 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 insights so we can monitor our application. So that’s what it’s doing behind the scenes, because it’s going to be spinning all of those up through the Azure APIs and making sure that they are ready to go for us, and it will then deploy [inaudible] base out there. >> Yeah, sweet. All from inside Visual Studio Code. >> Exactly. We haven’t had to leave out at its except to do the initial grab of the euro where I get rid of it. >> I think this is really cool. Like I think a lot of people know that Visual Studio Code is a great as an Editor.

15:23 - So I do most of my development in Visual Studio, but if I just want to look at the contents of the CSS file or the XAML file, I pop up Visual Studio code because it’s really, really fast and it’s great. I can obviously make changes in there as well. But I think it’s perhaps 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 here full featured IDE that you should be able to do all of this stuff from inside Visual Studio, and now, we’re seeing that it’s also true with Visual Studio Code. >> Exactly. Its great also if you’re working across platform team.

16:04 - 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 years doing Visual Studio Development. So it’s set all Azure resources there, 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 to debug versions, we want the actual production versions, and then it’s going to copy all those files up for us. Let’s just quickly jump over to the Azure portal and we’ll find that resource group that I have, this is the one that we just created, and if we pop in here, we’ll see that those are the resources that we need. >> We didn’t have to think about it.

16:47 - >> We didn’t even have to know what those resources that are required are, 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. All right, it’s going to pop up in this window as well. Now, that our dependencies are installed, what it’s doing is it’s zipping up the Azure Functions application and it’s going copying that app, essentially, a Web Deploy. You could be doing from many different locations.

17:23 - >> Unlike most things, this takes as long is it takes, it depends on your network connectivity, depends on how big the app is, it depends on latency, depends on all kinds of things. >> Yes, and as someone who’s used to a strain Internet, this is happening a lot faster than I’m normally used to it happening. Excellent. So that’s all set up there. We come over to 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. Here we go, I get all questions and I 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. There we go, order of execution problem.

18:21 - It was trying to display the URL option just after I clicked away. So pop that into a new tab, it’s Azure functions. The other reason we went to the browser was to check HTTP response. >> Very, very cool. All from inside Visual Studio Code? >> Exactly. >> Fantastic. You said that with the exception of the Azure Function Code Tools, everything else that we did this already in Visual Studio Code. >> Exactly. >> It’s just the one extension? >> Yeah. Just the one extension to be able to deploy, that was all we needed. >> Sweet. >> Yeah. >> Awesome. All right, thanks for showing us that. >> I’m glad to. >> That’s very cool. Hope you guys enjoyed that, and we will see you next time on Visual Studio Toolbox. [MUSIC] .