Web developers, Visual Studio could be a great free tool to develop with… - Eternal Coding - HTML5 / JavaScript / 3D development - Site Home - MSDN Blogs

Web developers, Visual Studio could be a great free tool to develop with…


 

Web developers, Visual Studio could be a great free tool to develop with…

  • Comments 15

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:

http://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-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:

image

image

Once installation is done, you can launch Visual Studio 2013 Express and you are ready to go.

image

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.

image

image

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.

image

image

Obviously, Visual Studio recognizes and provides color highlights and IntelliSense for HTML/CSS/JS files.

image

And you can obviously do the same for JavaScript file:

image

And to reference this new file from your page you just have to drag and drop it from the solution explorer. And as I mentioned before, you can have all the wonders of IntelliSense directly in your JavaScript file:

image

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 (image) and Visual Studio will launch the browser you selected (Can be one of those already installed on your computer):

image

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:

image

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:

image

You can then easily clone, branch, commit or push your code on your favorite repository without leaving your IDE.

TypeScript

As you may know, I’m a big fan of TypeScript (If not, you could read my article about why we decided to move babylon.js from JavaScript to TypeScript).

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:

image

Obviously IntelliSense for TypeScript is supported and even more, like these handy dropdown lists that help you select a specific function:

image

Debugging also works pretty well thanks to code map files generated for you by TypeScript.

Call to action

As you saw, you can in a minute be productive with Visual Studio and start working on your front end code. The great thing is that what I covered here is just a tiny little part of all Visual Studio can do. I personally use it (by choiceSmile) for all the development I’m doing (from text editing to C#/Python/JavaScript/TypeScript code writing).

Here is the list of supported files:

image

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?

Leave a Comment
  • Please add 4 and 4 and type the answer here:
  • Post
  • I am a passionate F# developer. Nevertheless, I have to say that:

    (1) I think that the inability to install plug-ins severely (f.ex. proper unit testing frameworks) hampers what developers can do with VS Express. This blog post is pointless.

    (2) The price point of VS Pro discourages many hackers and hobby developers which, starting from scretch, have planned to build something on .net that could become one day a startup

    (3) It is ridicolous fact that it is necessary to upgrade the IDE to make use of new releases of language toolings (for example VS F# 3.1.1 requires VS 2013). This is an insult to those who purchased VS 2012 with their hard earned money. We are not talking about VS 1985 but VS 2002.

    (4) not everybody is in the condition to be eligible for BizSpark memberships. (1) and (2) discourage startuppers to use .net long before they may even consider applying for a BizSpark membership.

    All that results in a net loss for MS. Sure, the company can cash some bucks from VS licenses but that is at the dire expense of the whole ecosystem who gets impoverished by the loss of passionate developers who could contribute and enrich .net.

  • The topic is about JavaScript developer. I agree that obviously, things are missing from the Pro version but as I said for a Javascript standpoint this is as far as I'm concern the best free IDE

  • Clap Clap :) Excellent article !!

  • currently i use VS 2013 express (with update 3 rc) and i am loving it (^_^) #coding

  • If you add native support for PHP I'll switch :)

  • With this, you can start switching :)

    visualstudiogallery.msdn.microsoft.com/6eb51f05-ef01-4513-ac83-4c5f50c95fb5

  • I am having a heck of a time finding the EULA for VS Web Express Edition. What I want to know is this:

    Can I use Web Express (or any of the Express tools) commercially or not?

    I have a project where it would come in handy, and cash is tight, so free is the right price!

    Please let me know if I can use Web Express for free, or if not, for what cost?

    Thank you in advance!

  • Hello, you can create commercial product with VS express :)

    VS Express EULA makes no restrictions to commercial use of either it, or any software created using it.

  • @David I used it for the 30 days trial, it's good but not worth 79/50$ per year... there are many free tools that do the same things

  • VS Express is free :) No trial, just free

  • I have VS 2013 pro, but that PHP extension must be bought separately, the free version is very limited

  • Oh ok:) I thought you were taking about vs express:)

    Do you have links to free PHP extensions for vs?

  • Yep vs is great, if you have a good size c: partition... are we able to select installation directory properly and without ugly hacks yet?

  • Yes you can:)

  • Great article, gratz :)

Page 1 of 1 (15 items)