How to get started with Web Development on Windows using the WSL2

hi and welcome to the coding castle my name is patrick and in this video i will show you how you can install vs code and the windows subsystem for linux after this video you will have a solid development setup and you can start exploring web development in whatever direction you want this setup is what i use typically when developing on windows and i can highly recommend it there are some optional steps included but i will provide timestamps so you can skip ahead if you don't care about let's say color themes throughout this video there will be some code snippets i will be using as well as some important links and you can find all of them in the blog post i wrote which will be linked in the description below the first step is to enable two windows features i prefer using windows powershell for that and you need to open that as an administrator simply paste in the two commands which will enable the windows features and after that restart your pc after rebooting you need to download the latest linux kernel package you can find the url in my blog post again simply download and install that the next step only applies if you plan on using the version 2 of the subsystem to default all distributions to the new version type in this command and everything you install after that will use version 2 automatically finally it is now time to install linux on windows i usually choose ubuntu and to install that you need to open the windows store and search for ubuntu and i already have two versions installed that's why i'm choosing that one and it really doesn't matter just choose one download and install that after first launching ubuntu it will take some additional time to install some things and after that it will ask you for your username and password just choose whatever you like here at this point you have successfully installed ubuntu on windows but the default terminal isn't all that pretty so i usually install the windows terminal from again the microsoft store you can simply download and install that as well and after launching you will be greeted with a powershell running inside the windows terminal before we change any settings i recommend that you install visual studio code right now because it will make editing the settings of the windows terminal a lot easier and the installation is really easy just download and click next on everything and you will have visual studio code installed when you first open visual studio code you should be prompted to install the remote wsl extension because we have the subsystem installed if that is not the case make sure you install the remote wsl extension manually by going to the extension pane on the left and searching for remote wsl now that we have vs code installed we can open the windows terminal again and open the settings with either this button right here or control comma and what we want to do is to change the default profile from powershell to ubuntu in the settings you will find a list of profiles and you need to find the one which says ubuntu or whatever you installed then you need to copy the id and paste it at the top of the file where it says default profile now if you open the windows terminal again it will default to ubuntu the next step is completely optional but i usually like my tools to look pretty when i work with them all day and recently i have been using the dracula theme they have themes not only for vs code and windows terminal but also for a lot of other things you can visit their website and there's a list of all the apps they support just search for windows terminal and copy the color scheme you find there after that open the windows terminal settings either with the button or with control comma and paste in the color scheme in the schemes section if you want the color scheme to be applied to all profiles just add a color scheme called dracula to the default section in the profiles the installation for vs code is a bit easier just go to the extension pane search for dracula and the very first result should be dracula official and you can install that color theme too the next step is optional again and i will show you how to install the custom programming font called cascadia code the very first result if you search for that should be the github and to download it you need to go to the releases section in github and download the latest release archive extract the archive and go to the ttf folder in there you will find four files which you need to install now we need to apply the font we just installed and if you still have the windows terminal settings open you can add another entry to the defaults in the profile section called the font phase and this will point to cascadia code pl the pl is important because this font version provides power line glyphs which are needed for some themes now you can open the vs code settings with control comma again search for the font family and change the editor font family to cascadia code you can scroll down a bit until you find terminal integrated font family and set that to cascadia code pl again because the terminal can use power line glyphs i also like to enable font ligatures but this is just personal preference i know some people who don't like this so feel free to give it a go and don't forget to save the settings the next step will consist of installing the c shell and something called oh my source or whatever you want to call that and to begin with i will go to the home directory first for good measure and then install the c shell with that command after that's done you can simply copy that command again or search for all my source and paste in the installation command it's important to agree to this that you change the default shell to the c shell and after that you will have the c try running with all my sets age in your terminal in your home directory there will now be a file called cshrc you can open that with some editor and in there you can add plugins change the theme whatever you like the agnostic theme is quite nice and uses power line glyphs so feel free to give that a go don't forget to either restart your terminal or source the settings file after you change any settings now it is time to install the node version manager the node version manager allows you to easily switch between node versions which can be quite helpful if you're trying to debug something or if it release breaks anything you can simply go back to an earlier release after the install you also need to add this code snippet to the dot cshrc file in order for nvm to load again don't forget to reload after adding this code snippet and you can verify the installation with nvm-v to find out the version and to install the latest version of node you can simply run nvm install node if you wanted to install another version you can run nvm install 12 13 14 whatever the node version is you want to install and that's it you can start cloning repos or create your own since git is installed with ubuntu and then you can open the folder with the code command with this setup you'll be ready to explore your favorite javascript framework create an express server or basically whatever your developer desires now there is this unwritten youtube rule that the first video ever usually sucks and i can already tell that there's a lot of room for improvement but i hope you enjoyed it nonetheless thanks for watching bye bye

Channel: Patrick Göler von Ravensburg

Views: 6,393

Rating: 4.9162302 out of 5

Keywords: web development, windows, wsl, vs code, windows terminal, node version manager, wsl2, ubuntu

Id: VWop2DxHbf8

Length: 9min 12sec (552 seconds)

Published: Wed Jan 13 2021