ShoelaceMVC, My Newest Open Source Project – ASP.NET MVC 3 Starter Project for Building Fast AND Production Quality Webapps.

Shoelace-MVC

I recently came to the conclusion that I needed a MUCH better starter project for building ASP.NET MVC applications.  You see, I’m not a designer.  I just don’t have those skills.  I can make things look good in my head, but I can’t translate that to Photoshop and then to CSS attributes.  Then one day I stumbled upon Twitter’s Bootstrap project, which is a free, open source CSS/JS framework/library that has literally everything you need to build a quality, production ready application (from a design perspective).  It’s by far the most exciting project for me in a long time, as it fills the huge void and weakness that I have in building good-looking stylesheets from scratch.  Then, this past week I found CodeFirstMembership – an open source membership provider, similar to the ASP.NET .mdf file in the default starter projects, but that is written using EntityFramework Code First.  This…this was huge.  So I decided to begin to curate all these technologies in to an ASP.NET MVC starter project to end all starter projects (ya know, if you plan to go live very soon after you start and expect folks to not throw up when they see your site).

I now had exactly what I needed for building apps really, really quickly and I wanted to make a starter project that had everything out of the box to get something not just functional, but GREAT out the door fast.  Bootstrap gives me big, beautiful buttons, text areas, navigation, sidebars, and (most importantly) amazing cross browser compatibility – with extremely clean CSS classes.  It’s so easy and makes your applications LOOK production-ready.  Let’s face it, I don’t care how solid your code is on the back-end, if it looks basic and lame and is broken in the browser your user views it with (I don’t care WHAT browser), you look bad.  Really.  It’s inevitable.  So I added Bootstrap and styled everything so it looks great.

Second, I added in CodeFirst Membership Provider.  I’m in the Bizspark program, and with that I get free Azure time.  Awesome!  I built my application for my startup, went to deploy to Azure and then realized that I only had ONE database I could use for free.  Oh noes (I’m a cheapskate frugal)!   I immediately tried to find a way around this.  I had my ASP.NET membership database and my application database separate (it’s kind of a hassle editing the .mdf…too slow for multiple, rapid deployments for me).  So then I read where you can generate the membership database anywhere I want, where it didn’t have to be in the .mdf that was provided.  I immediately thought to generate it alongside the other tables in my application DB. When I tried generating it, as I was developing the application and using the regular entity framework to generate my application tables in the same database, the provider and DB would become out of sync and start throwing errors occasionally.  It was extremely frustrating.  It didn’t happen all the time, but enough to make me lose time.  I knew it would WORK, but the hassle of dealing with it wasn’t worth it to save me from having to purchase an extra database instance to keep them separate.  This is where CodeFirst Membership came it.  It’s an implementation of a membership provider (same security and everything), but uses a DbContext and CodeFirst!  What does this mean?  This means I can use EntityFramework CodeFirst for my application code, and just use the same DbContext for the provider and my application!

CodeFirst Membership gives me a few things:

  • Everything can (of course, it still doesn’t have to be – it’s up to you) be in a single database, which simplifies deployment and development, particularly at the database level.  Remember, if you don’t like them in the same DB  you can always break them apart later, but my focus with this project is to build your application FAST and get you USERS so that you have enough traffic to WARRANT fancy architectures that take much more time to maintain.
  • CodeFirst makes it fast and easy to test in real life, too!  You always want to make sure that you have sufficient unit tests so that you can sleep at night after you do a new release.  However, a lot of times you can’t beat making a change, hitting F5, and watching your application in action.  It’s still a great way to catch both logic and visual bugs.  CodeFirst’s create/delete database and seed options let you hit play and have a fresh database with new demo data that you can count on every time.  It makes debugging simple, effective, and FAST.
  • CodeFirst lets you add DataAnnotations directly to your Entities without creating partial classes.  Now, some would argue that you should use the MVVM pattern and keep entities and viewmodels separate, and I can understand that.  The purpose of this project is, yep, you guessed it, to build applications FAST.  There are times when viewmodels are necessary, and sometimes your model and viewmodel are so far off that you have to do that, however CodeFirst really does let us use the model classes without much pushback from “purists”.  Remember, in CodeFirst the model classes are just POCO objects!  They’re just classes and that’s it.  There’s literally no code that you have to write that’s specific to the EntityFramework (that’s all done through unicorn magic via the DbContext).  So you’re free to add as many DataAnnotations as you want!  Go ahead!
  • EntityFramework.Migrations -  If you’ve never heard of this, you need to check it out, fast.  It’s essentially the db:migrate functionality from Ruby on Rails, but for EntityFramework and SQL Server.   I can’t explain it all here, but it generates the SQL update script for you from one database (most recent production, for example) to another (whatever you have in your project right now).  It also takes into account data loss, so you won’t lose any data on an update.  You can also specify exactly what it should do in situations, but out of the box it pretty well does exactly what you want – upgrade the current production database to incorporate your changes/additions without losing data.
