Understanding VSCode DevContainer - Developing in Linux on Windows

this is a rerun of my presentation at my company aprilgo we are windows shop and i wanted to see if we can develop in linux so that we can start using linux containers as our application deployment mechanism to follow through this presentation you will need to have these packages installed on your computer i have links to those packages in the description the basic idea of vs code remote development is that you run vs code locally and it connects to the remote server or container which contains source code or devtools and you run the debugging and compilation remotely while you get the benefit of rich local editing experience i'm gonna launch windows terminal this is one of the apps i mentioned i have ssh server somewhere in my network i'm going to connect to it the server name is canon ubuntu it's a linux server i don't have any files or folders so i'm going to create one maybe a file i'm going to launch video studio code i already have remote extensions installed remote development extension pack consists of three extensions remote wsl remote containers and remote ssh when you have any of them installed you will see this green icon at the bottom left i'm going to choose remote ssh connect to host new ssh host decide where to save the configuration and connect now when you open folder you see that it shows me the folders on the remote server including the folder that i just created i'm going to open it [Music] and i can see that test file that i created and when i make the change it's visible on the ss console when i change the file it's visible from visual studio code now i'm going to create a python file and write a simple code i can run python here but i don't have python installed on my local computer so when i type python it's going to launch microsoft store [Music] now on the visual studio code i'm gonna click display icon and then run and debug and choose python file now it opens this terminal and executes the file and let's see what this terminal is connected to it's the same server as the one that i connected from the windows terminal i'm gonna put a break point and run again and you see that i see local variables i can add watch i can continue the local variable and watch refreshes accordingly i can also use debug console to evaluate values interactively i can edit breakpoint you just skip four and then go to five i can also edit breakpoint to say stop when it hits three more times so it provides pretty it provides pretty interactive debugging experience i can create launch json file now what happened is it created this vs code folder and created launch json file within this launch json file i can save the profiles of how i want to launch the debug session now when i click the play button i see python current file on the drop down which is matching with this one and when i have python file selected i can click this play button then it runs second extension that we will look at is remote wsl wsl stands for windows subsystem for linux it allows us to use linux natively on the windows environment it consists of the linux kernel which is open source managed by microsoft and you can install ubuntu or other distorts on top of the linux kernel with wso2 we can use linux file system on the windows computer which is much performant than windows file system when i have wsl installed i can configure the windows terminal to launch wsl by default [Music] on my computer i already installed wsl and ubuntu distro and it automatically adds ubuntu entry on the windows terminal i can change the default profile now when i launch windows terminal it opens on the ubuntu automatically when i try new name a you see that ubuntu is installed on my local desktop computer i can launch video studio code here and it automatically triggers remote wsl [Music] i can create a file here and you see it's connected to the console just like how we saw in the ssh demo if you wanna reach windows file system from wsl2 you can do that if you want to access wsl file system from windows you can do that [Music] by typing wsl dollar then we're going to will show you the folders on windows terminal you can also change where you wanna start when you launch the when you launch the console under settings you can specify the starting directory but note that you have to specify in the windows path form in this demo we're going to use wso only for a file system so i'm not going to do any more demo but you can see that it'll do the debugging just like how it worked in the ssh third extension that we are going to look is remote container it allows us to use docker container as a remote server that means i can set up the dev environment as code in the docker file and once i have that the same dev environment can be used by anybody in my dev team because it's tackle container i can also keep the source code on my local computer and mount it to the container i'm on my wsl console and before you continue you want to make sure you have one configuration attacker even though i have tackle for windows installed docker is not recognized by my wsl console in the docker settings there is resources and wsn integration you want to make sure this is checked and also ubuntu is turned on now you can use backward command from your wsl console i'm going to create a folder and launch visual studio code inside the folder it opened the folder under remote wsl i'm going to select remote containers reopen in container it asks me which container do you want to use i'm going to choose node i'll go with version 14. let me try open a new terminal you see it uses wsl 2 kernel just like how it was on my wsl console but the computer name is different my local computer's name is desktop something something but within here the local computer name says 5b5d something something that's the container's name and you can also see the path is different it says workspaces no test whereas actual folder is tilde repose node test when i create a file here it's visible here when i change the content here it's also visible here so they are connected the rib tilde repost node test is mapped to workspace's node test on this container now i have node installed here but i don't have node installed here now i'm going to install view cli and i'm going to create a view app now you see that dev container created this my app folder okay and it prolocated the view app for me now all these files are also available on the wsl file system within my container i can start and i can actually see the view app running and i change the content you see the hub reloading is also active let's see what just happened on my laptop i created a folder then i said reopen it in the container then visual studio code created a dev container docker file which is immediately instantiated then created a dev container when i created the dev container video studio code bound the wsl path to workspaces path and it also binds darker volume called vs code to vs code we'll look into this a little bit later it gives all the visual studio code extensions that i install on the dev container environment then i ran npm install view cli keep in mind that i installed vcli on the container itself it's not available in the container image or wsl only inside the container then i launched v create my app which boilerplated files on my wsr file system and then when i select to my app and npm run serve it actually started the web application within the dev container and then it mapped the local port to the to my desktop sport so that i can open it in my browser close the video studio code and i'm going to reopen again video studio code recognizes there is a dev container folder here so it suggests would you like to reopen it in container i say yes then it revived the dev container that i've been using before i still have ucla now let me close this and and i'm going to delete the container that was created for me now when i launch video studio code again it recognizes that container file again and suggest would you like to reopen in container so yes then following the attacker file it recreated the container but note that i installed the view cli on my container of the previous iteration so i wouldn't have ucla installed here i don't think it's important to have view cli installed on the dev container but if you want to you can modify the dev container json for the post create command this command is executed after the initial creation of the container following the docker file so you could say then when i recreate the dev container it's going to execute this automatically let me try remote containers rebuild container when i open the terminal i have ucla installed you can also install features to the extensions automatically for example on this view file i don't have the syntax highlighting enabled for that i want to install this filter extension visual studio code knows which extension to install on the remote side and which and which extension to install on the local side in this case filter needs to be installed on the remote side and i can click install or i can get this code then specify in the dev container let me recreate the container now and when i open the view file you see the syntax highlighting is enabled because computer is installed let me open the terminal again and if you look at the ps code folder you see that filter is installed if you look at the dev containers show log it shows details about how the dev container is created and if you search for mount section you will find that it mounted the source home kenneth repose node test to workspaces node test and also it mounted this volume called vs code to vs codepath this log file contains a lot of details so i highly recommend you to look into this i'm going to create another dev container using dynacore this time i'm going to create a new folder and i'm gonna launch visual studio code [Music] again it launched using remote wsl automatically i'm going to reopen in container and i'm going to select c sharp use that net 3.1 i'm not going to install dojs the unnamed information on this netdev container shows it still uses wso2 kernel but the computer name is ea90 whereas the computer name from the node.js container was de4e and again your name from my wsl console says desktop i have panda installed here 3.1 not here nor here using thunder cli i'm going to create a sample web api project i can run it and it created vs code on top of the dev container and in the top vs code it has this launch json file which says tanekwar web and it has pre-launch task named build which define which is defined in the tasks.json file now unlike the python example this launch profile is not current file dependent so i can just press play button here and then it's going to launch the project the web api project creates a simple web api application with the end point saying weather forecast when i compare the docker file between the net core version and node.js version you see that node.js version says dev containers javascript node and dollar variant where the variant is inputted from the dev container args variant is 14. in the network version the docker file says i want to use devcontainers.net core then variant the variant is again coming from the dev container json file where variant is 3.1 on this environment i can debug just like how i devote the python file in fact it's running as debug mode right now so if i put breakpoint here and refresh it'll hit the breakpoint and i will see all the local variables and i can add watch or i can use debug console let me open another terminal and when i do vs code you see that even though the containers are different between the node.js container and dyna container they share the vs code because you see this filter extension that i installed for node.js container is visible from that neck container that's because the same vs code volume is mounted to the both containers there are a couple of things that i learned from this experimentation first you want to use git from the wsr2 console not in dev container console there are ways to manage git credentials in the containers and the documentation is available here but i find it unnecessary hassle when you can just use wsl console for node.js app you always want to use wsl 2 file system only it's faster than windows file system and future studio code allows us to clone the source code inside the container or clone as a separate docker volume and attach it just like how vs code was attached but i find it rather confusing and if you switch between and if you ever edit the file using the windows explorer you might face the line ending problem because when you clone within linux file system it's going to use different line ending than when you do it in the windows file system but if you want to really use visual studio or writer in windows environment for example for daniel application you could git clone that in the windows file system and then just open it in windows file system just don't try to access windows file system from the wsl site or vice versa the remote containers show log gives you a lot of information that i didn't explain here if you're curious about the source code of the dev container it's available in this link and i have a sample repository that demonstrates how to get the benefit of dev environment as code using node.js and dynacore on my github repository called verticalslice that's all i have today thank you for watching

Channel: Kenneth Choe

Views: 2,647

Keywords: vscode, docker, devcontainer, linux

Id: r7ltoASUiX4

Length: 32min 59sec (1979 seconds)

Published: Wed Apr 21 2021