EmberJs and ASPNET MVC WebAPI Validation

I use ember.js for my front end which talks to an REST ASP.NET Web API backend.  I wanted to leverage the awesome validation built into ASP.NET.  So when I post the following JSON to my /api/users

I should get errors because the email and password are required fields and I do.  The returned JSON response looks like this:

I decided to refactor handling the errors into an ember component.  First of all, my ember controller POST happens using ember data:

Basically, all I do is call save on the ember model, which issues a POST.  If it succeeds, it transitions to the users route, if there is any error, it sets the “errors” property to the response.  All I have to do to use this on my form is add the component like this:

Here is the component template, which basically loops through a string array of errors and display them on the screen:

The component definiton, creates an “observable” property that depends on the errors value (which is set above in my view containing the component):

The code above simply parses the validation errors and adds them to a dictionary of errors.

Output

When I submit an empty form, this is how it looks like:

2014-04-10_14-12-16

 

EmberJs and ASP.NET Web API and JSON Serialization

I just switched from Angular to Ember for a new project and really enjoying it.  Per the requirements, I need to use ASP.NET WEB API which is actually pretty impressive.  I instantly ran into a problem though.  Ember expects its json results to be wrapped i.e. Ember expects:

But the API returns

After trying several solutions and thanks to these posts: link 1link 2 and link 3 I created a custom Json formatter that wraps the response and it works with arrays as well.  Here it is:

 

To use it, simply add this line to your WebApiConfig class:

 

And the model looks like this:

I added this as a gist in github at https://gist.github.com/eibrahim/10286724

StarterWeb MVP – A Modern Web App Starter Template

My co-founder and I have been reading a lot of startup books lately.  If you are mildly interested in startups, you can’t escape the term MVP.  MVP or Minimum Viable Product is a concept popularized by Eric Ries author of  The Lean Startup.

In product development, the Minimum Viable Product or MVP is a strategy used for fast and quantitative market testing of a product or product feature, popularized by Eric Ries for web applications. – source wikipedia

A couple of weeks ago, we had our first offsite to brainstorm some ideas and clarify our vision and goals.  We agreed on a new product and the goal is to get it out by the end of the year.  I have been coding it for the past week or so and it is coming along nicely.   But I can’t help thinking back to the MVP. I don’t want a half-baked product but I also don’t want to spend the next 3 months building something that no one wants…  the solution is an MMVP i.e a Minimum MVP.

What’s the idea/product?  

It is called Starter Web.  It is a kick-ass starter web app to start your next web project, web startup or even to create your own MVP.  This is no HTML template, this is a project that has all the fundamental pieces of every web app built and tested, so you can focus on YOUR idea and not the BS that you always have to do (authentication, payment processing, etc…)

Who are our customers?

  • Web developers that build web apps for clients or for themselves that want to get a running start and don’t want to waste 60+ hours writing the same code.
  • Entrepreneurs that want to build web apps and/or startups quickly and don’t want to waste 60+ hours rewriting boring code
  • Wantrepreneurs that want to create a quick MVP to prove their concepts and are held back by the all the BS stuff they have to code just get to the fun stuff.

Why do you need it?
How many sites have you built a website before?  What are the common features that you keep implementing over and over and over?  What are the parts that you wish were just built so you can focus on your business idea instead of the generic stuff?  I built and continue to build a lot of websites myself and I find myself repeating the same things several times.  Sure, I will copy and paste a few things here and there or refactor some of it into some reusable library, but I still end up doing things over several times.   I want something to get me started quickly on the next project.  I ran into hackerengine.com a few months ago and thought “wow, that is freaking cool.  I wish they had it in .net”.  There is no .net equivalent, so I am building one.

UPDATE: I just realized that hackerengine is shutting down – this must have just happened because I was on their site 2 days ago.  I guess there are 2 ways to look at this: 1 – there is not enough demand or 2- I have one less competitor to worry about.

The first thing I did is mind map the common features that I need in almost all web projects that I build.  Here is a short list of the most important features that came to mind:

  • User management: login, signup, password reset, forgot password, email verification, beta invitation code
  • Email integration with Sendgrid (you can plugin whatever you need), email templates
  • Payment managementStripe integration for payment processing, product selling, subscription selling, promo codes and so on.  Everything related to payment will work out of the box, all you gotta do is add your products or subscription plans in configuration and you are done
  • Analytics – Integration with KISSmetrics - http://www.kissmetrics.com/ to track and measure all the important events (login, signup, view plan, subscribe, etc…)
  • Affiliate management – affiliate, sign up, login, stats, payment, all working right out of the box to help you grow your business very quickly
  • Admin Site – A kick-ass admin control panel that will allow you to do all kind of things: ban users, send invitation codes, setup coupons, products, plans, email users, etc…
  • And a lot more

Questions: what do you think of these features?  Too much?  Not enough?  Just right?

What does it cost?
Well, what is 60 hours of work worth to you?  What would you pay to have all these things working on day one so you can focus on your REAL app?  $300, $500, $1000.  Seriously though, we are thinking of pricing it around the $299 to $499 range – any suggestions?

What do you get and how?
When you buy StarterWeb, you will receive the SOURCE CODE, specifically, you will receive direct access to our code repository.  You can do whatever you want with it EXCEPT sell it as a template or open source it i.e. you won’t be able to buy it, and re-sell it or give it away as starterweb.org – NOT COOL :).  The code is unit tested with 100% coverage with lots of integration testing for the most common scenarios.

