Configure a Windows device for Web development

If you have recently acquired or reinstalled a new Laptop/PC with Windows, you may need to configure a Windows device for Web development (or any other type of development). This could include some basic development tools, editors, IDEs (Integrated Development Environment), and prepare your system to work with programming languages, compilers, and build tools. Those are some common steps you can start with:

Text Editor

One of the primary components is a good text editor to deal with code files, configuration files, and scripts.

Visual Studio Code

This is a great multi-purpose editor. You can check this post for more details about the main features of Visual studio code. Download from the official site https://code.visualstudio.com/. The main features include:

  • Edit text files in different languages including the most popular ones:
    • Programming languages like Javascript, C, Java, Python, PHP, Ruby, Go, etc.
    • Markup languages like HTML and XML
    • System scripting languages like Linux Bash and Windows batch or Powershell
    • Development-related files like JSON, ini, yaml,
  • Support for plugins/extensions: syntax checking, formatting, build, deploy and easy-access development tools
  • Integrated Version control system with Git and SVN
  • Integrated debugger for the most popular languages

Other text editors

You may want to install another simple editor for quick editions and general-purpose editing. In general, you can use Notepad as your basic text editor. But if you want additional features, these are the most commonly used:

Sublime Text is a well-known text editor for general-purpose editing. It has a clean, lightweight, and distraction-free interface. You can download it here https://www.sublimetext.com/

Atom is another popular text editor with similar features to Sublime Text. This is the official download page https://atom.io/

Notepad++ is another popular lightweight editor, but it’s only available for Windows at https://notepad-plus-plus.org/

Git Client

Many development projects start with connecting to a Git repository to get the source code. For windows, it also includes Git Bash, which can be useful when you configure a Windows device for web development if you want to deal with basic Linux command-line and scripts on Windows.

  • Download the official Git client and tools from https://git-scm.com/downloads and select the “Windows” download link.
  • Run the .exe installer and follow the steps of the installation wizard.
    • Select the destination, by default C:Program FilesGit
    • Select install components. You may want to keep the default settings.
    • Select a default text editor. If you have previously installed VS Code, or any other editor, select the appropiate option from the list. If you are familiar with Vim you can use the defaut option.
    • You can decide if your main repository branches will be named as ‘master‘ or any other name, like ‘main‘
    • Adjust the PATH environment. You can leave the default option (from git bash and also other command-line tools)
    • Opt in for a different SSH executable. You can use the default option (OpenSSH)
    • Opt in for a different SSL library. You can use the default option (OpenSSL)
    • Configure line endings. The default option to manage Windows-style line endings locally.
    • Select a terminal emulator. Use the default option (MinTTY) to get more linux-like features.
    • Select the default Git pull behavior (when dealing with outdated local branches). The most common is the ‘fast-forward/merge’ default.
    • Select the default Git credential manager for a better credential management when authenticating.
    • Setup extra options: Enable file system caching (activated) and enable symbolic links (disabled)
    • Experimental options: leave the default options unless you want to try something different.
  • Now you can launch Git Bash from the start menu to get a linux-like console with access to git commands like git clone. You can also launch from Windows explorer using the right-click popup menu “Git bash here”
  • You may notice the Git GUI option available too. You can use Git GUI to manage git commands easily using a graphical user interface (GUI) if you are not familiar with the git command-line. You can stage, commit, push files and perform additional operations from here.

Node and npm

Another useful development tool is Node.js and node-related tools like npm (node package manager). Even if you are not planning to develop Node.js applications when you configure a Windows device for web development, npm and useful node modules like http-server are very useful and widely used for most web development projects, including development tools like webpack and popular frameworks like Vue.js and React.

  • Download current Node.js windows installer from the official site https://nodejs.org/en/download/
  • Follow the installation wizard to complete the install process.
    • Normally, the default options are fine in general.
    • If you want or plan to use native modules, they need additional tools like node-gyp. Checking the option to install additional tools to locally build and compile native modules if they are not available for download. Those tools include Python and Visual Studio build tools, and Chocolatey (a package manager). Those tools will be installed once the main Node.js installation has finished.
  • After installing you can use the Git bash or the command prompot (CMD) to access new commands like node and npm.

Http Server

If you want to test local sites, you can install the default node http-server command-line tool, for testing local sites (-g option is to make it globally accessible): npm install -g http-server

Then you can use it in any folder with HTML content, running http-server [web-folder-path] for any local path on your system. For example:

> http-server c:UsersuserDesktoptest

Starting up http-server, serving c:UsersuserDesktoptest
Available on:
http://127.0.0.1:8081
Hit CTRL-C to stop the server

Another option is to get a simple HTTP server from the Windows store.

Other solutions may involve installing a full-featured HTTP server like Apache, or install a complete WAMP web development platform (Windows/Apache/Mysql/PHP) like https://www.wampserver.com/ if you want to develop web applications using those languages and services.

Configure Git user name and email

To start using Git to commit and push changes to remote repositories, you will need a Git username and email. You can set them up using the Git bash command line or another one, calling git config using your email and name:

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

Configure Git SSH Access

Since most Git repository services like GitHub or Bitbucket have enabled secure access to repositories through SSH (when using the git@hostname protocol instead of https), you will need to create an SSH key from your computer.

  • Open Git Bash or another command line tool to run the command ssh-keygen (part of the OpenSSL tools installed with Git)
    1. Use the detault path for the id_rsa file (at USERHOME/.ssh/id_rsa)
    2. You may want to use a passphrase (this passphrase will be asked every time you use the key) or just leave it blank setup access without password.
    3. Two files will be created at USERHOME/.ssh : id_rsa (private key) and id_rsa.pub (public key)
  • Register your SSH key on the remote Git server
    • The contents of this file is something is: ssh-rsa PRIVATE_KEY_STRING machine@name
    • For GitHub, copy the contents of your id_rsa.pub file to the clipboard and the paste it at https://github.com/settings/keys (SSH and GPG keys) in a new entry
    • For BitBuket, copy the contents of this file into a new entry at https://bitbucket.org/account/settings/ssh-keys/
    • Other services have a similar configuration section to add public keys

Additional Configuration

Depending on the tools you may want to use,