I spend a lot of time in web developers conference (And honestly I like it a lot). The last one was JSConf US where I met with so many great developers. Being there, I showed to some of them how it can be easy to develop a web site with Visual Studio 2013. Most of them told me they were not aware of all you can do with the free version of Visual Studio: the Express edition.
Let’s me guide you through the installation process to see all the great things you will be able to do then with your brand new Visual Studio Express…
But if you prefer a video, here is one for you:
If you want to discuss about this article, feel free to use the comments
or reach me on Twitter: @deltakosh
Installing Visual Studio 2013 Express Edition
First of all you have to go to Visual Studio 2013 Express web site: http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
They are different versions of Visual Studio express depending on what you want to do. For a web developer, let’s choose Express 2013 for the Web:
Here are the supported operating systems:
- Windows 7 SP1 (x86 and x64)
- Windows 8 (x86 and x64)
- Windows 8.1 (x86 and x64)
- Windows Server 2008 R2 SP1 (x64)
- Windows Server 2012 (x64)
- Windows Server 2012 R2 (x64)
You will need a bit more than 1.17Gb but this worth it:
Once installation is done, you can launch Visual Studio 2013 Express and you are ready to go.
Creating a web site frontend from scratch
When you want to create a site, one of the thing you have to do is setup a web server to publish your files to. Then you can start coding.
With Visual Studio 2013 Express, this task is extremely easy. You just have to create a folder somewhere and select the File/Open Web Site menu.
Automatically, Visual Studio will create for you a web server pointing to this location. Note that you can also point to a local Internet Information Server or to a FTP site. You don’t need to install a separate Web server or Tomcat or node or anything.
Let’s imagine I just want to add a simple HTML file in it. To do so, I have to right-click on my site into the Solution explorer and select Add / New Item / Html Page.
Obviously, Visual Studio recognizes and provides color highlights and IntelliSense for HTML/CSS/JS files.
With Visual Studio, you do not need to setup a web server because everything is already handle for you. Just hit the green play button () and Visual Studio will launch the browser you selected (Can be one of those already installed on your computer):
As you can see, Visual Studio created a local web server on Localhost using a free port (2013 here). Pretty handy, right?
Breakpoints are also extremely simple to use. Just click in the margin or use F9 to drop one and launch the page using the green play button:
Once in debugger, you have access to watches, call stack, console, etc.
Source control integration
Visual Studio can interact with Team Foundation Server but it can also work seamlessly with Git:
You can then easily clone, branch, commit or push your code on your favorite repository without leaving your IDE.
The good news is that if you install Visual Studio 2013 Update 2, then TypeScript support is added to Visual Studio for free.
You can now add a TypeScript file in your project:
Obviously IntelliSense for TypeScript is supported and even more, like these handy dropdown lists that help you select a specific function:
Debugging also works pretty well thanks to code map files generated for you by TypeScript.
Call to action
Here is the list of supported files:
The last thing I would like to say is: Give Visual Studio Express a chance and try it, you won’t be disappointed. And by the way, did I mention this is all free?