Partager via

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

  • Article

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

  • Anonymous
    April 11, 2013
    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!?!

  • Anonymous
    April 11, 2013
    The comment has been removed

  • Anonymous
    May 28, 2013
    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

  • Anonymous
    July 24, 2013
    It's a great HTML template for visual studio.

  • Anonymous
    October 10, 2013
    Just what I was looking for - thanks!

  • Anonymous
    October 21, 2013
    could you provide this for VS2013 Web?

  • Anonymous
    June 02, 2014
    What are the steps to debug a project like you describe for VS2013 Web Express?

  • Anonymous
    June 09, 2014
    Is this template available? if so where?

  • Anonymous
    June 12, 2014
    The link to the template appears to be broken. (purehtml.codeplex.com)

  • Anonymous
    August 01, 2014
    I could not find the template in codeplex.com. Can you please post it again and provide right link? Thanks

  • Anonymous
    August 02, 2014
    Link is broken, where can I find the template?

  • Anonymous
    October 26, 2014
    github.com/.../PureHTMLVSTemplate.zip

  • Anonymous
    October 30, 2014
    The comment has been removed

  • Anonymous
    March 01, 2015
    @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.