Visual Studio Online

On today’s Visual Studio Toolbox, Burke is going to show us how you can get access to your Visual Studio code Dev environment from wherever you are. [MUSIC]. >> Hi, welcome to Visual Studio Toolbox. I’m your host, Robert Green, and joining me today is Burke Holland. Hey, Burke. >> Hey Robert. >> How are you? >> I’m good. >> Welcome to the show. >> Thank you so much for having me. I appreciate it. >> Now, you are a Cloud Advocate here at Microsoft? >> That is correct. >> What does that mean? >> Well, it means that I go to conferences and I write blog posts and I wear shirts with oversize cassette tapes on them, very retro. >> Yeah. >> But mostly I focus on JavaScript and just making the experience for JavaScript developers in Azure better. >> Okay. Cool.

00:44 - >> Just how can we make it better? >> Cool. Today you’re going to show us something called Visual Studio Online. >> That is correct. >> Which was recently announced? >> Yes. It’s quite new. >> Yes. >> So this is very inside. >> I said when I saw that, “Oh, we should do an episode on that.” Here we are doing the episode. >> Yes. >> That’s going to show that. >> Lucky you here we are. >> Yes. >> All right. >> So what is it? >> Good question.

01:05 - >> Why is it? >> Let’s answer that question first. So you’ve got your editor, you have your machine, you get your whole development environment setup and that takes a lot of work. People tend put a lot of time, love, and tenderness into their development environments. >> Yes. >> They’re very particular about their machines. You can’t just run it on any machine. It needs to have enough power. It has have to have enough beef in order to get the job done.

01:27 - So the problem then becomes that your machine is the only place where you can code, literally the only place. So if you don’t have it when you go home and you need to get back online, you may end up like remoting into some VM somewhere via remote desktop, exactly. >> You have two machines, but they’re never in sync. >> Exactly, or you have a machine that’s underpowered so, you get to the point where you actually can’t run something anymore because the machines underpowered, that’s the one that you’ve got. >> You can always spin up an Azure VM. >> That is true. You could spin up a VM or you could use VS Online, which is what we’re going to do today. >> Cool. >> So let’s take a look at that.

02:03 - I’m going to pop over to the Browser here. So everything that we’re going to do today is going to be done inside of the Browser. There’s an experience for this where you can use Visual Studio code and have the same experience which you’re going to also just be in a Browser. >> Cool. >> That’s pretty cool. So the first thing we need to do is create an environment. This is where you’re actually selecting that VM. If you were going to make a VM.

02:24 - >> So if you weren’t signed in, there would be a place here to sign in with your same account, your Microsoft Account, that’s tied to your Azure subscription or your Azure DevOps, etc. >> That’s correct. >> Same person. >> I’ve spared you the tedious details of watching you login and type my password wrong multiple times. >> But if you’ve ever logged into Azure or logged into Azure DevOps, you’ve logged into Visual Studio Online as the same person. >> That is correct, yes. That is right. Tied to the same account. Then you’re going to put in the “Git Repository” where your code is and you can do the URL, but you can actually just do the repo name. Then like this. So this is the repo that we’re going to clone from GitHub into our new environment.

03:07 - In the “Instance Type” here, you can see that I’m pulling in. I’ve got a standard Linux Box here with four cores and eight gigabytes of RAM. I can change that. I could get more if I wanted. I can go up to 16 gigs or I can look at some pricing information. >> Does it have to be Linux? >> Let’s see here. Apparently, at the moment, it does. Then this is a Spend Idle Environment. What this does is, after a certain amount of time, it just puts the environment to sleep so that you’re not being charged for it actually running because you do get billed as it runs in addition to the fact that it actually exists.

03:41 - So we’re going to just leave it at 30 minutes here. Then one thing that we could do here is we could pull in.files. >>.files. >> Right. Now, if you’re not familiar with.files, it’s a very Linux specific piece of terminology. But in a Linux Bash Shell, you can customize the Bash Shell, you can customize the prompts, you can put in shortcuts, you can put in what they call Aliases. So you can just type the command and then something more elaborate happens. We store that in what’s called a.file.

04:07 - It’s literally dot something configuration file. So usually.ZSHRC or.Bash RC. Then what people do frequently is they’ll put those in a GitHub repository so that they can then pull them down whenever they set up a new machine. So what we have the opportunity to do here is pull in.files to configure the Linux Box that’s being created in Azure. We’re not going to do that there we’re just going to go ahead and create this environment here. So this is going to create this machine.

04:34 - It’s going to spin it up in an Azure Data Center here in East US and you can see here it’s creating. So that’s what’s happening right now, is this VM’s actually being spun up for us in the Cloud. Now. >> So the fact that it’s a Linux machine obviously says this. You can do.netcore stuff here, you can do JavaScript stuff here, you can do anything that you can do in Linux, but you can’t do Windows only stuff, presumably. >> Yeah. Presumably, I don’t know what the availability of Windows is, but I would imagine good question for the VS Online Team.

