How can I use Visual Studio to create pure client-side web apps using HTML5, CSS3, and JavaScript?


The rising popularity of so-called “modern” web apps means that web developers are focusing on writing more and more front-end, or client-side code. Although back-end, or server-side, code still plays an important factor, the fact is that web developers are working more directly with HTML5, CSS3, and JavaScript.

I come from more of a C++ background, but lately my colleague David Hsu and I have been looking at web apps. Visual Studio has some great templates that are focused on back-end web development. But I wanted something for front-end web development using only HTML5, CSS3, and JavaScript.

That’s why we created Pure HTML (purehtml.codeplex.com) – a basic Visual Studio project template for front-end web development using only HTML5, CSS3, and JavaScript. In a few clicks, you can have a purely client-oriented web site ready for you to extend. Our goal was to start small and get the basic groundwork going, and then build-out as we get feedback from you, the community. Although you can create a similar project template relatively easily, it enables you to more quickly get in to a new web project and start coding. It also provides a common framework for us to extend together.

I think this is an especially great opportunity for web developers who are less experienced with Visual Studio to see just how well integrated the coding, debugging, testing, and deployment experiences are with Visual Studio. This template works with the Professional, Premium, Ultimate, and Express for Web editions of Visual Studio 2012. But if you don’t have Visual Studio, you can get Visual Studio 2012 Express for Web for free.

We have some improvements in mind that we’ll share in the coming weeks, but I wanted to share this now and get your feedback as well as ideas for future work.

I also want to thank Christopher Bennage from the patterns & practices team for advising us and getting us up to speed with some of what it means to be a “modern” web app.

Happy coding, and we look forward to hearing your feedback!

Comments (14)

  1. Gregg says:

    It'd be nice if you could tell us what exactly the template includes. What frameworks (HTML Boilerplate? Twitter Bootstrap?) and/or libraries (JQuery? BackboneJS? KnockoutJS?) are you embedding, if any?  Even the CodePlex site doesn't give any information about the template beyond the fact that it exists!?!

  2. Thomas Petchel - MSFT says:

    @Gregg – thanks for looking at this and providing feedback. I agree we should have added a bit more context as to what you get, and sorry for not having done so. I updated the CodePlex page to say that the current template has very basic functionality. Basically, index.html contains an anchor who's onclick event displays a message box from JavaScript. The anchor is also styled through a basic style sheet.

    The intent here is to provide some basic functionality for you to start with. We already have plans to improve this template, but we'd also love to hear from you what else you'd like to see. We're considering which frameworks, if any, to reference from the template. Which frameworks do you feel the majority of web developers use most commonly?

  3. Joel says:

    Thomas / David

    just a quick note to say thanks! Nice to have a clean simple project for the non-apps that have come my way.

    Would suggest making jQuery a part of the default

    Cheers,

    Joel

  4. amir says:

    It's a great HTML template for visual studio.

  5. Dion says:

    Just what I was looking for – thanks!

  6. Sumit says:

    could you provide this for VS2013 Web?

  7. pcunite says:

    What are the steps to debug a project like you describe for VS2013 Web Express?

  8. Larry says:

    Is this template available? if so where?

  9. Ted says:

    The link to the template appears to be broken. (purehtml.codeplex.com)

  10. Ravi says:

    I could not find the template in codeplex.com.

    Can you please post it again and provide right link?

    Thanks

  11. John says:

    Link is broken, where can I find the template?

  12. Annoyed says:

    Thanks Microsoft, for another half-assed solution – if you're going to provide a link, then commit to keeping it alive. Else, don't bother.

  13. Loren Pechtel says:

    @Annoyed I wouldn't blame Microsoft for not supporting it–this is just something from one of the developers, not an official thing.

    Instead, blame them for the need of it–this is something that most certainly should have been included.