Setup a Windows Development Environment with Webstorm for AngularJs

Although I used Linux environments at university, I've been working in Windows environments ever since I left. I've tried working on Mac, but I find it so hard to create an environment to work in that I'm put off before I finish. I continually find myself returning to Windows, because it allows me to do the 'risky' stuff that I have the knowledge to do without patronising me (quite as much as Mac). Still, there are things to learn when setting up an environment for web development.

My favourite IDE is WebStorm by JetBrains. It makes development so easy, and allows for plenty of customisation. Installation of this is straightforward. As is installation of Node.js, though you should reboot your system after installation and then check the version. To do this open a command prompt (Windows key + R, type cmd, Enter) and run the command node --version. At time of writing v0.10.32 was installed by the downloaded installer.

Github

I can't recommend using source control strongly enough. Mistakes happen. They will happen to you, either by you or by your system. I use Team Foundation Server at work, which is a very large, expensive, Microsoft product. It's amazing for making corporate level software, but it isn't for small businesses or practicing and playing around at home. I used to use Git, but I was very uncomfortable having my source control on the same drive as my development environment. I really didn't want to be carrying around an external drive to overcome this problem so now I use Github. Get yourself a free account if you don't mind your code being open to everyone, otherwise the cheapest paid account is $7/month.

To use Github you're going to need to install Git so that WebStorm can connect to Github's servers. This installation is also basic, but you need to ensure that you select Use Git and optional Unix tools from the Windows Command Prompt when asked about Adjusting your PATH environment. I've had no success adding Git to my PATH variable manually, but never had problems when getting the installer to do it.

After all these installs it's worth doing a reboot to ensure that all your settings have bedded in properly. Once you've done that go back to the command line to install Grunt. Grunt is a fantastic tool that allows you to do all the fiddly bits in an instant. WebStorm has native support for Grunt, which makes it even easier. We'll come back to that later.

Environment Variables

It's worth checking your Environment Variables at this point to see if you have a PATH variable and that it at least contains Git and Node. Open up a new Windows Explorer window (Windows key + E), right-click on either My Computer or This PC (depending on the version of Windows that you're running), click Properties. A new window will open titled System. In the left side bar at the bottom click on Advanced system settings. Another window opens, click on the button labelled Environment Variables... at the bottom to open yet another window. The top half lists the Environment Variables that we are interested in. You should have one named PATH, select it and click Edit... as it makes it easier to read through. In the Variable Value field you'll have a semi-colon separated list of locations of executable files. Check that you have one that points to the location of git.exe, and another that points to the location of npm.

Proxy Configuration for Node

If you're behind a proxy you'll need to do some extra configuration before continuing. I can only help you to a certain extent here, you'll need to speak to your IT department to find out the proxy addresses that you require and whether or not they require your username and password within them. Once you've got this information run the following commands from the command line:

npm set config proxy <yourProxy>
npm set config https-proxy <yourProxy>

Install Grunt

To install Grunt run this command on the command line:

npm install -g grunt-cli

At this point Node goes off to the package repository, finds Grunt, and installs it in a globally accessible place (that's what the -g flag does). If you want to have a look at the modules that you've got installed globally then navigate over to C:\Users\<user>\AppData\Roaming\npm\node_modules\ where you'll find a directory for each of the packages you have. When installing for a project navigate to the project's root directory on the command line and don't use the -g flag, like so:

npm install <package>

Configure WebStorm to use Github

Now that you have the basic tools installed you need to setup WebStorm to work with them. First of all create a directory to store your project directories in. WebStorm would like it to be in C:\Users\<user>\WebstormProjects by default. When you run WebStorm you'll be presented with a splash screen with several options. In order to setup Github go to Configure --> Settings. In the menu on the left under the heading Template Project Settings find the item Version Control and toggle it to see the sub-menu and select Github. On the main panel you will now see fields to input your username and password into. Leave all the other fields as they are. If you don't have a Github account there's a link here to sign up. On the first time of using WebStorm to store passwords you'll be asked to input a master password.

OK out of the screen to return to the original splash screen, click Check out from Version Control and select Github from the drop down list. A new dialogue opens with a drop down list of all your current repositories, the location of your projects directory, and the name of the project directory.

Setting up IIS

In order to successfully serve your websites you need to setup IIS, the Windows web server. IIS probably isn't an installed component by default. To check whether or not you have it installed type IIS into the Start menu search, if it appears in the list you can skip this paragraph on installation. Otherwise open up the Control Panel and search for Turn Windows features on or off, and click on the link to it when it appears. When the Windows Features dialogue opens find Internet Information Services in the list and check the box next to it. The box will fill with a square rather than a check to indicate that not all sub-items have been selected, and this is fine. You may find a need to use more of them in the future, but for front end development you're unlikely to need any more. After you click OK and the required files have been installed your machine will require a reboot.

Once you're going again run IIS. In the left hand pane toggle the machine name to show the next level of menu items, then right click Sites and select Add Website... from the context menu.

The next dialogue box tells IIS everything it needs to know in order to serve your site.

Site name: Display name within IIS, which will also duplicate to your Application Pool name, though you should change this to the DefaultAppPool by clicking Select... and then clicking OK on the next dialogue
Physical path: The root folder of your project
Binding information: The url that you're going to use in the browser to navigate to your project

Make sure you leave Start Website immediately checked, and click OK. Your site is now ready to be served, but you won't be able to navigate to it yet.

Editing your hosts file

Now you need to edit your hosts file, which you'll find at C:\Windows\System32\drivers\etc\hosts and needs to be edited with an application that has administration rights. I've setup notepad to always run as administrator. To do this find notepad.exe, right click it, click Properties, in the Shortcut tab click Advanced... and in the next dialogue check Run as administrator. Open up the hosts file (ensuring that your application of choice is running as an administrator) and add the following line at the bottom:

127.0.0.1    somesite.com

Where somesite.com is the same value as you entered into the Binding information field in IIS. 127.0.0.1 is the address for the machine that the hosts file is on, also known as loopback. You can point as many sites to this as you like, but they must each have an individual host name. Save with Ctrl+S, if you see the Save as... dialogue box it means that your application didn't start as administrator, but hopefully you won't see that.

IIS User permissions

There's one last thing to do before you can see your site. When IIS tries to access your site it will need to user accounts to have permissions in order to do so. I recommend putting these permissions on the directory that is root for WebStorm. Right click your WebStorm directory, go to Properties..., select the Security tab, and under Group or user names: click the Edit... button. Click the Add... button in the Permissions dialogue and then click the Advanced... in the  Select Users or Groups dialogue. In this dialogue don't bother with search, click the Find Now button to list all your users. In the list that appears at the bottom find the following users:

Authenticated Users
IIS_IUSRS

Select both of these (Ctrl+click) and click OK. You'll end up with similar to this, but your machine name will be different:

Click OK to return to the Permissions for <Directory> dialogue. Make sure that both of these users have been given the following permissions:

Read & execute
List folder contents
Read

Then just OK your way back to your Windows Explorer window. You may find this takes some time as the permissions are pushed down to all sub-directories and files. In the future these permissions should be inherited by new directories and files at the point of creation. Now you're ready to open a browser and navigate to somesite.com.