So there you have it.  That’s why I started and what’s in ShoelaceMVC on Github.  If you’re looking for a head start to your next MVC project, you should try starting with ShoelaceMVC and contribute where you see improvements.  I’d like to incorporate other projects as I find them that are very condusive to FAST deployment.

UPDATE 10/20/11:

These are some things I just added:

  • MVCScaffolding templates for Twitter’s Bootstrap - I included the NuGet package MVCScaffolding.  This lets you customize the templates that are used to generate the CRUD screens when you generate all the views for a controller.  I modified the templates so that the views created will comply with Twitter’s Bootstrap framework and look great right out of the box.  Some issues still may exist around dropdowns and checkboxes, which will be fixed in future releases.  You can still manually add the classes once they’re generated, though.

Download via Visual Studio Gallery

Contribute or Follow ShoelaceMVC on Github

Ryan Hayes

Ryan is a Microsoft MVP award winner with over eight years of software experience, working with big-name clients such as Discovery Channel, AOL, Toyota, and the National Academy of Sciences. Ryan has helped teams deliver award-winning applications that drive business processes, site traffic, and profit, putting his experience and creativity to work to build amazing solutions for the enterprise web, desktop and mobile platforms.

  • Porcesco

    Thank you a lot for this post! I did not know the twitter bootstrap, it will be extremely useful (i’m a poor designer too).

    How about create a nuget package to make us life easier?

    • http://ryanhayes.net Ryan Hayes

      That’s next on my list!  I’m hoping to get it out in the next week or so.

      Glad you like it.  I was so excited when I saw Bootstrap for the first time, too.

      • http://www.register-domainname.in Buy domain name

        I need to know more about bookstrap. Can you explain more about twitter bookstrap in your next blog?

  • http://nikosbaxevanis.com/bonus-bits/ Nikos Baxevanis

    Looks nice! :)

  • http://nikosbaxevanis.com/bonus-bits/ Nikos Baxevanis

    Looks nice! :)

    • http://ryanhayes.net Ryan Hayes

      Thanks, man!

  • Johan

    mmm Smörgåsbord I like that. This could be very useful.

    • http://ryanhayes.net Ryan Hayes

      Thanks!  I hope it helps.  Let me know how it works for you and if you see anything that needs to be added.

  • Anonymous

    Amazing! very nicely written and well thought of features…. 5 stars

    • http://ryanhayes.net Ryan Hayes

      Thanks, man!

  • http://ryanhayes.net Ryan Hayes

    Oh, also, I recently added MVCScaffolding Nuget package into the mix.  It lets you create your own scaffolding T4 templates, so now you can generate Bootstrap compliant views automatically.  Would love feedback on how that’s working for everyone using different datatypes.

  • Terrence

    Ryan, I am glad someone else besides Andy and I appreciate SimpleMembership.  Also glad you pointed out BootStrap, I will look into it.

  • Jon

    Hi Ryan,   Thanks for creating this project.  I am an asp.net noob learning vs2010/mvc3/ef/c# all at once so this is a *big* help in a lot of areas.  One suggestion though, regarding a possible addition around a “forgot password?” reset feature:

    I have not found any .net membership-related tutorials or project/templates that include a password reset feature that lets an anonymous user request a password reset (uniquely salted date stamped hopefully short hash) link to be sent to them by email.  They would click the link in the email message, go to a password reset page that does not require them to be authenticated, or to remember the lost password, they reset the password on that page, and the emailed link is then expired.  This seems to be pretty standard (think facebook) functionality but it’s not in any asp.net membership app projects that I have seen in my travels.

    Once I work my way out of this paper bag I’ll try and create this feature, but would be eternally grateful if you added it to ShoelaceMVC!

    Many thanks, Jon

    • http://ryanhayes.net Ryan Hayes

      Thanks, Jon, that’s a great idea!  I logged it as an issue on Github so that I won’t forget.  It’s not assigned to anyone yet, so if you want to pick it up you can or I’ll do it as soon as I get the whole automatic nuget package install thing working with VS project templates working.  It’s giving me problems right now, sadly.

      Glad you like ShoelaceMVC!

  • http://www.softwaredevelopmentcompany.com.au Ned

    Awesome,
    I am new in mvc3 , your project helped me a lot !
    Regards
    Ned

    • http://ryanhayes.net Ryan Hayes

      Glad it helps you out!  Thank you for taking a chance on my project and using it!

  • Henrique

    I’m using this and loving it!
    Only complain is that the topbar layout gets a little broken when using Chrome. Tried to solve it myself but no luck.

    Can you please look into it?

    • http://ryanhayes.net Ryan Hayes

      Sure thing man, thanks for letting me know.  I’ve added it to the Github issue tracker.  Glad you love it!

  • http://blog.ryanwheeler.co.uk Ryan

    I like the idea – bootstrap along with a user/membership/roles framework that doesn’t suck @ss:disqus 
     really goes well together, but not sure about CodeFirstMembership, the code sure looks to have some rough edges.Now the real mystery to me is why nobody (especially MS) seems to have managed to produce a user management system for MVC that isn’t a swamp of over complex, un-extendable garbage.

    Ohhhhh better watch what I am saying less anyone challenges me to put my code where my mouth is :o

  • Pingback: Entity framework membership and role provider for MVC 3 and bootstrap « Technical 2 Cents()

  • Jeremy

    I get this message when I attempt to debug, any thoughts on this?
    Parser Error Message: Could not load type ‘ShoelaceMVC.Membership.CodeFirstRoleProvider’.
    Line 51:

    • Jeremy

      rookie mistake, obviously wrong namespace. Sorry for wasting anyone’s time :)

      • Jeremy

        This is great, really enjoying it. Thanks Ryan!

        • http://ryanhayes.net Ryan Hayes

          Awesome!  I’m glad you like it!  If you have any suggestions places that I could make it easier, let me know: https://github.com/RyannosaurusRex/Shoelace-MVC/issues

  • http://www.mactonweb.com web design melbourne

     Nice..Very nicely written and well thought of features…. .

  • Djh

    Cool and all, I can get it to run, but don’t know how to set up the database portion. I am running locally with an instance of sql server, but always getting errors. I am new to MVC3 and ASP.NET, I’d like to see a short “getting started” lesson with this.

    Thanks for the hard work!

    • http://ryanhayes.net Ryan Hayes

      Are you using the Visual Studio extension or what’s on Github? I’ve added a few things to make the database more easier to change and navigate recently, but haven’t updated the extension and project template yet. I’ll update the extension on the VS Gallery and post a video soon. Thanks for bearing with it and the feedback.

    • http://ryanhayes.net Ryan Hayes

      Hey, Djh, I’ve got a video tutorial up on my YouTube channel here: http://youtu.be/HjHntqsiYjY

      I’ll be adding more, so if you’ve got a YouTube account you can subscribe to get the latest tutorial videos.

  • Tihomir Juric

    Great MVC helper/starter. :)

    Any suggestions on how to get changes in scaffoding templates show up in the generated files?
    For example In VS 2010, in _CreateOrEdit.cs.t4 , I change 
      to however this change is never scaffolded to generated view files. (I use VS 2010 ‘Add new View functionality)Thanks,TJhowever this change is never scaffolded to generated view files. (I use VS 2010 ‘Add new View functionality)Thanks,TJ

  • Robert Walker

    thanks a lot. Very helpful post. I heard many co-workers are using this asp.net open source App site as a starter for MVC3 and others. See if you find it interesting. In fact, it may be a good idea if your app can become an App in 1ManDay.com. For me,  1ManDay.com is awesome.
    I wish I knew about them a long time ago when I was a school. Thought I’d
    share.