What is the technology stack?

  • ASP.NET MVC 4 (Razor + C#) – because the .net community needs love too
  • JQuery
  • Knockout JS
  • Twitter Bootstrap
  • SQL backened – the data layer is written using the IRepo pattern and you pretty much can plugin any database you like – I might implement a Mongo DB layer if there is enough demand.
  • NUnit

Do you have a demo?
I am glad you asked.  Here is a demo that I deployed ta Azure in less than 20 seconds.  Side note: I have previously complained about the terrible deployment story on Azure but I gotta say, Microsoft gets it right again (on the 3rd version).   I was able to deploy to Azure in under a minute using git – FREAKING AWESOME.

Remember this is only 1 week old (working part time on it), but it has the following features:

  • Login
  • Signup
  • Reset password
  • Email verification
  • “Beta” invitations

See it at http://starterweb.azurewebsites.net/ - you can signup using the invitation code “mvp“.

You can’t wait?  Want it right now?
Let me know at @eibrahim or eibrahim @ gmail and you can pre-buy it for a discounted price of $149 which gives you a license to use it on 1 website (domain).  You will get a say in the direction the project goes and you will get direct read access to the source code repository.

Thanks and please, please, please, give us feeback.

Simplify Azure Deployment

It blows my mind how freaking difficult and slow Azure deployments are…  I have used AppHarbor and Google AppEngine in other projects and I can deploy a new version in about 20 seconds flat.  Azure is painful.  For starters, my deployment package is 50 megs.  50 FREAKING MEGS!!!  Are you kidding me???  It’s an MVC app with less than 10 pages, how did that turn into 50 megs…  To add to the pain, I couldn’t figure out an easy way to switch database connection strings from dev to production during deployment.  I haven’t timed the entire thing but I think it takes like 10 minutes – that’s just tooooooo SLOOWWWW!!!!

 

In order to stay sane and simplify the process a little, I put together a nant build script to:

  1. Switch connection strings to production values
  2. Build the project i.e. create the package
  3. Deploy it to azure
  4. Switch connection strings back to dev values

Here is the Nant script

 

As you can see the deploy to azure step calls a powershsell script, here is the content of that file:

 

The above script will upload the package to azure.  Notice that add snapin command in the beginning of the file, you will need to install the Windows Azure PowerShell Cmdlets to get that working.

 

Credits

Thanks to these helpful blog posts, I was able to figure it all out:

http://msdn.microsoft.com/en-us/gg271300

http://stackoverflow.com/questions/5346919/windows-azure-powershell-deployment-error-the-remote-server-returned-an-unexp

AppHarbor + ASP.NET MVC + Orchard = Awesome

ASP.NET development has come a long way.  It’s now easier to practice Test Driven Development (TDD) thanks to ASP.NET MVC and all the open source tools out there from Ninject to Moq to Entity Framework Code First.  But one thing remains real sucky in the .net world and that is deployment.  Have you tried deploying an Azure application?  It sucks and I hate Azure for it.  I created a web service using Python and deployed it on Google AppEngine and it was much faster to create, easier to maintain and deploy even though I knew zero Python.  Deploying a site to IIS is a pain in the butt.

I have always been envious of how easy it was/is to deploy a rails app.  It takes seconds and usually one command line.  It is just awesome.  So, I was really excited when a few weeks ago I ran across AppHarbor and it looked too good to be true.  I thought I would see how easy it would be to create a site and deploy it.  Instead of creating an app from scratch though, I am going to create an Orchard website.  If you haven’t seen Orchard, go check it out.  It’s really cool.  It’s a CMS/Blog engine written in ASP.NET MVC and is open source and very extensible.

Prerequisites: Setup git on your computer, see this link for instructions.

So, here is how to get a website up and running in seconds…

1 – Login to AppHarbor and create a new application

2011-05-03_1545

2 – Change your new application settings to enable write-access to the file system

2011-05-03_1607

3 – Start WebMatrix and create a new site from Web Gallery

2011-05-03_1548

4 – Choose Orchard and name your website

2011-05-03_1550

5 – Open up a command prompt (I use Console2)

6 – Change to the path of your new website e.g. cd c:\websites\mywebsite

7 – run the following commands

  • git init
  • git add .
  • git commit –m “initial commit”
  • git remote add appharbor https://eibrahim@appharbor.com/MyWebsite.git (the URL will be unique to your app)
  • git push appharbor master (enter your AppHarbor password)

8 – Visit your new site on appharbor, in this example the site is located at http://mywebsite.apphb.com/ 

9 – DONE!!!  Just follow the prompts to setup Orchard

 

You have just deployed a web app and have it hosted for free.  You can easily scale it using AppHarbor’s cloud infrastructure.  It is simply awesome. 

Another cool feature is that every time you want to deploy a new version, you simply commit your changes and run the git push command above.  AppHarbor maintains different versions of your app and you can easily switch between versions.  So if you deployed a bad version, you simply click a link and deploy the last working version.

2011-05-03_1941

I personally haven’t deployed a scalable app on AppHarbor, so I would love to hear your feedback on how well the scaling works and if it is cost-effective or not.