Developing In a Windows Environment for Beginners: Part 2
Welcome to Part 2 of my Developing In a Windows Environment for Beginners series! If you missed Part 1 go check it out here, otherwise please continue in your own time!
- Developer Tools and Hardware
- Installation — You are here!
- Git and Github
- First Project!
Disclaimer
One of the things that always frustrates me when reading through tutorials online is when they skip steps, either because the author thinks it doesn’t need to be said or perhaps they just forgot to include it when they go back to write up the instructions later. In the interest of not being one of those people, I have taken my Surface down to a bare Windows 10 installation and will be re-installing everything as we go along.
This is going to be an exhaustive step-by-step walk-through, so feel free to skip to different sections as needed for your situation.
Additionally, you should not, I repeat, SHOULD NOT be doing all of this on a device that you can’t have locked down for long stretches (hours or days). Most of my Windows development journey has been self-taught and pulled from various places on the internet. I am speaking from experience when I say I have messed my machine up so badly that I had to reinstall it from bare Windows on more than one occasion. Please make sure any irreplaceable files have a backup somewhere, and you have a spare device (even a smartphone works) to do some emergency research on when things go TITSUP (that’s a technical term, in case you were wondering).
Windows Updates
I said this was going to be exhaustive and I meant what I said. Since I am coming from a newly installed version of Windows, the absolute first step for me is to make sure I have all my necessary Windows updates. This is a pretty low lift, thankfully, but it can take some time for everything to download and install.
You can get to your updates by going through settings, but I typically just search for “updates” in my app search bar on my desktop and use the “Check for updates” option that pops up.
You can see here that I have some updates to run, so I’m going to do that before I continue with the rest of installs.
Firefox Browser Developer Edition
My next step is so common, that Microsoft already knows you are going to do it.
I’m downloading a new browser and setting it as my default.
My browser of choice is Firefox Browser Developer Edition, but Chrome works well too. The developer tools are roughly similar across both, and both have the plugins that I need to do what I want. The link to get to the download page is https://www.mozilla.org/en-US/firefox/developer/.
If you’ve never set your default apps before, no worries. Just like we did for PowerShell, search “default” in your app search bar and you should see an option for “Default apps”. Select it, and at the bottom of the page that opens up you will see the option to set your web browser. Change it to whatever you want, or you can even be a rebel and leave it on Edge. However, I reserve the right to call you a psychopath if you change it to Internet Explorer.
Remember how I said Microsoft knew what you were going to do before you did it? Well after their last attempt to get you to keep using edge, you are good to go to the next step!
Chocolatey
To quote the chocolatey.org website:
Chocolatey is a software management solution unlike anything else you’ve ever experienced on Windows. Chocolatey brings the concepts of true package management to allow you to version things, manage dependencies and installation order, better inventory management, and other features.
Chocolatey is not strictly necessary to develop on Windows, but it would be an absolute pain not to use it when we want to code, not manage software installations.
The first step to getting chocolatey up and running is to open up the PowerShell command line in administrative mode. I keep a shortcut to PowerShell on my taskbar, but since this is a new install I need to get it there first. The same way we did for installing Windows updates and the app defaults, we are going to search for “powershell” in the app search bar.
Once we find it I’ll add it to the task bar before choosing the “Run as Administrator” option on the right side of the panel. You should see an administrative rights pop-up asking if you want to allow the app to make changes to your PC (might appear in the background, so if you don’t see it immediately look at your taskbar for a shield icon). You can’t exactly continue with the rest of this walk-through without saying yes, so I recommend doing so. After that, you should see a command line screen open up that looks like this:
Notice how the title for the command line screen says “Admin: C:\Windows\system32”? That means we are in the right place.
You’ve probable also noticed the large error report in the middle of the screen. That’s not a big deal, what it’s telling you is that PowerShell can’t load a profile from your OneDrive documents because it isn’t allowed to run scripts on your machine. This is a security thing put in place to prevent people who don’t know what they are doing from accidentally doing something that could compromise their system. You might not even see the error pop up if you don’t have a profile saved somewhere in OneDrive, but either way it isn’t a concern for us because we know what we are doing. Definitely.
Your next step is to navigate to https://chocolatey.org/install and you will find the relevant instructions about halfway down the page. Make sure you have the “Individual” box selected in the “Choose How to Install Chocolatey” section.
The important part is a box that allows you to copy a command, but I highly recommend you read the whole section. If you are new to tech, then sharpen your tin-foil hats because the next few years of your life are a wild dive down the cyber-security rabbit-hole. If you aren’t new to tech, then you know. If you still don’t know, you’re a front-end developer (I kid! We’re all in this together…).
In the interest of instilling good habits, let’s take it from the top. The first command we want to execute is Get-ExecutionPolicy
(you can also use get-executionpolicy
because it isn’t case sensitive, but using correct case is a good habit to get into) which should return something like this:
This goes hand-in-hand with that error we saw earlier, it’s put in place to prevent malicious scripts from being run without your consent. So of course we need to disable it. But! If you do a little digging, you will find that what we are actually doing is disabling it for this this PowerShell session only. Which is good, we don’t want to permanently turn off our defenses.
So, copy and run that script from the Chocolatey website, and execute it!
If this is your first time using a script in the command line, congrats! You can now go wow all of your muggle friends with your wizardly skills. What you just did was tell the computer to download and install the Chocolatey package to your device, and add commands to the path so you can access it from future terminal windows (also called a shell).
The next thing we want to do is confirm that the computer actually did what we wanted it to do. Let’s run choco -v
and see what it gets us.
What this tells me is that my machine is currently using version 0.11.3 of Chocolatey. The command I ran has two parts, the first is choco
which is shorthand for Chocolatey, and the second part is -v
which tells the machine that I want it to tell me what version of Chocolatey I am using. It’s also possibly that you got an error telling you that choco
isn’t recognized as an internal or external command (or as the name of a cmdlet, function, script file, etc…). Before you panic, close out of PowerShell and re-open it and run the command again.
If it still says it isn’t recognized feel free to panic, but only a little bit because this isn’t a huge deal and it’s your first opportunity to experience the life of a true developer. Time to put your Google-fu to work and research what could be the issue. I suggest starting with any error codes or messages that you can see and include the context of your problem. For example I would likely search “choco not recognized” as my first step and see where it goes from there. Maybe I’ll do a future article on effective trouble shooting… Either way feel free to move to the next section in your own time!
Git
Some people love it, some people hate it, either way almost everyone uses it (I love it, by the way, it’s saved my bacon quite a few times). Now it’s time for us to GIT going. If you don’t love my humor, that’s ok because my wife does and according to her my head doesn’t need to get any bigger.
Remember how I said things would be a pain if we didn’t have Chocolatey to help with software management? Well here is our first example! Git is a whole ecosystem unto itself, and you can install it any number of complicated ways, but all we have to do is type in choco install git
and we are good to go!
I lied. This is why I’m doing it step-by-step as I write this out, so I don’t forget about intermediate steps. In this case, your machine should be asking you if you want to run the script, again I recommend you do your own research and thoroughly vet anything before you run automated scripts on your device, but in this case I’m going to go ahead and say A
for yes to all.
I see a couple important things in this output that we get. The first is the green and yellow text at the bottom telling me that everything was successfully installed. It’s also telling me that it wasn’t told where to install Git, but that isn’t a big deal because it will just be in whatever the default installation location is. More important is the purple text. Remember that error I mentioned you might get earlier about choco not being recognized? Well we should get something similar if we run git -v
now.
Indeed we do! Again, the fix here is to close your PowerShell window and open it again (make sure to do it in admin mode) or if you are very observant you will have noticed that the purple text above said I could run refreshenv
and not have to close things.
But wait, the purple text lied! Let this be an introduction into the reliability of console logs, especially on Windows devices. Instead, I just restarted my PowerShell session, and all is well. There is probably something I could have done to figure out how to make refreshenv
work, but it’s honestly not worth my time when it’s so much faster to close and re-open.
You can see here that my git -v
returned something other than the error we saw above, which tells me that it knows what to do when I tell it to do git
something. Whether I tell it to do the right thing is a different story…
Posh-git
Posh-git isn’t necessary to do what we do, but it is a nice thing to have, probably why it’s posh.
The two big things posh-git does, is add auto-completion of git commands, and format the way git repositories are displayed in the terminal. I’ve created a new repository to demonstrate the visual difference posh-git providesus.
You can see I did a few things here, we will get into terminal commands at a later date (I prefer doing things from the terminal over working in file explorer or IDE’s for things like git and directory manipulation) but the commands I ran here are telling my terminal to get into the git-demo
directory (you may also know directories as folders) and then initialize git with git init
. Importantly, you can see that other than telling me that an empty Git repository has been initialized, I don’t see any indication of the status of the repository (repo if you’re hip). My next command git status
is asking for that very thing, and we can see that I am on the master branch and there are currently no commits. Usable, but not great if you want to know the status at a glance, and that’s where posh-git comes in.
Chocolatey shows its chops again with choco install poshgit
. Importantly, I don’t need to be in my root directory to use the choco
command, which is the value of using chocolatey and having the commands added to the path. As with installing Git, I say A
for yes to all, and posh-git goes on its merry way. Restarting the PowerShell window should now show me my new git interface when I am in a Git repository.
But wait, it didn’t! Again, this is why I am doing this step-by-step as we go along, so I run into the same issues that you do and can help you through them. A little bit of research takes me down a path that I remember treading before. Remember that first error we saw when we were opening up PowerShell, the one I said you might not get? Well that’s both the source of our troubles and the solution to our problem. I’m going to take us through the long way, so you can see why I do the steps I do.
TL;DR
If you don’t want to read through me troubleshooting the issues I ran into, here is the solution.
RunPowerShellGet\Install-Module posh-git -Scope CurrentUser -Force
RunSet-ExecutionPolicy RemoteSigned
RunAdd-PoshGitToProfile -AllUsers -AllHosts
The first step is to run the command PowerShellGet\Install-Module posh-git -Scope CurrentUser -Force
. Again, I am going to say yes to the install of the NuGet provider, and once that is done we should see that nothing has changed. The next step is to run Import-Module posh-git
which should throw an error. If you didn’t get it when you first opened PowerShell, you got it now. It is telling us, again, that scripts are disabled from running as a security feature.
Now we have come up against a fundamental aspect of reality. Security impedes liberty (in this case our liberty to run potentially malicious scripts). We are actively restricted from doing some things because they are less safe, and we have to choose whether to reduce those restrictions or not. In this case we have to if we want posh-git to run, and I want posh-git to run so I’m doing it.
That being said, there is an easy way to do this, and there is a correct way to do this. I am going to go through the easy way right now, but please check out this article for the process on how you would do it the correct way.
The easy way is to run Set-ExecutionPolicy RemoteSigned
and try your import again. Having done so, we can now see something added onto the end of our command line path.
A new install of Git should come configured to create all new repositories with a “master” branch, which is what we see here. If we add a new file, say a README with ni README.txt
you can see additional information added after the branch name.
Those numbers tell me that I have added one file (the +1), changed zero files (the ~0), and removed 0 files (the -0) from the repository. The red color tells me that the changes are currently untracked, and not ignored (I will get into specifics of git commands and it’s functionality in a later article). If I run the command git add .
I see that the color now switches to green, this tells me that the git repository is tracking that file for a future commit.
And if I run git commit -m 'initial commit'
I see that the colors and numbers go away and I am back to seeing only the branch name. This tells me that the branch I am currently working on is the most up to date version of the files.
I hope you can see why posh-git is a valuable tool, and if you can’t right now you likely will in the future. The last thing we need to do is something you will thank yourself for next time you go to program, pull up your terminal, and find your beautiful posh-git missing. We need to create a PowerShell profile and tell it to import posh-git anytime we load up a new terminal. To demonstrate why you may want this, go ahead and close your current terminal window, re-open it, and navigate to where-ever you put your test repository (or just trust that I know what I’m talking about). You should see that your posh-git information is missing.
To fix this issue, run the command Add-PoshGitToProfile -AllUsers -AllHosts
. Closing, re-opening, and navigating to your test directory will show you that posh-git is now loading whenever you load up a new terminal view.
Whew, that was a lot! Now I am off to the next step, feel free to follow in your own time.
Node Version Manager (NVM)
A cardinal rule of programming is don’t install it (or build it) till you need it. But since we are installing so many other things in this article, I included this one as well.
If you are coming from a Mac or Linux development background, you are probably familiar with NVM. There is not a direct port for Windows, but nvm-windows is as close as it gets.
This package manager will not be installed with Chocolatey, and instead we are going to download the installer straight from the source. The latest release can be found at the top of this page and you will likely want to download the “nvm-setup.zip” file.
Downloading and installing NVM is just like downloading and opening any file from the internet, and should have you ready to go with NVM faster than it took me to type this paragraph up.
Once it has done its thing, close out of PowerShell and open it back up and run the command nvm list
. You should get a similar response to this.
NVM is exactly what it says it is, it helps you manage versions of Node (a back-end framework for JavaScript). As you can see here, NVM is working, but there are no recognized installations of node for it to manage. Let’s fix that.
Running the command nvm install latest
will get you the most recent stable release of node for windows, but if you need a specific version of node you can download that by specifying the version in place of latest
.
If you are like me, and forgot that you needed to be in an elevated shell (administrator) when doing installs, you will likely run into an error in either this step or the next one. It’s no big deal though, just close out and run PowerShell as an administrator and try your commands again.
Running nvm list
again will now show you the list of the node versions you have installed (probably just the one). The next command to run is nvm use latest
or alternatively nvm use newest
or nvm use 17.3.0
. These different commands, in order, tell NVM that you want to use the most up-to-date version you have installed, the most recent version you installed (not necessarily the most up-to-date), and the specific version 17.3.0. Any of these methods are acceptable, and running nvm list
again after declaring your version to use will show you which one you are currently using.
That’s all there is to NVM, and you won’t have to touch it all that often unless you need to use multiple versions of node. Now on to the next!
Windows Terminal
This should be a quick and easy install. The first step is to open up the Microsoft Store, and search for “windows terminal”.
Hit that install button, let it do its thing then you can open it once it’s done and pin it to the taskbar.
On to the next!
Visual Studio 2022
I’ve been really enjoying some of the new features they introduced in VS 2022, but VS 2019 is an equally strong contender and the one that I’ve used the most (by dint of 2022 only being out for a few months as of writing this). For either version, we will want to download the Community Edition (you will know if you are in a situation that calls for one of the other editions).
Since I plan on using VS Code for JavaScript and Node development, I’m really only going to choose the ASP.NET and Azure workloads on the first step of my install wizard.
After that you really just need to let it do its thing. On to the next!
Visual Studio Code
Last but not least, Visual Studio Code! You can think of this as a lighter sibling of Visual Studio, but it still gets the job done and I much prefer doing any JavaScript coding in VS Code than I do in VS but I prefer coding C# in VS, so take that as you will. We will be doing both in the future articles I plan to write, so I’m going to install both.
Unlike VS 2022, we don’t have to worry about which edition we want, there is really only one option (unless you want to be a guinea pig and opt for the insiders edition).
There isn’t any special configuration you need to do, or packages to choose (remember what I said about it being light-weight?), though there are some quality of life choices you can make, none of them are necessary. With that installation we are done, finally!
That was a lot! Thank you for bearing with me through all that. I hope it was comprehensive enough, thankfully now you should be in a place where you can start developing as you please. My next article is going to be about Git and Github, join me whenever you are ready!