Monday, March 21, 2011

HTML5 Boilerplate MVC 3 Site with AppHarbor in 3 Easy Steps

Here's a quick way to get a new .Net MVC 3 site up quickly that incorporates HTML5 Boilerplate patterns and practices.

Step 0: Get Git (If you don't have it)

Git for Windows is available from the msysgit repository on Google Code; this guide was written for the 1.7.4 preview version.

There's even a guide for installing on windows if you need some help.

Step 1:  Create Your AppHarbor Project

Go the the AppHarbor home page and create a new account if you haven't done so yet.  Then click the Create New link on the Applications tab to get started.


Once you've got your application created, copy the Repository URL so you can push your source up to your new site.


Step 2:  Create Your MotherEffin HTML5 MVC 3 Site Project

I've created a super easy HTML5 Boilerplate MVC 3 template project that can deploy to AppHarbor with no modifications.  You can get it from the Visual Studio Extension gallery, or through the new project dialog by clicking the Online tab item on the left and searching for "HTML5".


Make a note of your project location so we can use the Git Bash shell to push our source.

Step 3: Push it to AppHarbor with Git

Once you've got your project all set up and ready to deploy, navigate to your project's location, right click on the root directory and select "Git Bash Here".
Enter the following commands to initialize your new Git Repository

  1. git init
  2. git add .
  3. git commit -m "initial check in"

Once you have your files committed locally, you are ready to push up to the AppHarbor Git Repository Url.

Here are examples of the commands to do that:

  1. git remote add appharbor [YourSiteRepositoryUrl]
  2. git push appharbor master



Enjoy Your Site

Congratulations, you've just deployed your first HTML5 website.

Now all you have to do is navigate to your app's url; i.e  

Next step, add a database and add the code first entity framework NuGet package for fast database scaffolding.  Hopefully I'll get a tutorial up for that soon.

No comments:

Post a Comment