BEST Web Dev Setup? Windows & Linux at the same time (WSL)

I never thought I'd say this but in 2020 Windows has become the ultimate platform for the web developer Windows has become awesome for a variety of reasons but one of the biggest reasons is a feature called windows subsystem for Linux or WSL which allows you to run a real Linux environment on Windows without a virtual machine once you have it set up you can just open the command line and start working with the filesystem like you're on Linux and that's because you are in fact on Linux and windows at the same time you can be working on your server code and BIM on one screen while working with Adobe Photoshop on the other screen which is software that you can't install on Linux as a full-stack developer you can link Linux two Bs code allowing you to use any Linux based utility and spawn actual Linux processes from your application code today's video is a complete guide to setting up a modern web development environment on Windows with Linux you'll learn how to set up basically everything you need for a professional web development environment including things like browsers get nodejs docker and more and I'll throw in a bunch of little pro tips that hopefully make your life easier or at the very least make your system look like it's being operated by a 10x developer if you're new here like and subscribe and grab the full write-up to copy and paste some of the commands from fire ship IO the first thing you'll need is Windows 10 and to get things started we'll install windows subsystem for Linux which allows us to install Linux on Windows one thing I'd like to point out first is that there's WS l1 + WS l2 they both provide the same user experience WS l2 is just an improvement of the underlying architecture primarily to make things faster WS l2 is not generally available as of today but it will be in the next month or two and the upgrade process should be relatively seamless to get started we first need to opt into WS l go to the Start menu then open a new powershell session as an administrator paste in the following command which you can find from the full article and then it will prompt you to restart your system after your system reboots head over to the Microsoft Store if you search for Linux you'll see the option to run Linux on Windows you can install one or more of these distros and then switch between them as needed Ubuntu is always a solid choice and in fact the organization that publishes it canonical collaborated with Microsoft to develop WSL the first place once installed you should be able to open up the command line and run wsl flag l to list out your Linux versions now if we just type WS L it will enter a terminal session for our default version and what's awesome about this is that we're running actual L 64 Linux binaries it's not emulated or modified so you can run all the apps and tools that you can on a real winix machine on top of that you can access the Windows file system here and run Windows apps here as well in the past I used to run a dual boot system where I had windows on one partition in the hard drive and Linux on the other if I was working on web development I would switch over to my Linux environment but when I needed to work with an Adobe program or Microsoft Excel I'd have to restart the system and switch over to the Windows OS that's obviously very inefficient and the two operating systems don't share any files or functionality but with WSL we get the best of both worlds and it's really been a game changer for me now another thing that has always sucked about Windows is its terminal luckily that's getting an overhaul as well and we can install it from the Microsoft Store with this terminal we can easily open up a session in PowerShell or Linux if you've never used Linux here are some useful commands to move around the file system use LS to list the contents of a directory use M Kader to create a new directory and then CD to move into it now use touch to create a new file if you're a 10x developer you'll use VI to edit this file with bin but most of us can just use code to launch vs Co to edit the file you can prefix any command with sudo to run it as an administrator in Ubuntu we can install new software with the apt package manager and one package that you'll definitely want is SL once installed you can run SL from the command line to run a train through the terminal so that's cool in all but there's still one big problem our terminal is really ugly so how do we make the command line look cool well the first thing you should know is that whenever you start up a new Linux terminal session it runs a startup script that you can configure in this bash or C file bash is actually a programming language that you can use to run code from the terminal but the only thing you really need to know for right now is that there is an environment variable in this bash RC file called ps1 it represents the primary prompt string value currently it's showing the username followed by the system name and then the full working directory we can change it by modifying the bash RC file in the home directory go down to the bottom of the file and export a new value for ps1 and the full article I have a few different examples of different values and variables that you can use here for now I'll go ahead and show a timestamp so I know when I ran this command then I'll use the base name of the current working directory to shorten the prompt string so that's one way to go but I think we can still do a lot better by installing Z shell because that will give us access to an awesome tool that will make us feel like a 10x developer called oh my gosh we can install it by fetching its remote URL with curl and it will give us access to a bunch of themes and plugins for the command line but at this point you probably have no idea which theme you should use open up the route Z SHRC file then change the theme variable to random now every time you open up a new terminal session you'll have a completely different theme when you land on one you like you can copy its name and use it as the theme variable ok so now that we have an awesome-looking terminal we need to hook everything up to vs code to do that we need to install the remote WSL extension it makes it possible to open up a vs code window that's fully integrated with either one of your Linux distros or with Windows go ahead and hit ctrl shift P to open up the command palette in BS code you'll see the option to open a new window in WS l or reopen the current window when you do so you'll see this blue box down in the left corner that shows how you're running Ubuntu here now if you open up a terminal session with control backtick it'll be running z shell on your Linux OS now everything you do here including the code you write will happen on Linux notice how I'm console logging process dot platform be an oj ass if I run this script with node from the current window you can see it returns Linux as the platform if I do the same thing from the other window it logs win32 is the platform this is really cool because if you also run you bunty on a server you can have the same low-level dependencies that your server will have and that can make things easier when it comes to back-end development speaking of which one of the most important low-level dependencies for a web developer is no js' Ubuntu doesn't come with note installed by default so if you run node from the command line you should get not found there's a few different ways you can install node but I think the most reliable is with NPM you can install it in bash using this curl command or if you're using zsh like we are we can just add it as a plug-in to our zsh RC file in either case it will install node version manager on your system giving you access to the nvm use it by running nvm install with the version that you want to install if you go to node.js org it will tell you the recommended version for most users definitely install that one but you might also want the latest bleeding-edge version as well with NB m you can install both and then run NB m use to switch between them in either case you should now have access to both node and NPM from the command line and that gives you a super easy way to manage your node installation on Linux now another essential low-level dependency is get it is installed on ubuntu by default but we might want to update to the latest version for git we can use the apt package manager to get and install it that will bring us up to date but it's also a good idea to set a global username and email address we can do that by running git config and setting a few global values that way our commits are tied to our username so we can be blamed when something goes wrong and one other little pro tip here is to cache your get credentials if you push to a remote repository like github it's going to ask you for your username and password for every operation running this command will cache your username and password for one hour if you're using git for version control there's a good chance you're also using github so we're also going to install the brand-new github CLI for Linux we need to go and download the Debian release from the github Docs after its downloaded we can use the D package install command and point to that file and that gives us access to the gh command we can use it to easily create and manage repos on github and also fetch a list of issues or pull requests so that takes care of our get setup but another thing we should talk about is docker on Windows I highly recommend installing the docker desktop app although I think you need Windows Pro to install it it provides a really nice way to manage any containers running on your system it provides a list of all your containers if you click on one you can go and inspect the logs and view stats about that container and personally I find it more intuitive to work with docker and an app like this versus the command line but currently the Interop between WSL and docker is still in the works if I have a container running and try to access it from my Linux environment you can see I get this error that it's unable to connect in the command line there are ways around this but Microsoft and docker are collaborating to add full support in WSL 2 if you're running WSL 2 today you should see the option to an experimental support which will connect docker in both these Linux and Windows environments now if you're just getting started as web developer you probably don't need docker anyway it's not totally essential like nodejs or get but something you'll probably want at some point now the last thing I'll mention is that if you're doing web development you'll definitely want a few different browsers installed when working on a front-end JavaScript app I generally prefer to debug it in Chrome chrome has a very powerful set of JavaScript debugging tools and there's a BS code extension that you can install to connect Chrome directly to the vs code debugger so that's cool and all but if I'm doing anything related to design or CSS I'm definitely going to be using Mozilla Firefox compared to Chrome it has a much better suite of CSS tools for doing things like flexbox and grid and that's why you see me use firefox in my CSS videos and also I recommend installing brave so you can inspect your site in a privacy conscious environment if your web app collects analytics data or does anything with user authentication some of your features might not work and brave as browsers like this become more popular you should definitely consider the user experience there as well now at this point I could probably talk about another 500 different tools or vs code extensions but hopefully this gives you a good starting point to start developing full stack web applications on Windows with Linux of course if you want to learn more about productivity as a developer consider becoming a pro member at fire ship IO most of my courses contain a video dedicated to productivity based on the stack that we're working with thanks for watching and I will see you in the next one

Channel: Fireship

Views: 370,398

Keywords: webdev, lesson, tutorial, wsl, windows subsystem for linux, wsl2, windows dev, windows 10, windows tutorial, web dev windows, linux, ubuntu, node, web dev basics, web dev setup, cli

Id: -atblwgc63E

Length: 10min 35sec (635 seconds)

Published: Mon Apr 06 2020

Reddit Comments

[u/thomas-lg]

I've been working on the exact same setup the last few evening, and I really enjoy it! This video could have been very useful beforehand. It will surely help other :)
If Docker is a must for you (like me). You can now enjoy it on your Windows Home machine, just enroll in the Windows Insider program and you can now use the Docker Desktop instead of Docker Toolbox and setup WSL2 in the easiest way ever! Here is some info from Docker:
https://www.docker.com/blog/docker-desktop-for-windows-home-is-here/.

Of course you can also just wait for this feature to be release "officially"!

Happy to help if there is any question!

[u/Leo951]

Great concise starter video. 👍

[u/RajceP]

This video turned me to the other side 🙂

[u/Shreym03]

Would it be redundant to start a WSLsetup if I already have Ubuntu 18 dualboot on my laptop?