05:11 - But for this demo, we’ve only got access to Linux. Keeping in mind that we are still in preview here. >> Got it. >> So for easy environment, normally you would have your environment already setup, so you’d go back in. But we’ve created that. So let’s just go ahead and go into the environment here. So I’m just going to click on it. What you’re going to see something that looks awfully familiar. >> That looks like Visual Studio Code.

05:33 - >> It does, it looks a lot like Visual Studio Code. Doesn’t it? >> Oddly enough. >> Right there in the browse. >> I assume there’s some shared code that’s going on back in the scenes. >> There is. So for those who don’t know, Visual Studio Code is actually built with TypeScript. So a lot of the code that actually runs the native platform can be used to build a Web Client because TypeScript is just JavaScript. It’s a very flexible editor. So now we’ve got it running inside of VS code here.

06:01 - Let’s just pop the README file and all of our keyboard shortcuts still works. I’m just going to do Control Shift V to get a preview of this README file. So now I’m previewing the README file from within VS code. We can pull up a terminal. So let’s just do that. So I’m going to pull up a Bash Terminal here. So this is our full Bash Terminal. So now we’re actually on the Linux box with a terminal open and any commands are good.

06:27 - So we can run an LS Command, any of your Linux commands you’ll find here. So you can traverse the file system of this machine as if it was an actual machine. >> Cool. >> Now, notice here that we have a Node Modules Folder. So I’m just going to expand that. Now, that folder isn’t in the repo. >> So when we cloned it, there’s a package-.json file, and VS Online is smart enough to look at that and say, “Oh, there’s dependencies in this project.

06:54 - I’m just going to go ahead and install those for you. So by the time you open the environment, they’re already there.” Which is just one less step that you have to do. >> Cool. >> Yeah, it’s pretty neat. Now in JavaScript, you may notice, we don’t have a compiler. >> Right. >> There’s no compiler for JavaScript. So we don’t know a design time when we’re actually writing the code whether or not there are any errors in the code.

07:17 - We just throw it up and pray that it works. So we have some tools that help us do that. TypeScript has a transpiler that will do that. In this case, we’re just using JavaScript, but we have ESLint in here as well. So VS Code, because we have this eslintrc JSON file over here, VS Online looks at that and says, Oh, you want me to what’s called Lint your JavaScripts which is basically check it for errors. That’s what it’s doing right here.

07:45 - So it’s automatically running ESLint on our code and showing us that we’ve got some errors or some warnings here. So we can see these when we press “Control Shift M,” and it’s just going to show us the different errors that we’ve got. These are all warnings, this code will still work, but it’s actually better not to use var anymore, we want to use a let or a const, the new variable types. >> Good to know. >> So we can fix this. Let’s just highlight this line. I’ll just do control period and that will give me some options on how to fix this. So that’s all of the keyboard shortcuts that I would use in VS Code just work inside of the browser like you would expect them to.

08:20 - So I’m going to fix this no-var problem and we’ll do that. Now, I could go and do that for the rest of them or we can just go down and say fix them all. We’ll fix all our no-var problems, and now, we’ve no-var problems [inaudible]. >> Cool. >> Yeah, pretty neat. So now the next thing we need to do is because we are developing, this is a little web server. Basically, it just says, “Hello world”, which you can see here, sets the port, sets the host, says, “Hello world.

” 08:45 - Then it’s going to run this little server so that we can serve up some content. So the next thing I want to do is actually run this. So let’s do that. I’m going to come over here. There’s couple of ways to do this. We could just press “F5.” But we can also open up the debug bar and just go ahead and launch it. You’ll see that we’ve launched, and you can see that it’s running on localhost 3000. What’s even more interesting is that if I put a break point here. >> Running on localhost 3000 locally.

09:14 - >> It doesn’t make any sense, does it? >> Or localhost 3000 on the machine this is running on. >> Doesn’t make any sense, does it? Bear with me. >> Okay. >> We’re going to talk about that. >> All right. >> So I’m going to restart this. Because first I want to show you that we can actually hit breakpoints in here. So we’ve hit a break point and we can examine and see that host is localhost, which you caught and port is 3000. So this thing is running on localhost 3000. So let’s go ahead and continue on. So that’s where it’s running. So let’s access localhost 3000. Because we can do that.

09:40 - So let’s just come over here to a browser tab. You know what? I’m in a browser. I totally forgot I was. Did you see me just go looking for the browser? >> Yeah. >> That’s crazy. So let’s open a new tab. Let’s go to localhost 3000. That’s going to work, right? >> That’s the question. That’s the question on everybody’s list. >> It’s not going to work. Now, why doesn’t that work? >> Because this code is running on a server somewhere in up and Azure. >> Right. This is the problem, and how do we as developers effectively develop an environment that’s not local? We need to be able to run things on localhost.

