Modernization Hub

Modernization and Improvement
Web development on Windows (in 2019)

Web development on Windows (in 2019)


What’s up internet, welcome to this video talking about how you can use Windows as an awesome development box Craig: My name is Craig Loewen Kayla: And I’m Kayla Cinnamon Craig: Today we’re going to be talking to you about how you can use Windows Terminal, the Windows Subsystem for Linux, VSCode, Github Actions, and of course Azure, to develop amazing applications. Kayla: So the first thing we are going to dive right into is Windows Terminal because where else would you start creating your application? The command line. So we’ve created a new command line experience here on Windows and it’s the new Windows Terminal So you can get the Windows Terminal from the Microsoft Store today we have it in preview or you can get it on Github because we have it completely open sourced and you can download the package from there. So what’s really great about Windows Terminal is that it’s a whole new UI and performance improvement for the command line experience. So here we have a very beautiful acrylic background that you can control the opacity of by just doing CTRL + SHIFT + Scroll and tweaking it to your liking. And we also have a fully tabbed interface so you can run different shells or Linux distributions side by side within the same window and they can all be running separately to complete whatever task you’d like. So here we’ve just opened WSL which is running an Ubuntu distro and we are showing off things like Emojis So the Terminal has a new text render that is able to render unicode characters which includes emojis as well as programming ligatures So if you’re not sure what a programming ligature is, it’s when different symbols are typed in sequence one after the other and they merge together to form a new symbol. So here we have double equals which will merge together into a longer equal sign and another example would be triple equals which is just three lines stacked ontop of eachother so it makes your programming code look a lot more fluent and easy to read. From there I’ll throw it over to Craig who can talk more about what exactly WSL is. Craig: So what would be an awesome command line experience without an amazing shell running behind it? And that is the Windows Subsystem for Linux which we commonly refer to as WSL. If you haven’t heard of it, it’s a way for you to run your Linux applications directly on Windows So that means you can download your favorite distro like Ubuntu, Debian, openSUSE or even some custom distros that were made specifically for WSL like Pengwin and you can install them, and when you run them you get access to a bash shell right away. From there you can do things like sudo apt update and sudo apt install and run your favorite Linux tools and applications But it goes beyond just a regular dual booting or traditional VM experience because you can do things like acess your Windows files directly from your bash shell. So you can cd into your mount C drive, and access your Windows files, ls from there, run Linux applications on it And you can even run Windows executables directly from this bash shell as well. Here I am running explorer.exe . and I’m opening up my C drive straight from my bash shell. So that’s the Windows Subsystem for Linux, we’ve just released a new version called WSL 2. it’s available to Windows Insiders right now And it allows you to have a full system call compatibility experience as well as significantly faster file system performance So that means you can do more with it and it will run faster. One of those experiences is using docker Here I can run the docker daemon by running sudo /etc/init.d/docker start Start the docker daemon, and then I can start up a docker container, and that’s just by running my regular docker command. Here I can use all my favoite Linux tools and workspaces and my Linux workflows inside of my Windows machine directly insided of the Windows Terminal so it feels like it’s the exact same machine And that works really well with other Windows tools like VS Code So if I go back to my Ubuntu distro I can open up a project that I have in here called my Useful Website And if I run code . in here it opens up VS Code And here it’s using the VS Code Remote Extension The only thing that’s running inside of Windows is the actual UI everything else is running directly in Linux, so that means my debugger, my interpreter, for Python in this case, and any extensions that I might install, that may need to access things like files or Linux runtimes are all running on the Linux machine. So if I hover over a file you can see it has a Linux path on it, so we’re actually running directly on Linux. Where that’s really powerful is I can go open up my files, edit and access them, set breakpoints and even run a debugger. So I’m going to start my debugger and start debugging my python application, go and open up the new version of Edge, and access my website using localhost:5000. From there I hit my breakpoint and you can see that the variable I set which is ‘myPlatform’ is detecting Linux so I can actually step through this, look at all these different variables that I’ve set, and get the full debugging experience directly inside of Windows, inside of VSCode, running on Linux Craig: Play the inception music
Kayla: Yeah! Craig: and that’s really cool on the server side but we actually also include tools that will help you debug things on the client side so you can go and select ‘Launch Edge’ You can set up your .vscode preferences to have different debugging environments, and that includes attaching to an Edge Window Kayla: So what’s nice about using the new Edge that has Chromium on top of it is that you have all the same developer tools that you’re used to in previous browsers as well as you’re able to set different breakpoints that can then be hit inside of VSCode so you can have your debug experience flow freely through both Kayla: applications.
Craig: Super useful if you want to use either or Craig: So here we’ve found the bug Craig: on our website.
Kayla: We have a bug?
Craig: We do! Craig: Because obviously our website has a cat emoji as the icon and we have a dog paw coming down. So we’ve changed that now to the correct action of a cat paw. So we’ve fixed our bug and let’s take a look at committing that and pushing that up to our Github repo. Kayla: So what’s really cool about adding and pushing new code into Github is the new feature called Github Actions. So after we’ve pushed into Github a new tool comes into play here which is called Github Actions. So Github Actions takes place when something has happened on Github. So that could be an issue is created, or if you push code or commit code, or create a pull request or anything like that, Github actions will start doing whatever you tell it to do. So for us, in our Github actions we’ve set up builds that happen whenever new code is pushed to the repository. So here we have the fix committed and it’s pushed and now these builds are running on different versions of Python. So you can see the different versions listed on the left, and it’s running all of these builds one after the other so you don’t have to do it by hand. So what’s happening here is that it’s installing all the dependencies and also testing it as well as running pytests which are your own custom tests within Python. So you can have a whole testing suite right here on Github that kicks off automatically once you push new code. So that’s one very cool feature with Github Actions. And another feature is the workflows. So here you can have once again something kick off when an action happens on Github. So here we have the greetings workflow which just sends a fun little message to someone when they’ve created their first issue on a new repository. This is done through a yaml file inside of the Github slash workflows folder on our own Website. And here it’s just the code that shows here’s what’s suppposed to happen when a new issue is created by someone new for the first time. Craig: Once we go over to the issues and take a look, I posted my first issue here and we can see Github Actions responds and says Hey welcome to the repo first time poster! Kayla: So this is a fun example of how to use workflows but we actually have a little more in depth practical example for how workflows can be useful and that is inside of the Yarn repository. So what Yarn is done is that they’ve taken the Github Actions workflows and they’ve programmed it so that when someone creates a new issue with code inside of it it will kick off an action that will run the code in the latest build of whatever the application is. And then if it can reproduce the issue it will say you’re good to go and this is actually reproducible. Otherwise it will say that this issue has been fixed in the latest version. Which is super handy in terms of keeping your Github repository clean with very relevant issues still there. Craig: So we can jump on back out of Github Actions, now that we’ve pushed our commit, and we’ve verified that it built correctly using the new CI/CD pipeline and we can take a look at pushing that up to our production environment. And we can do that all within VS Code as well. So I have the VS Code Azure extension on the side. I can click on that and you can see that I have a subscription here and I have a website, my Useful-Website here, and I can right click and browse website and here is our production environment and you can see we still have the bug. And if we go back to VS Code and you’ll see a sub category inside of our Web app service plan called ‘Deployment slots’ and here we have a slot called staging and that is a slot that is connected directly to our Github repo. So the changes that we just pushed go directly to this slot. And so now if I go and open up the slot you can see we have the actual bug fix running here. So what’s cool about these staging slots is we can send a portion of the traffic to the slot to verify that it works for the majority of users and then once we are confident that this is a successful bug fix that won’t cause any problems all we need to is right click on it, and go ‘Switch to production’ and from there it will take that bug fix, put it up to production, and and make it work in our site for all our users to enjoy. That’s the end of our video! We hope you’ve enjoyed seeing how you can use the Windows terminal to start developing your app, and then actually running and debugging it all inside of VS Code using the Windows Subsystem for Linux, deploying that using Github Actions with a lovely CI/CD pipeline and at the end of the day running that inside of Azure. If you want to learn more about any of the tools that we’ve listed we have tons of links in the description below for you to go over. Craig: Thank you very much for tuning in!
Kayla: Bye everyone!

Leave a Reply

Your email address will not be published. Required fields are marked *