{"id":13571172,"url":"https://github.com/Vets-Who-Code/windows-dev-guide","last_synced_at":"2025-04-04T07:33:18.747Z","repository":{"id":37829937,"uuid":"472995085","full_name":"Vets-Who-Code/windows-dev-guide","owner":"Vets-Who-Code","description":"The Complete Windows Web Developer Setup Guide","archived":false,"fork":false,"pushed_at":"2024-10-26T18:05:23.000Z","size":19777,"stargazers_count":268,"open_issues_count":1,"forks_count":24,"subscribers_count":17,"default_branch":"main","last_synced_at":"2024-11-05T03:37:13.625Z","etag":null,"topics":["chocolatey","docker","git","github","hacktoberfest","node","npm","nvm","ohmyzsh","python","ruby","sql","vscode","windows","windows-terminal","wsl","zsh"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Vets-Who-Code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-23T01:24:08.000Z","updated_at":"2024-10-30T18:58:59.000Z","dependencies_parsed_at":"2023-01-30T21:16:03.210Z","dependency_job_id":"dd32a92a-a870-4301-9c0b-0e6619c99173","html_url":"https://github.com/Vets-Who-Code/windows-dev-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vets-Who-Code%2Fwindows-dev-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vets-Who-Code%2Fwindows-dev-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vets-Who-Code%2Fwindows-dev-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vets-Who-Code%2Fwindows-dev-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vets-Who-Code","download_url":"https://codeload.github.com/Vets-Who-Code/windows-dev-guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247139841,"owners_count":20890299,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chocolatey","docker","git","github","hacktoberfest","node","npm","nvm","ohmyzsh","python","ruby","sql","vscode","windows","windows-terminal","wsl","zsh"],"created_at":"2024-08-01T14:00:59.522Z","updated_at":"2025-04-04T07:33:13.736Z","avatar_url":"https://github.com/Vets-Who-Code.png","language":null,"readme":"\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/windows.jpg\" alt=\"Microsoft Windows Logo\" width=\"500px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n\u003ch1 align=\"center\"\u003eWindows Web Developer Setup Guide (2024)\u003c/h1\u003e\r\n\r\nEnglish | [中文](./README_cn.md)\r\n\r\n- [🔭 Overview](#-overview)\r\n- [☑ Prerequisites](#-prerequisites)\r\n- [🐧 WSL](#-wsl)\r\n  - [Installing WSL 2](#installing-wsl-2)\r\n  - [User Config](#user-config)\r\n  - [Updating Linux](#updating-linux)\r\n  - [Mapping Your Linux Drive](#mapping-your-linux-drive)\r\n    - [Pin Your Code Directory](#pin-your-code-directory)\r\n  - [Restarting WSL](#restarting-wsl)\r\n- [👨‍💻 Windows Terminal](#-windows-terminal)\r\n  - [Installing Windows Terminal](#installing-windows-terminal)\r\n  - [Terminal Settings](#terminal-settings)\r\n    - [Default Profile](#default-profile)\r\n    - [Starting Directory](#starting-directory)\r\n- [📝 Git Config](#-git-config)\r\n  - [Name](#name)\r\n  - [Email](#email)\r\n  - [Username](#username)\r\n- [GitHub CLI Installation](#github-cli-installation)\r\n- [GitHub CLI Configuration](#github-cli-configuration)\r\n  - [Creating your Personal Access Token](#creating-your-personal-access-token)\r\n  - [Git Credential Manager](#git-credential-manager)\r\n  - [Storing Your Token](#storing-your-token)\r\n- [💤 Zsh](#-zsh)\r\n  - [Installing Zsh](#installing-zsh)\r\n  - [OhMyZsh](#ohmyzsh)\r\n  - [cURL](#curl)\r\n  - [Installing OhMyZsh](#installing-ohmyzsh)\r\n  - [More Plugins](#more-plugins)\r\n    - [zsh-autosuggestions](#zsh-autosuggestions)\r\n    - [zsh-syntax-highlighting](#zsh-syntax-highlighting)\r\n- [📦 Node.js](#-nodejs)\r\n  - [NVM](#nvm)\r\n    - [Installing and Updating NVM](#installing-and-updating-nvm)\r\n    - [Changing Node Versions](#changing-node-versions)\r\n  - [NPM](#npm)\r\n    - [New Projects](#new-projects)\r\n    - [package.json](#packagejson)\r\n    - [Installing Modules](#installing-modules)\r\n    - [Dependencies](#dependencies)\r\n    - [Developer Dependencies](#developer-dependencies)\r\n    - [Batch Installing](#batch-installing)\r\n    - [Uninstalling](#uninstalling)\r\n    - [Versioning](#versioning)\r\n    - [package-lock.json](#package-lockjson)\r\n    - [Scripts](#scripts)\r\n- [💻 Visual Studio Code](#-visual-studio-code)\r\n  - [Installing VS Code](#installing-vs-code)\r\n  - [Remote Extension](#remote-extension)\r\n  - [Changing the Default Shell](#changing-the-default-shell)\r\n  - [Install the Vets Who Code Extension Pack](#install-the-vets-who-code-extension-pack)\r\n  - [Install the Vets Who Code Theme for VS Code](#install-the-vets-who-code-theme-for-vs-code)\r\n  - [More Extensions](#more-extensions)\r\n- [🍫 Chocolatey](#-chocolatey)\r\n  - [Admin Shell](#admin-shell)\r\n    - [Option 1](#option-1)\r\n    - [Option 2](#option-2)\r\n    - [Option 3](#option-3)\r\n    - [Option 4](#option-4)\r\n  - [Installing Chocolatey](#installing-chocolatey)\r\n  - [Basic Chocolatey Commands](#basic-chocolatey-commands)\r\n  - [Windows Apps](#windows-apps)\r\n- [🪜 Chrome Extensions](#-chrome-extensions)\r\n- [🇺🇸 VetsWhoCode Web App](#-vetswhocode-web-app)\r\n- [🐍 Python](#-python)\r\n  - [pip](#pip)\r\n  - [venv](#venv)\r\n  - [Flask](#flask)\r\n  - [Django](#django)\r\n  - [JupyterLab](#jupyterlab)\r\n    - [Notebook](#notebook)\r\n    - [Voilà](#voilà)\r\n  - [Python VS Code Extensions](#python-vs-code-extensions)\r\n  - [PyCharm](#pycharm)\r\n- [💎 Ruby](#-ruby)\r\n  - [Rails](#rails)\r\n  - [Ruby VS Code Extensions](#ruby-vs-code-extensions)\r\n- [Docker](#docker)\r\n  - [Docker Installation](#docker-installation)\r\n    - [Option 1](#option-1-1)\r\n    - [Option 2](#option-2-1)\r\n    - [Test Docker CLI](#test-docker-cli)\r\n  - [Docker Basics](#docker-basics)\r\n    - [Docker CLI](#docker-cli)\r\n    - [Additional Docker Resources](#additional-docker-resources)\r\n- [📚 References](#-references)\r\n\r\n## 🔭 Overview\r\n\r\nAfter a lot of trial and error, I've been able to piece together a pretty respectable Windows dev environment. While there are numerous guides available, I noticed a lack of comprehensive coverage. In this guide, I've aimed to provide a holistic overview without delving too deeply into specific topics, in the hopes of ensuring a seamless developer experience for the majority of users.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/screen.jpg\" alt=\"Windows 11 desktop screenshot with a WSL2 Windows Terminal open\" /\u003e\r\n\u003c/p\u003e\r\n\r\n## ☑ Prerequisites\r\n\r\n- Windows 10 version 2004 and higher (Build 19041 and higher) or Windows 11 [(Which version do I have?)](https://support.microsoft.com/en-us/topic/628bec99-476a-2c13-5296-9dd081cdd808)\r\n- A [GitHub](https://github.com) account\r\n\r\n## 🐧 WSL\r\n\r\nThe first and most important part of setting up your Windows dev environment is installing the Windows Subsystem for Linux (WSL). I recommend sticking with Ubuntu but feel free to try out as many distributions as you like. There are no issues with having multiple distributions installed at once.\r\n\r\n### Installing WSL 2\r\n\r\nWSL 2 is the latest version of WSL, adding new features like a full Linux kernel and full system call compatibility. There used to be a handful of steps needed to install it, but we now only need to enter the following command into PowerShell or Command Prompt:\r\n\r\n```sh\r\nwsl --install\r\n```\r\n\r\nThis command does the following:\r\n\r\n- Enables the optional WSL and Virtual Machine Platform components\r\n- Downloads and installs the latest Linux kernel\r\n- Sets WSL 2 as the default\r\n- Downloads and installs the Ubuntu Linux distribution (a reboot may be required)\r\n\r\nUsing the `--install` command defaults to Ubuntu and only works if WSL is not installed yet. If you would like to change your default Linux distribution, [follow these docs](https://docs.microsoft.com/en-us/windows/wsl/install#change-the-default-Linux-distribution-installed).\r\n\r\n### User Config\r\n\r\nOnce the process of installing your Linux distribution with WSL is complete, open the distribution (Ubuntu by default) using the Start menu. You will be asked to create a User Name and Password for your Linux distribution. When you enter your new password, nothing will display in the terminal. Your keyboard is still working! It is just a security feature.\r\n\r\n- This User Name and Password is specific to each separate Linux distribution that you install and has no bearing on your Windows user name.\r\n\r\n- Once you create a User Name and Password, the account will be your default user for the distribution and automatically sign in on launch.\r\n\r\n- This account will be considered the Linux administrator, with the ability to run sudo (Super User Do) administrative commands.\r\n\r\n- Each Linux distribution running on WSL has its own Linux user accounts and passwords. You will have to configure a Linux user account every time you add a distribution, reinstall, or reset.\r\n\r\n### Updating Linux\r\n\r\nIt is recommended that you regularly update and upgrade your packages. In Ubuntu or Debian, we use the `apt` package manager:\r\n\r\n```sh\r\nsudo apt update \u0026\u0026 sudo apt upgrade\r\n```\r\n\r\nWindows does not automatically update or upgrade your Linux distribution(s). This is a task that most Linux users prefer to control themselves.\r\n\r\n### Mapping Your Linux Drive\r\n\r\nWhen you open the Windows file explorer, it displays your devices and drives. We are going to add our Ubuntu virtual drive as a network location for easy access.\r\n\r\n1. Open the `\\\\wsl$\\` location from file explorer:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/search-bar.jpg\" alt=\"File explorer search bar\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n2. Right-click on the Ubuntu folder, and select `Map network drive`:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/drive-map.jpg\" alt=\"Mapping network drive\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n3. Select the drive letter you would like to use, leave `Reconnect at sign-in` checked and `Connect using different credentials` unchecked, and then click finish (mine will look slightly different because it's already been done):\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/network-folder.jpg\" alt=\"Mapping network drive\" /\u003e\r\n\u003c/p\u003e\r\n\r\n4. The result should look something like this:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/file-explorer.jpg\" alt=\"File explorer\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\nIf you wanted to access your Windows files from the Linux terminal, they are found in the `/mnt/` directory, so your Windows user directory would be located at `/mnt/c/Users/username`.\r\n\r\nWith your Ubuntu drive mapped, you can easily drag/drop or copy/paste Windows files to the Linux file system by using the file explorer.\r\n\r\nHowever, it is recommended to store your project files on the Linux file system. It will be much faster than accessing files from Windows and it can also be a little buggy.\r\n\r\n#### Pin Your Code Directory\r\n\r\nAnother quick tip I have is to create a code directory inside of Ubuntu, and then pin it to the quick access menu found on the left side of the file explorer. This comes in handy when transferring files quickly between Windows and Linux.\r\n\r\n1. Open File Explorer and click on the Ubuntu network drive we created\r\n2. Select the home dir, and then your user directory\r\n3. Right-click and create a new folder, name it code, or anything else you'd like\r\n4. Drag that new folder to the left, underneath the star icon that says `Quick access`\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/code-dir.jpg\" alt=\"My code directory\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n### Restarting WSL\r\n\r\nIf for some reason WSL stops working, you can restart it with these two commands from PowerShell/Command Prompt:\r\n\r\n```sh\r\nwsl.exe --shutdown\r\nwsl.exe\r\n```\r\n\r\nIf you return to your Linux shell everything should be normal.\r\n\r\n## 👨‍💻 Windows Terminal\r\n\r\nTo launch a Linux terminal we currently need to use the Ubuntu icon from the Start menu or enter the `wsl` or `bash` commands into PowerShell/Command Prompt. Another option that will give us more features like tabs, split views, themes, transparency, and key bindings, is to use the Windows Terminal. There are also a few other terminals like [Cmder](https://cmder.net/), [ConEmu](https://conemu.github.io/), or [Hyper](https://hyper.is/), but in my experience, Windows Terminal works extremely well.\r\n\r\n### Installing Windows Terminal\r\n\r\nWindows 11 comes with Windows Terminal by default, but If you are using Windows 10, Download and install Windows Terminal through the [Microsoft Store](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?rtc=1\u0026activetab=pivot:overviewtab).\r\n\r\n### Terminal Settings\r\n\r\nA few quick things I recommend setting up are the default profile and your starting home directory. These settings make it so launching Windows Terminal will open directly into WSL inside our user's home directory.\r\n\r\n#### Default Profile\r\n\r\nWindows Terminal will open a PowerShell or Command Prompt shell when launched by default, here is how to switch it to WSL:\r\n\r\n1. Select the `˅` icon from Windows Terminal and go to the Settings menu:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/term-settings.jpg\" alt=\"Windows terminal settings\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n2. In the Startup section you will find the Default profile dropdown, select Ubuntu. Below it, select Windows Terminal as the Default terminal application:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/default-profile.jpg\" alt=\"Default shell profile\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Starting Directory\r\n\r\nA default Ubuntu terminal will open to the root directory. To make finding your files a little quicker we can have it open into your home directory instead.\r\n\r\n1. Under the Profiles section in the settings menu click on Ubuntu\r\n2. At the General tab, you will find a Starting directory input\r\n3. Enter the following replacing \"username\" with your Ubuntu user name: `\\home\\username`\r\n4. You can leave the `Use parent process directory` box unchecked\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/start-dir.jpg\" alt=\"Starting directory in Ubuntu terminal\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\nThere are many more settings to explore, and there is also a JSON file you can edit for more advanced customizations.\r\n\r\nCheck out [this guide](https://www.ubuntupit.com/best-windows-terminal-themes-and-color-schemes/) for some popular Windows Terminal themes and how to install them.\r\n\r\n## 📝 Git Config\r\n\r\nGit should come pre-installed on most, if not all of the WSL Linux distributions. To ensure you have the latest version, use the following command in an Ubuntu or Debian-based distro:\r\n\r\n```sh\r\nsudo apt install git\r\n```\r\n\r\n### Name\r\n\r\nTo set up your Git config file, open a WSL command line and set your name with this command (replacing \"Your Name\" with your preferred username):\r\n\r\n```sh\r\ngit config --global user.name \"Your Name\"\r\n```\r\n\r\n### Email\r\n\r\nSet your email with this command (replacing \"youremail@domain.com\" with the email you prefer):\r\n\r\n```sh\r\ngit config --global user.email \"youremail@domain.com\"\r\n```\r\n\r\n### Username\r\n\r\nAnd finally, add your GitHub username to link it to git (case sensitive!):\r\n\r\n```sh\r\ngit config --global user.username \"GitHub username\"\r\n```\r\n\r\nMake sure you are inputting `user.username` and not `user.name` otherwise, you will overwrite your name and you will not be correctly synced to your GitHub account.\r\n\r\nYou can double-check any of your settings by typing `git config --global user.name` and so on. To make any changes just type the necessary command again as in the examples above.\r\n\r\n## GitHub CLI Installation\r\n\r\nDownload binaries from the official source:\r\n\r\n```sh\r\n(type -p wget \u003e/dev/null || (sudo apt update \u0026\u0026 sudo apt-get install wget -y)) \\\r\n\t\u0026\u0026 sudo mkdir -p -m 755 /etc/apt/keyrings \\\r\n\t\u0026\u0026 wget -qO- https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo tee /etc/apt/keyrings/githubcli-archive-keyring.gpg \u003e /dev/null \\\r\n\t\u0026\u0026 sudo chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg \\\r\n\t\u0026\u0026 echo \"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main\" | sudo tee /etc/apt/sources.list.d/github-cli.list \u003e /dev/null \\\r\n\t\u0026\u0026 sudo apt update \\\r\n\t\u0026\u0026 sudo apt install gh -y\r\n```\r\n\r\nOnce the CLI is installed, run this command to update:\r\n\r\n```sh\r\nsudo apt update \u0026\u0026 sudo apt install gh\r\n```\r\n\r\n## GitHub CLI Configuration\r\n\r\nEnter this command in the terminal:\r\n\r\n```sh\r\ngh auth login\r\n```\r\n\r\nFollow the prompts to authenticate your GitHub account. \r\n\r\n### Creating your Personal Access Token\r\n\r\nGitHub has removed the ability to use a conventional password when working in a remote repository. You are now required to create a personal access token instead.\r\n\r\n\u003ePersonal access tokens (PATs) are an alternative to using passwords for authentication to GitHub when using the [GitHub API](https://docs.github.com/en/rest/overview/other-authentication-methods#via-oauth-and-personal-access-tokens) or the [command line](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token#using-a-token-on-the-command-line).\r\n\r\nFollow [these docs](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) for step-by-step instructions on creating your personal token.\r\n\r\n### Git Credential Manager\r\n\r\nOnce you enter your token the first time, it can be stored via [Git Credential Manager (GCM)](https://github.com/GitCredentialManager/git-credential-manager) so you won't have to authenticate yourself each time.\r\n\r\nYou can have Git installed in WSL and also in Windows at the same time. [Git for Windows](https://gitforwindows.org/) includes GCM.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/gcm.png\" alt=\"Windows Git Installer Menu\" /\u003e\r\n\u003c/p\u003e\r\n\r\nYou can also download the [latest installer for Windows](https://github.com/GitCredentialManager/git-credential-manager/releases/latest) to install the GCM standalone version.\r\n\r\n### Storing Your Token\r\n\r\nOnce Git Credential Manager is installed you can set it up for use with WSL. Open your WSL terminal and enter this command:\r\n\r\n```sh\r\ngit config --global credential.helper \"/mnt/c/Program\\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe\"\r\n```\r\n\r\nNote:\r\n\r\nIf you ever receive the following error message:\r\n\r\n```sh\r\n/mnt/c/Program\\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe store: 1:\r\n/mnt/c/Program Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe: not found\r\n```\r\n\r\nTry using this command:\r\n\r\n```sh\r\ngit config --global credential.helper store\r\n```\r\n\r\n## 💤 Zsh\r\n\r\n Z shell works almost identically to the standard BASH shell found on default Linux installs. What makes it different is its support for plugins and themes, along with some extra features like spelling correction and recursive path expansion. It's time to throw BASH in the trash!\r\n\r\n### Installing Zsh\r\n\r\nZsh can be installed with one command:\r\n\r\n```sh\r\nsudo apt install zsh\r\n```\r\n\r\nAfter installing, type the `zsh` command. Zsh will ask you to choose some configurations. We will do this later on while installing oh-my-zsh, so choose option `0` to create the config file and prevent this message from showing again.\r\n\r\n### OhMyZsh\r\n\r\nThe most popular plugin framework by far is [OhMyZsh](https://ohmyz.sh/). It comes preloaded with loads of plugins, themes, helpers, and more. It can help with productivity for sure, but more importantly, it just looks cool 😎.\r\n\r\n### cURL\r\n\r\nFirst off, we need to make sure we have [cURL](https://curl.se/) installed. Short for \"Client URL\", it's a way to transfer data from the command line, and that's how we will download OhMyZsh.\r\n\r\n```sh\r\nsudo apt install curl\r\n```\r\n\r\n### Installing OhMyZsh\r\n\r\nEnter the following command into your terminal to install OhMyZsh:\r\n\r\n```sh\r\nsh -c \"$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)\"\r\n```\r\n\r\nThat's it! You should now see a `.oh-my-zsh` directory inside of your home directory. To change your plugins and themes you will need to edit your `.zshrc` file, also found in your home dir.\r\n\r\nHere is a list of all the [themes](https://github.com/ohmyzsh/ohmyzsh/wiki/Themes) and [plugins](https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins) that come bundled with OhMyZsh.\r\n\r\n### More Plugins\r\n\r\nThere are countless plugins available, but these are the two I recommend most.\r\n\r\n#### [zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions)\r\n\r\nAutosuggestions for zsh, It suggests commands as you type based on history and completions.\r\n\r\n1. Clone this repository into `$ZSH_CUSTOM/plugins` (by default `~/.oh-my-zsh/custom/plugins`)\r\n\r\n```sh\r\ngit clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions\r\n```\r\n\r\n2. Add the plugin to the list of plugins for Oh My Zsh to load (inside `~/.zshrc`):\r\n\r\n```sh\r\nplugins=(git zsh-autosuggestions)\r\n```\r\n\r\n3. Start a new terminal session.\r\n\r\n#### [zsh-syntax-highlighting](https://github.com/zsh-users/zsh-syntax-highlighting)\r\n\r\nThis package provides syntax highlighting for the shell zsh. It enables the highlighting of commands whilst they are typed at a zsh prompt into an interactive terminal. This helps in reviewing commands before running them, particularly in catching syntax errors.\r\n\r\n1. Clone this repository in oh-my-zsh's plugins directory:\r\n\r\n```sh\r\ngit clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting\r\n```\r\n\r\n2. Activate the plugin in `~/.zshrc`:\r\n\r\n```sh\r\nplugins=(git zsh-autosuggestions zsh-syntax-highlighting)\r\n```\r\n\r\n3. Start a new terminal session.\r\n\r\nA huge list of plugins can be found at the [awesome zsh plugins repo](https://github.com/unixorn/awesome-zsh-plugins).\r\n\r\n## 📦 Node.js\r\n\r\nNode.js is a JavaScript runtime environment that executes JavaScript code outside a web browser. It allows us to install packages, run local web servers, create APIs, and more.\r\n\r\n### NVM\r\n\r\nYou will likely need to switch between multiple versions of Node.js based on the needs of the different projects you're working on. Node Version Manager allows you to quickly install and use different versions of Node via the command line.\r\n\r\n#### Installing and Updating NVM\r\n\r\n1. Open your terminal and install NVM with `curl` or `wget`:\r\n\r\n```sh\r\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash\r\n```\r\n\r\n```sh\r\nwget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash\r\n```\r\n\r\nTo verify installation, enter:\r\n\r\n```sh\r\ncommand -v nvm\r\n```\r\n\r\nThis should return 'nvm', if you receive 'command not found' or no response at all, close your current terminal, reopen it, and try again.\r\n\r\n2. List which versions of Node are currently installed (should be none at this point):\r\n\r\n```sh\r\nnvm ls\r\n```\r\n\r\nThis will show Node is not currently installed, and lists all versions available for install.\r\n\r\n1. Install both the current and stable LTS versions of Node.js.\r\n\r\nInstall the current stable LTS release of Node.js (recommended for production applications):\r\n\r\n```sh\r\nnvm install --lts\r\n```\r\n\r\nInstall the current release of Node.js (for testing the latest Node.js features and improvements, but more likely to have issues):\r\n\r\n```sh\r\nnvm install node\r\n```\r\n\r\n4. List what versions of Node are installed:\r\n\r\n```sh\r\nnvm ls\r\n```\r\n\r\nNow you should see the two versions that you just installed listed.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/node-installed.jpg\" alt=\"Ubuntu terminal displaying node installed\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n5. Verify that Node.js is installed and the current version:\r\n\r\n```sh\r\nnode -v\r\n```\r\n\r\nThen verify that you have NPM installed as well:\r\n\r\n```sh\r\nnpm --version\r\n```\r\n\r\n#### Changing Node Versions\r\n\r\nUse the following commands to change the version of Node you would like to use for any given project:\r\n\r\n_Switch to the LTS version:_\r\n\r\n```sh\r\nnvm use --lts\r\n```\r\n\r\nYou can also use the specific number for any additional versions you've installed:\r\n\r\n```sh\r\nnvm use v23.1.0\r\n```\r\n\r\nTo list all of the versions of Node.js available, use the command: `nvm ls-remote`.\r\n\r\n### NPM\r\n\r\nNode Package Manager is the default package manager for Node.js. It is a command-line tool used to download or publish packages and manage the dependencies of a project. There is a searchable repository of all available NPM packages at [https://www.npmjs.com/](https://www.npmjs.com/).\r\n\r\nTo list your current installed version of NPM:\r\n\r\n```sh\r\nnpm -v\r\n```\r\n\r\n#### New Projects\r\n\r\nWhen creating a new project that will utilize NPM, it must be initialized with the `init` command. First, make sure you are in the root directory of your project, and then use the following command:\r\n\r\n```sh\r\nnpm init\r\n```\r\n\r\n#### package.json\r\n\r\n`npm init` generates a `package.json` file and will prompt you for the metadata of your project. This includes things like the name, version, description, and license. You can think of it as the blueprint of your project as it will also contain the packages it depends on. The metadata can be changed at any time by editing the `package.json` file after the initialization.\r\n\r\nIf you would like to automatically populate the initialization with all the default values, you may add the `--yes` flag.\r\n\r\n```sh\r\nnpm init --yes\r\n```\r\n\r\n#### Installing Modules\r\n\r\nModules are installed via the `npm install` or `npm i` command.\r\n\r\n```sh\r\nnpm install react\r\n```\r\n\r\nThe above command will install the React module as a dependency in `package.json`.\r\n\r\nWe can also install NPM packages globally on our system. This is useful for utilities like command line interfaces.\r\n\r\n[Yarn](https://yarnpkg.com/) is another widely used node package manager, if we wanted to use it on all our node projects we would need the `--global` or `-g` flag.\r\n\r\n```sh\r\nnpm install --global yarn\r\n```\r\n\r\n#### Dependencies\r\n\r\nYou can save a module as either a dependency or a developer dependency.\r\n\r\nA dependency would be something that your project cannot function properly without.\r\n\r\nThe `--save` flag used to be needed to install modules as a dependency, but it is now done automatically with the `install` command.\r\n\r\n```sh\r\nnpm install --save gray-matter\r\n```\r\n\r\nIs the same as:\r\n\r\n```sh\r\nnpm install gray-matter\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/dependencies.jpg\" alt=\"VS Code displaying the dependencies section of package.json\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Developer Dependencies\r\n\r\nA developer dependency would be the modules used to build the project, not run it. This would include things like linters and testing tools.\r\n\r\nDeveloper dependencies are added with the `--save-dev` or `-D` flag. This adds the module to the `devDependencies` section of `package.json`\r\n\r\n```sh\r\nnpm install --save-dev husky\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/devDependencies.jpg\" alt=\"VS Code displaying the developer dependencies section of package.json\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Batch Installing\r\n\r\nApart from installing a single module, you can install all modules that are listed as `dependencies` and `devDependencies`:\r\n\r\n```sh\r\nnpm install\r\n```\r\n\r\nThis will install all modules listed in the `package.json` of your current directory.\r\n\r\nIf we only wanted to install the dependencies needed to run our project, the `--production` flag is used:\r\n\r\n```sh\r\nnpm install --production\r\n```\r\n\r\nthe `--production` flag will only install the modules from the `dependencies` section of `package.json` and ignore the `devDependencies`. The perk of this is notably reducing the size of the `node_modules` folder.\r\n\r\n#### Uninstalling\r\n\r\nRemoving modules works in the same way as installing them. Flags will need to be used for any global or developer dependencies.\r\n\r\n_Dependencies:_\r\n\r\n```sh\r\nnpm uninstall react\r\n```\r\n\r\n_Developer Dependencies:_\r\n\r\n```sh\r\nnpm uninstall --save-dev husky\r\n```\r\n\r\n_Global Installs:_\r\n\r\n```sh\r\nnpm uninstall --global yarn\r\n```\r\n\r\n#### Versioning\r\n\r\nPackage versions are identified with major, minor, and patch releases. `8.1.1` would be major version 8, minor version 1, and patch version 1.\r\n\r\nYou can specify an exact version number by using the `@` symbol.\r\n\r\n```sh\r\nnpm install react@17.0.1\r\n```\r\n\r\nTwo more symbols we can use are `^` and `~`.\r\n\r\n`^` is the latest minor release.\r\nFor example, `npm install ^8.1.1` specification might install version `8.3.1` if that's the latest minor version.\r\n\r\n`~` is the latest patch release.\r\nIn the same way as minor releases, `npm install ~8.1.1` could install version `8.1.6` if that's the latest patch version available.\r\n\r\nWhen using the `npm install` or `npm i` command, the latest minor version will be used.\r\n\r\n#### package-lock.json\r\n\r\nThe exact package versions will be documented in a generated `package-lock.json` file.\r\n\r\nThe values found inside the `dependencies` and `devDependencies` objects of the `package.json` file include a range of acceptable versions of each package to install.\r\n\r\n`package-lock.json` is generated by the `npm install` command and contains the _exact_ versions of the dependencies used.\r\n\r\n#### Scripts\r\n\r\n`package.json` also contains a `scripts` property that can be defined to run command-line tools installed on the current project. This can include things like running tests, formatting your code, and launching a local server.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/scripts.jpg\" alt=\"VS Code displaying the scripts section of package.json\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\nNPM scripts are run by using the `run` command. With the above configuration, you would use the following command to have prettier format your code:\r\n\r\n```sh\r\nnpm run format\r\n```\r\n\r\nThe keys in the scripts object are the command names and the values are the actual commands.\r\n\r\n_Check out the official [NPM](https://docs.npmjs.com/), [NVM](https://github.com/nvm-sh/nvm), and [Node.js](https://nodejs.org/en/docs/) docs for more in-depth guides._\r\n\r\n## 💻 Visual Studio Code\r\n\r\nThere are many amazing code editors available for free, but Visual Studio Code our favorite and recommended by VetsWhoCode.\r\n\r\n### Installing VS Code\r\n\r\nVS Code is available on Windows, macOS, and Linux. You can download the latest Windows installer [here](https://code.visualstudio.com/download).\r\n\r\nDuring installation, be sure to select the **Add to PATH** option, allowing you to open a folder in WSL from the Windows terminal.\r\n\r\n### Remote Extension\r\n\r\nInstall the [Remote Development Extension Pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack).\r\n\r\n\u003eThis allows you to use WSL as your integrated development environment and will handle compatibility and pathing for you. [Learn more](https://code.visualstudio.com/docs/remote/remote-overview).\r\n\r\nThis extension will also allow you to launch VS Code right from your WSL terminal by using the `code` command.\r\n\r\nIf I were inside the root directory of my repository, I would use `code .` to launch the entire directory inside VS Code.\r\n\r\n```sh\r\ncd my-project\r\ncode .\r\n```\r\n\r\n### Changing the Default Shell\r\n\r\nThe WSL2 shell can be chosen as the default VS Code terminal by pressing \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e and typing/choosing Terminal: Select Default Profile, then selecting zsh:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/command-palette.jpg\" alt=\"VSCode default shell\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/zsh-profile.jpg\" alt=\"VSCode default shell\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n### Install the Vets Who Code Extension Pack\r\n\r\n[VetsWhoCode Extension Pack](https://marketplace.visualstudio.com/items?itemName=VetsWhoCode.vetswhocode-extension-pack) - Extension Pack for new veterans learning javascript at #VetsWhoCode\r\n\r\n### Install the Vets Who Code Theme for VS Code\r\n\r\n[HashFlag Theme](https://marketplace.visualstudio.com/items?itemName=OfficialVetsWhoCode.HashFlag) - A High contrast programming theme inspired by the colors of Vets Who Code.\r\n\r\n### More Extensions\r\n\r\nThe number of extensions available for VS Code can be overwhelming, here are some useful extenstions:\r\n\r\n- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) - Automatically add HTML/XML close tag.\r\n- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - Automatically rename paired HTML/XML tag.\r\n- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) - This extension styles CSS/web colors found in your document.\r\n- [Dash](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash) - Dash, Zeal, and Velocity integration in Visual Studio Code\r\n- [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) - This makes it easy to create, manage, and debug containerized applications.\r\n- [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) - This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.\r\n- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Find and fix problems in your JavaScript code\r\n- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) - View git log, file history, compare branches or commits\r\n- [GitHub Markdown Preview](https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview) - Adds styling, markdown checkboxes, footnotes, emoji, and YAML preamble.\r\n- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - Quickly glimpse into whom, why, and when a line or code block was changed.\r\n- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Launch a local development server with a live reload feature for static \u0026 dynamic pages.\r\n- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) - Includes everything you need to start collaboratively editing and debugging in real-time.\r\n- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) - Markdown keyboard shortcuts, table of contents, auto preview, and more\r\n- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) - Markdown linting and style checking for Visual Studio Code\r\n- [Postman](https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode) - Streamline API development and testing with the power of Postman, directly in your favorite IDE.\r\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Prettier is an opinionated code formatter.\r\n- [Wakatime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) - Metrics, insights, and time tracking automatically generated from your programming activity.\r\n\r\nNote:\r\n\u003eYou will need to install any VS Code extensions for your Remote - WSL. Extensions already installed locally on VS Code will not automatically be available. [Learn more](https://code.visualstudio.com/docs/remote/wsl#_managing-extensions).\r\n\r\n## 🍫 Chocolatey\r\n\r\n[Chocolatey](https://community.chocolatey.org/) is a command-line package manager like [homebrew](https://brew.sh/) or [APT](https://ubuntu.com/server/docs/package-management), but for Windows.\r\n\r\n### Admin Shell\r\n\r\nBefore we start the installation process, I want to cover launching an administrative shell from Windows. There are a few ways to do this:\r\n\r\n#### Option 1\r\n\r\nRight-click on the Windows start menu and select Windows Terminal (Admin):\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/start-menu.png\" alt=\"Right-clicked Windows start menu\" /\u003e\r\n\u003c/p\u003e\r\n\r\nOnce your terminal loads, click the `˅` icon and open a new PowerShell tab. It should say `Administrator: Windows PowerShell` in the new tab:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/adminps.png\" alt=\"Admin PowerShell\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Option 2\r\n\r\nIf you have Windows Terminal on your taskbar, \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eRight-Click\u003c/kbd\u003e on the icon select run as administrator, and then open a new PowerShell tab:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/right-click-admin.png\" alt=\"Right click windows terminal icon\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Option 3\r\n\r\nUse the search bar from the Start menu and type in `powershell`. A link to Run as Administrator will display:\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/powershell.png\" alt=\"Search powershell from the start menu\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Option 4\r\n\r\nWindows Terminal added a new feature where you can launch a PowerShell/Command Prompt profile in an Admin terminal automatically. In the Windows Terminal settings, scroll down to your desired profile and then toggle the `Run this profile as Administrator` switch. Now you can skip all the steps above, and the terminal will always launch as admin.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/new-admin.jpg\" alt=\"Automatically launch an admin windows terminal profile\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n### Installing Chocolatey\r\n\r\n1. Open an administrative PowerShell terminal\r\n\r\n2. Run the following command:\r\n\r\n```ps\r\nGet-ExecutionPolicy\r\n```\r\n\r\n3. If it returns `Restricted`, then run one of the following commands:\r\n\r\n```ps\r\nSet-ExecutionPolicy AllSigned\r\n```\r\n\r\nor\r\n\r\n```ps\r\nSet-ExecutionPolicy Bypass -Scope Process\r\n```\r\n\r\n\u003eWith PowerShell, you must ensure `Get-ExecutionPolicy` is not Restricted. We suggest using `Bypass` to bypass the policy to get things installed or `AllSigned` for quite a bit more security.\r\n\r\n4. Finally, run the following command:\r\n\r\n```ps\r\nSet-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))\r\n```\r\n\r\nIf you don't see any errors, you are ready to use Chocolatey! Type `choco` or `choco -?` now, or see [Getting Started](https://docs.chocolatey.org/en-us/getting-started) for usage instructions.\r\n\r\n### Basic Chocolatey Commands\r\n\r\nWe use the `choco` command to run Chocolatey. (_Remember, you must use an administrative shell for it to work._)\r\n\r\nInstall a new package:\r\n\r\n```ps\r\nchoco install filename\r\n```\r\n\r\nRemove a package:\r\n\r\n```ps\r\nchoco uninstall filename\r\n```\r\n\r\nList all of the installed packages:\r\n\r\n```ps\r\nchoco list\r\n```\r\n\r\nUpdate:\r\n\r\n```ps\r\nchoco upgrade filename\r\n```\r\n\r\nor to update everything at once:\r\n\r\n```ps\r\nchoco upgrade all\r\n```\r\n\r\n### Windows Apps\r\n\r\nSearch for available apps on the [Community Package Repository](https://community.chocolatey.org/packages).\r\n\r\nHere are a few of my favorite (free) apps for productivity and development on Windows:\r\n\r\n- [Wox](http://www.wox.one/) - A full-featured launcher\r\n- [RunJs](https://runjs.app/) - JavaScript and TypeScript playground\r\n- [Responsively](https://responsively.app) - A modified web browser that helps in responsive web development.\r\n- [Zeal](https://zealdocs.org/) - the Windows version of Dash\r\n- [Figma](https://www.figma.com) - A collaborative UI design tool\r\n- [draw.io](https://app.diagrams.net) - Flowchart maker and diagram software\r\n- [GitHub Desktop](https://desktop.github.com/) - A GUI for Git\r\n- [Postman](https://www.postman.com/) - API tools\r\n- [Notion](https://www.notion.so/) - Project management and note-taking software\r\n- [Obsidian](https://obsidian.md/) - A note-taking app using markdown\r\n- [Microsoft PowerToys](https://docs.microsoft.com/en-us/windows/powertoys/?WT.mc_id=twitter-0000-docsmsft) - A set of utilities for power users\r\n\r\nYou can download all these at once with the following command using Chocolatey in an admin shell:\r\n\r\n```ps\r\nchoco install wox runjs responsively zeal figma drawio github-desktop postman notion powertoys obsidian -y\r\n```\r\n\r\n## 🪜 Chrome Extensions\r\n\r\nThese are all available as [Firefox extensions](https://addons.mozilla.org/en-US/firefox/extensions/) as well.\r\n\r\n- [Axe Accessibility](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) - Accessibility Checker for Developers, Testers, and Designers in Chrome\r\n- [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp) - Advanced Eyedropper, Color Picker, Gradient Generator, and other colorful goodies\r\n- [daily.dev](https://chrome.google.com/webstore/detail/dailydev-the-homepage-dev/jlmpjdjjbgclbocgajdjefcidcncaied) - Get a feed of the hottest developer news personalized to you.\r\n- [JSON Formatter](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en) - Makes JSON easy to read.\r\n- [Nimbus Capture](https://chrome.google.com/webstore/detail/nimbus-screenshot-screen/bpconcjcammlapcogcnnelfmaeghhagj) - Screen Capture full Web page or any part.\r\n- [React Dev tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) - Adds React debugging tools to the Chrome Developer Tools.\r\n- [Site Pallette](https://chromewebstore.google.com/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh?hl=en-US\u0026utm_source=ext_sidebar) - Generate a color palette from any website.\r\n- [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm) - With this extension, you could inspect web fonts by just hovering on them.\r\n\r\n## 🇺🇸 VetsWhoCode Web App\r\n\r\nLet's get the VWC App installed and running locally. It will be our first step toward making Open-Source contributions to the organization!\r\n\r\n1. Clone the Repo\r\n\r\nClone the repository from GitHub:\r\n\r\n```sh\r\ngh repo clone Vets-Who-Code/vets-who-code-app\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/clone.jpg\" alt=\"Using git clone\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\nThis may take a few minutes.\r\n\r\n2. Change Directory\r\n\r\nChange into the newly cloned directory:\r\n\r\n```sh\r\ncd vets-who-code-app\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/cd.jpg\" alt=\"Changing to the app directory\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n3. Install Node.js\r\n\r\nUsing `nvm install` will install the version of Node.js required by the VWC app:\r\n\r\n```sh\r\nnvm install\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/nvm.jpg\" alt=\"Install node with NVM\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n4. Install Dependencies\r\n\r\n`npm install` is how we install React, Next, Bootstrap, and every other piece of tech that the app requires. This will also take a few minutes.\r\n\r\n```sh\r\nnpm install\r\n```\r\n\r\nThere will be **a lot** of warnings and other messages that display, but this is normal.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/npm1.jpg\" alt=\"Installing dependencies with npm\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/npm2.jpg\" alt=\"Installing dependencies with npm continued\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n5. Run the App\r\n\r\nFinally, we can launch the app on our local server:\r\n\r\n```sh\r\nnpm run dev\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"images/run.jpg\" alt=\"Run the vwc app locally\" width=\"800px\" /\u003e\r\n\u003c/p\u003e\r\n\r\nYou should be able to view the website locally at [http://localhost:3000/](http://localhost:3000/)].\r\n\r\n\u003ckbd\u003eCTRL\u003c/kbd\u003e + \u003ckbd\u003eLeft-click\u003c/kbd\u003e on the localhost link in your terminal to launch the app in your browser.\r\n\r\n\u003ckbd\u003eCTRL\u003c/kbd\u003e + \u003ckbd\u003eC\u003c/kbd\u003e to close the dev server when you are finished.\r\n\r\n## 🐍 Python\r\n\r\nThis section covers setting up a Python development environment in WSL. In the end, you will have a package manager, environment manager, some frameworks, extensions, and more.\r\n\r\nThe first step will be confirming that Python is already installed on your system:\r\n\r\n```sh\r\npython3 --version\r\n```\r\n\r\nA Python version number should be returned. If not, install it with:\r\n\r\n```sh\r\nsudo apt install python3\r\n```\r\n\r\n### pip\r\n\r\npip is the package manager for Python, similar to npm for JavaScript. Install it using the following:\r\n\r\n```sh\r\nsudo apt install python3-pip\r\n```\r\n\r\n### venv\r\n\r\nvenv allows you to create virtual environments for your Python projects, helping to prevent versioning conflicts.\r\n\r\n```sh\r\nsudo apt install python3-venv\r\n```\r\n\r\n### Flask\r\n\r\nFlask is a web development framework similar to Express for Node.js. It can be installed by using pip:\r\n\r\n```sh\r\npip3 install flask\r\n```\r\n\r\n### Django\r\n\r\nAnother popular web development framework is Django. Just as before, install it using pip:\r\n\r\n```sh\r\npip3 install django\r\n```\r\n\r\n### JupyterLab\r\n\r\nJupyterLab is a web-based interactive development environment. It is a powerful tool used in data science, scientific computing, computational journalism, and machine learning. Install it using the following command:\r\n\r\n```sh\r\npip3 install jupyterlab\r\n```\r\n\r\nJupyterLab can be launched using the `jupyter-lab` command.\r\n\r\n#### Notebook\r\n\r\nThe next step is to install the Jupyter Notebook. It allows you to create and share documents from Jupyter.\r\n\r\n```sh\r\npip3 install notebook\r\n```\r\n\r\nThe notebook is run by using the `jupyter notebook` command.\r\n\r\n#### Voilà\r\n\r\nVoilà allows you to convert a Jupyter Notebook into an interactive dashboard that allows you to share your work with others.\r\n\r\n```sh\r\npip3 install voila\r\n```\r\n\r\nLaunch Voilà using the `voila` command.\r\n\r\n### Python VS Code Extensions\r\n\r\nYou will find a ton of Python extensions for VS Code, but here are a few of the more popular ones:\r\n\r\n- [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python) - The official Python extension.\r\n- [Django](https://marketplace.visualstudio.com/items?itemName=batisteo.vscode-django) - Syntax highlighting and snippets for Django.\r\n- [Python Indent](https://marketplace.visualstudio.com/items?itemName=KevinRose.vsc-python-indent) - Correct Python indentation.\r\n- [Python Environment Manager](https://marketplace.visualstudio.com/items?itemName=donjayamanne.python-environment-manager) - Manage all of your Python environments \u0026 packages.\r\n- [autoDocstring](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring) - Quickly generate docstrings for Python functions.\r\n- [Black Formatter](https://marketplace.visualstudio.com/items?itemName=ms-python.black-formatter) - Code formatter for Python using Black\r\n- [AREPL](https://marketplace.visualstudio.com/items?itemName=almenon.arepl) - Automatically evaluates Python code in real-time as you type.\r\n- [Python Test Explorer](https://marketplace.visualstudio.com/items?itemName=LittleFoxTeam.vscode-python-test-adapter) - Run your Python tests in the Sidebar of Visual Studio Code.\r\n\r\n### PyCharm\r\n\r\nInstead of using VS Code, another option is to use an IDE made specifically for Python development. JetBrains created one of the best and most widely used ones called PyCharm. There is a free community edition version that can be downloaded [here](https://www.jetbrains.com/pycharm/).\r\n\r\n## 💎 Ruby\r\n\r\nIn this section, we'll install Ruby using `rbenv`. Using rbenv will also allow you to install multiple Ruby environments on your machine, using different versions.\r\n\r\n_This guide continues installation with zsh as the default shell._\r\n\r\n1. Install rbenv\r\n\r\n```sh\r\nsudo apt install rbenv\r\n```\r\n\r\n2. Follow the instructions to load rbenv in the shell:\r\n\r\n```sh\r\nrbenv init\r\n```\r\n\r\nThe output will prompt you with instructions for loading rbenv. In your **.zshrc**, add the following line:\r\n\r\n```sh\r\n# Loading rbenv automatically\r\neval \"$(rbenv init -)\"\r\n```\r\n\r\n3. Restart your terminal to update the shell.\r\n\r\n4. Before installing Ruby, you'll want to ensure your build environment contains the required tools and libraries:\r\n\r\n```sh\r\nsudo apt-get install autoconf bison patch build-essential rustc libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libgmp-dev libncurses5-dev libffi-dev libgdbm6 libgdbm-dev libdb-dev uuid-dev\r\n```\r\n\r\n5. Next, install `ruby-build` as a rbenv plugin, to make sure we don't have any problems with rbenv.\r\n\r\n```sh\r\ngit clone https://github.com/rbenv/ruby-build.git \"$(rbenv root)\"/plugins/ruby-build\r\n```\r\n\r\n6. Let's get Ruby installed:\r\n\r\nRun this command to see which stable versions of Ruby are available:\r\n\r\n```sh\r\nrbenv install -l\r\n```\r\n\r\nInstall the most recent stable version, which in this case is v3.1.2:\r\n\r\n```sh\r\nrbenv install --verbose 3.3.5\r\n```\r\n\r\nThis can take a _very_ long time. The `--verbose` flag will show the install progress, otherwise, it will look like it's frozen.\r\n\r\n_Ruby will be installed in your `~/.rbenv` directory._\r\n\r\n7. Set the global version, so that when you open a new terminal, it will use this version of Ruby.\r\n\r\n```sh\r\nrbenv global 3.3.5\r\n```\r\n\r\n8. Close your terminal and open a new session. Check your current version of Ruby:\r\n\r\n```sh\r\nruby -v\r\n```\r\n\r\nYou should see something like this:\r\n\r\n```sh\r\nruby 3.3.5 (2024-09-03 revision ef084cc8f4) [x86_64-linux]\r\n```\r\n\r\n### Rails\r\n\r\nNow that Ruby is installed, you can install Rails. Ruby has its built-in package manager, called RubyGems. This is what you'll use to install Rails.\r\n\r\nEnter the following to install Rails v7.2.1.2:\r\n_The `--no-document` flag speeds up the installation by skipping the gem documentation files._\r\n\r\n```sh\r\ngem install rails -v 7.2.1.2 --no-document\r\n```\r\n\r\n1. Next you'll need to install a shim to associate the `rails` command with `rbenv`:\r\n\r\n```sh\r\nrbenv rehash\r\n```\r\n\r\nThis command should run automatically after gems are installed\r\n\r\n2. Close your terminal and open a new session. Verify Rails was successfully installed:\r\n\r\n```sh\r\nrails -v\r\n```\r\n\r\nYou should see this in your terminal:\r\n\r\n```sh\r\nRails 7.0.4\r\n```\r\n\r\n### Ruby VS Code Extensions\r\n\r\n- [Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby) - Official VS Code Ruby extension.\r\n- [VSCode Ruby](https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby) - Syntax highlighting, snippet, and language configuration support for Ruby.\r\n- [Ruby Test Explorer](https://marketplace.visualstudio.com/items?itemName=connorshea.vscode-ruby-test-adapter) - Run your Ruby tests in the Sidebar of Visual Studio Code.\r\n- [Rails](https://marketplace.visualstudio.com/items?itemName=bung87.rails) - Ruby on Rails support for Visual Studio Code.\r\n- [Ruby Solargraph](https://marketplace.visualstudio.com/items?itemName=castwide.solargraph) - A Ruby gem that provides IntelliSense features through Microsoft's language server protocol.\r\n- [Ruby LSP](https://marketplace.visualstudio.com/items?itemName=Shopify.ruby-lsp) - Companion VS Code extension for the Ruby LSP gem.\r\n\r\n\r\n## Docker\r\n\r\nThis section covers setting docker desktop for Windows. In the end, you will have a docker-daemon, docker-cli, docker-compose, and more.\r\n\r\nDocker provides the ability to package and run an application in a loosely isolated environment called a container.\r\n- [Docker Documentation](https://docs.docker.com/get-started/overview/)\r\n\r\n### Docker Installation\r\n\r\n- Docker uses virtualization to run containers so there are two options to run Docker either via WSL (recommended) or Hyper-V. If you have wsl enabled docker currently by default runs on wsl.\r\n\r\n- What should you use? [Difference Between Hyper-V and Wsl](https://superuser.com/questions/1561465/docker-on-hyper-v-vs-wsl-2)\r\n\r\n- If you don't have wsl2 you need to enable Hyper-V [Guide](https://techcommunity.microsoft.com/t5/educator-developer-blog/step-by-step-enabling-hyper-v-for-use-on-windows-11/ba-p/3745905)\r\n\r\nAgain there are two ways you can install docker-desktop on your Windows machine:\r\n\r\n#### Option 1\r\n\r\nUsing [Chocolatey](https://community.chocolatey.org/) CLI package manager which we installed earlier.\r\n\r\nFor installation we will need a shell with administrative privileges, we covered how to run Powershell as an administrator while installing Chocolatey.\r\nUsing any of the options open up a PowerShell.\r\n\r\n```sh\r\nchoco install docker-desktop\r\n```\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerICmd.png\" alt=\"docker installation via choco\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Option 2\r\n\r\nDirect install via executable available on [docker.com](https://www.docker.com/products/docker-desktop/)\r\n\r\nStep 1 - Download the executable for docker-desktop.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerDownload.png\" alt=\"docker.com docker desktop download page\" /\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerInstallExe.png\" alt=\"docker desktop installation screenshot\" /\u003e\r\n\u003c/p\u003e\r\n\r\nStep 2 - Install the executable, and choose the appropriate virtualization environment while installing if the option shows up.\r\n\r\nStep 3 - Done with installation. Sign in with the docker account or skip for the time being.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerDesktopGui.png\" alt=\"docker desktop gui screenshot\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Test Docker CLI\r\n\r\nMake sure you at least launch docker-desktop once, and let it run in the background.\r\n\r\n```sh\r\ndocker -v\r\n```\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerCliTest.png\" alt=\"docker version command\" /\u003e\r\n\u003c/p\u003e\r\n\r\n```sh\r\ndocker\r\n```\r\n\r\n```sh\r\ndocker info\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerCliTest2.png\" alt=\"docker info in cli\" /\u003e\r\n\u003c/p\u003e\r\n\r\nYou have successfully installed docker-desktop and all other necessary tools docker-cli, docker-compose, and more.\r\n\r\n### Docker Basics\r\n\r\n#### Docker CLI\r\n\r\nLet's test some of the docker functionalities using the CLI.\r\n\r\nList all the running containers:\r\n\r\n```sh\r\ndocker ps\r\n```\r\n\r\nList all the available images locally:\r\n\r\n```sh\r\ndocker images ls -a\r\n```\r\n\r\nRun a container:\r\n- p tag for specifying the port\r\n- d tag for detaching the shell\r\n\r\n```sh\r\ndocker run -p 8080:80 httpd\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerRunHttpd.png\" alt=\"docker cli run command\"\u003e\r\n\u003c/p\u003e\r\n\r\nThe above command will fetch a public image of httpd which is an Apache HTTP server. It then runs it as a Docker container exposing port 80, and making it available to port 8080 of our local machine. You can visit [localhost](http://localhost:8080) and view the content served by this container.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/apachLocalhost.png\" alt=\"content served on localhost port 8080\" /\u003e\r\n\u003c/p\u003e\r\n\r\nNow if you run the `ps` command again it will list out this container.\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerContainerList.png\" alt=\"docker cli list command\" /\u003e\r\n\u003c/p\u003e\r\n\r\nStop the running docker container:\r\n\r\n```sh\r\ndocker stop [container-id]\r\n```\r\n\r\n\u003cp align=\"center\"\u003e\r\n\u003cimg src=\"./images/dockerContainerStop.png\" alt=\"docker cli stop command\" /\u003e\r\n\u003c/p\u003e\r\n\r\n#### Additional Docker Resources\r\n\r\n- Explore [docker-hub](https://hub.docker.com/search?q=) library of all the public docker images.\r\n- [What is a Container?](https://docs.docker.com/get-started/#what-is-a-container)\r\n- [What is an Image?](https://docs.docker.com/get-started/#what-is-an-image)\r\n- [Dockerfile](https://docs.docker.com/develop/develop-images/dockerfile_best-practices/)\r\n- [Containerizing an application](https://docs.docker.com/get-started/02_our_app/)\r\n- [Docker-compose](https://docs.docker.com/compose/)\r\n- [Multi Container Application](https://docs.docker.com/get-started/07_multi_container/)\r\n- [Image Building](https://docs.docker.com/get-started/09_image_best/)\r\n\r\n\r\n## 📚 References\r\n\r\n- [Set up a WSL development environment](https://docs.microsoft.com/en-us/windows/wsl/setup/environment)\r\n- [Microsoft WSL Install Guide](https://docs.microsoft.com/en-us/windows/wsl/install)\r\n- [WSL2 Install Guide](https://www.sitepoint.com/wsl2/)\r\n- [Install and get started setting up Windows Terminal](https://docs.microsoft.com/en-us/windows/terminal/install)\r\n- [Git a Grip](https://dev.to/stephanlamoureux/series/11364)\r\n- [Git Credential Manager](https://github.com/GitCredentialManager/git-credential-manager)\r\n- [Using Zsh in WSL](http://kevinprogramming.com/using-zsh-in-windows-terminal/)\r\n- [Installing Node on WSL](https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl)\r\n- [What is npm? A Node Package Manager Tutorial for Beginners](https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/)\r\n- [Chocolatey Install Docs](https://chocolatey.org/install)\r\n","funding_links":[],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVets-Who-Code%2Fwindows-dev-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVets-Who-Code%2Fwindows-dev-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVets-Who-Code%2Fwindows-dev-guide/lists"}