10:14 - So here’s how we handle that Visual Studio Online. So let me come back over here to this tab, and we have this little remote explorer, that’s automatically there when you pull up the VS Online, and you can see down here in our environment details, you see the section where it says, forwarded ports. So what we’re going do is we’re going to forward a port, and we’re going to forward port 3000 because that’s the port that this app is running on. Hit “Enter. It wants to know, just you can give this a nifty name, this is just how it shows up in the sidebar here. So we’ll say enter on that, and now it’s running on localhost 3000.

10:49 - Now, we can’t access it on localhost 3000 though, because again, that’s not our machine. But if we click on it over here on the side, what it does is, it opens and you can see it’s connected to the forwarded port and wait for it. >> Okay. >> Boom. There’s our application. Because if it was running locally and the server was pushing stuff down, that raises all firewall issues and blah, blah, blah. This is much better. >> Correct. Right. >> Now, basically getting to localhost 3000 on the machine this is running on without having to care what it’s literally called. >> Correct. Because you really don’t care [inaudible] localhost.

11:27 - You just want to have access the Dev environment. >> Got it. >> So let’s check this out. Let’s make a change here. So we’ll just say Hello VS Toolbox, and then let’s go ahead and save that. I’m going to restart the debugger, and you can see it’s awful fast, that’s because we are running on a pretty beefy machine. Then let’s just stick a break point in here. Let’s come back over to our localhost here, refresh, and you’ll notice that this is just going to spin, and spin, and spin, and that’s because we’ve hit the break point inside a Visual Studio Online. >> So what’s really cool about this is. >> So many times has that happen you.

12:01 - You set a break point and then you go to the browser. It just spins, and spins and spins. >> Actually multiple times. >> Remind yourself. >> I can see a feature we add where the tab flashes or something to show you. >> That hasn’t happened to me since this morning. >> Exactly. Why is this not responding? Oh, I set a break point. Well, a lot of times in native apps, it forwards the application, in the VS Code if you break, it will bring VS Code to the front to show you that, in a browser, it’s a little bit different. >> Yeah. >> So we’re broken in here. We can debug.

12:31 - Do any debugging we need to do, step over, step out, continue on. It’s basically like a local development environment, but inside your browser. >> So a couple of questions. So what version of Visual Studio Code is this, how does it relate to the one that I actually have on my machine, and can I install all of my same extensions, can I save the environment? >> Yeah, that’s a great question. So let’s see here. Let me go to settings here. So the answer is, is this the same version as VS Code that’s running on your desktop? No, it’s not. It looks like VS code in the browser, but it is not the same thing that’s running on the desktop.

13:15 - >> But it’s probably pretty darn similar? >> It’s very similar. >> Okay. >> So all of the settings are going to be there. Most of the things that you would do, tweaks that you would provide, and settings like themes and things like this, you can totally add in. >> You can add your extensions. >> You can add extensions. Not all extensions are supported at the moment, but many extensions are. >> Then you can save the environment. >> You can save the environment. It goes into the dot VS Code file like you normally would.

13:43 - So if you were working locally and you have that dot VS Code folder with the settings at JSON, put your settings in there, put it in GitHub, pull in the VS Online, and it will automatically pick up those settings. >> Awesome. >> Then you can check things into source control. So you’re working off a repo. >> That’s correct. So you have source control. >> So if you go home or you’re away for the weekend or whatever, and you need to make a change, you don’t have your computer with you, you just need to be able to get to your environment, you check out your code, you make your change, you check it back in, and it’s just all the same workflow. >> Correct. So you can imagine that you have access to a computer. Maybe it’s not even a very beefy computer, but it doesn’t matter.

14:25 - When you pull up your environment, it’s already pre-configured, it already looks like your VS Code. It is as if you’ve launched your own VS Code installation from your own machine, but from within a browser. >> Does it work on your phone? >> Haven’t tried. >> That’s will be interesting. >> Not supported. >> Cool. That’s awesome. So for other questions, I know there’s good docs about it. People can go and read up more about this. Particularly about pricing, etc. I saw that there were some pricing plans. >> Yes, absolutely. There’s good docs on this.

14:59 - There was a talk and an announcement from Ignite that people can check out. So we can go ahead. >> We will link to that. >> Link to that. Yeah, that would be a good one to check out as well. >> Cool. This is awesome stuff. >> All right. >> Thanks for coming on the show man. >> Thanks for having me. Appreciate it. >> All right. Hope you enjoyed that, and we will see you next time on Visual Studio Toolbox. >> [MUSIC] .