How To Run Linux Code on Windows with WSL 2 & VS Code

hello my name is benny and today i want to show you the windows subsystem for linux wsl wsl is a very cool technology because it allows you to easily run a full linux distribution on your windows machine so when you're working with projects that are built for linux and require some linux tooling then you can easily run those projects now on windows using the windows subsystem for linux and the very cool thing is that you can connect it with visual studio code so visual studio code will run behind the scenes the linux for you while you can keep coding on windows let me show you how that looks in practice imagine there's a typescript api that is built for node.js and you are running on windows you may think cool i can just check it out i have node.js i have typescript compiler here on my system and then i can just build the project yeah usually it will work like this but it can happen that then sometimes people use some very specific commands that are not available on windows for example here in the script section there is a clean command which uses rm minus rf which means that this one is built with linux in mind with unix in mind and will not run on windows because on windows when you check on the command prompt and you type in rm you will find that it's not a tool that is available on windows in this case you can use the windows subsystem for linux and still make it work and i will show you how the windows subsystem for linux is a very fancy technology built by microsoft that makes it possible to run a full linux environment on your windows system and the cool thing about it is that you can run many different linux distributions you will see later and you're not just bound to a single one how does it do that so it actually virtualizes the linux kernel using hyper-v and this makes it possible that you have a linux file system you have all the linux utilities that you wish for and that you can actually run a full linux distro installing wsl is very simple all you have to do is entering one little command into your powershell you can find it here this one just copy it and type it into your powershell once done you can open your powershell and you can verify the status so i do that here and i'm seeing now that i have wsl in version 2 which is the one to go with once you installed wsl2 you can go and find a linux distribution yeah how to do that actually they are available in the microsoft store which is super cool because microsoft opened up that much that it says hey linux distributions you can be now in the microsoft store who would have sought that like 10 years ago yeah no one i guess if i go to the microsoft store here then of course i can install the latest halo infinite which is very tempting but we were looking for linux distribution and i am suggesting that we check out the very popular ubuntu because they also helped or the team behind it helped to make it happen that this windows subsystem for linux actually exists so they helped also and cooperated with microsoft to build it and that's why i give them the attribution here to also install their operating system once we have ubuntu installed we can actually simply launch it by clicking this button and it is blazing fast and pops up right now so here i am in my ubuntu system i can see that i'm in home directory and i can actually also check my ubuntu release so lsb release and then i think it's minus a and i will see that i'm on ubuntu another cool and nice thing is that you can access this file system from your windows machine so if you open up your windows explorer then you can go to the wsl network and here you will see connected network drives and your ubuntu environment now pops up here and is fully accessible so i click on this directory this network directory and i can see my home directory any code and here i can see some of the folders i will just list them over here on my linux and i will see here that it it maps what i see in my file explorer here on windows and let's create from the windows file explorer folder for example from windows yeah for demonstration purposes and if i now list all my directories here on ubuntu then i will see the directory that i created from windows it also works the other way around so you can access files on windows from linux in this case ubuntu just go to the mount directory cd mount and from here we can check all our drives that we have here on our windows system and i have a drive c and d and if i cd into c then i will see my temp directory and here i will just create a new directory which i will call from ubuntu so i've done that and now i can check the file explorer here in windows c temp and here i see my from ubuntu directory now comes the moment you all have been waiting for i am in visual studio code and i want to use it through my ubuntu environment as you can see here my terminal still is in a windows environment yeah i haven't changed anything yet to vs code i just started it and of course it will start with my lovely windows and if i want to connect it with my ubuntu then i need to use an extension this extension is built by microsoft itself so if you go to extensions you can find it by looking for remote wsl and remote wsl will then make it possible to connect vs code with the ubuntu distribution that you have installed and you can select the distribution by clicking here on the bottom left here there is this green open remote window button and if you click it you can say okay you want to open vs code with a certain environment and a certain distribution and i'm picking here my ubuntu once done you will see that it will start now the system for me in the background so i don't have to start ubuntu first for example you can start ubuntu now from the app store or from your installed apps on your windows machine but you can also have vs code starting it for you once our vs code is connected with the windows subsystem for linux we can see that in the bottom left corner and we can then make use of a very linux specific commands such as pwd or the lsb release minus a command yeah and this is a super cool now because um our ui of vs code runs on windows so it's rendered by my graphic card and by my graphics drivers through windows but behind the scenes in the terminal and for all the commands that i will execute now here through vs code yeah behind the scenes runs ubuntu so i'm now having a hybrid model yeah where i have the vs code ui on windows and the terminal on ubuntu what do you need to know in this case in this case it's very important to know that for example some things are not shared and if you have node.js installed on windows then the node.js on your ubuntu machine is not the same yeah because this ubuntu machine doesn't have access to your node.js that you installed on windows so you need to for example reinstall or firstly install node.js on your ubuntu operating system as well yeah because you have to remember that your ubuntu is still its own operating system yeah so if you have um also like keys like ssh keys then those ones that you have on windows are not accessible on ubuntu yet it has its own file system its own directories so you need to bring those things over you can do that in the file explorer and if we go back here to the windows subsystem then we can see all connected distros and i see here for example ubuntu by the way if we close the vs code or if we close the ubuntu app then you won't see those network drives here because if you shut down this operating system here this virtual system then of course the network connection to its folders will be also closed yeah just keep that in mind and here in this ubuntu i can find my home directory and my username here and there's for example an ssh directory and i uh would have to make sure that if i want to share credentials between windows and and ubuntu that i bring them over so i showed this um ib um repository which i want to clone so i will clone it now clone and i have the url still my clipboard the very cool thing is if you hit windows in the v you will get a clipboard history in windows and you can then use multiple elements here and i will use that url that i previously copied and then i can jump into this project and i can open it using code dot this will bring up a new vs code window here and in this window i see the npm scripts and there was one script that wouldn't have run on windows which was the clean script here because it uses the rmrf so let us just run it and see what happens and we see yep now it runs because now we are on ubuntu we've seen very fancy techniques today yeah we installed a different linux distribution on windows we connected it with vs code we built a project that was initially built for a non-windows system on windows throughout this wsl remote connection in vs code yet it's fantastic yeah we created also folders from windows inside a linux file system yeah how crazy and great is that but there's also something more of course yeah there's one thing for the end that i want to show you which is the connection with docker because you may have installed docker already on windows and now you would ask yourself probably oh do i have to install docker now also on ubuntu yeah if i want to build a project that is linux specific but also uses docker how can i make that happen yeah we have that here for example in this project i can see that there is a docker compose file so there is something going on with docker do i have to install docker now on ubuntu well actually you can reuse the docker that you already have on your windows so let me just start docker dragon center would be also nice but let's start docker and then we will see how docker actually integrates with wsl2 so here comes the whale and in the settings of docker we can set docker to use wsl2 and if it uses this engine then we can go to the resources and in the wsl integration we can share our docker now with our linux distribution now we have to take this toggle here and if we enable this toggle then we can go back here in our terminal and we can then see that docker is actually running here that's it for the wsl intro i hope you have now a very good understanding of what it is um yeah what it actually means and also like how to make use of it and how to integrate it in your workflow have fun with it and keep me posted on what you're building and thank you very much to microsoft and canonical for building this windows subsystem for linux

Channel: TypeScript TV with Benny

Views: 90,744

Keywords: typescript, wsl, vscode, linux, ubuntu, windows, wsl2

Id: bRW5r7TK6KM

Length: 13min 41sec (821 seconds)

Published: Sun Jan 16 2022