Skip to content
January 5, 2013 / jphoward

End to end web app in under an hour–Part 4

Here is the video tutorial that goes with this post:

Continued from Part 3.

Adding Indexes

Since we will probably sort frequently by the displayed columns, we should add indexes to them. However, our Todo column is currently unlimited in length, which will be tricky to index. So let’s first add an appropriate constraint in the TodoItem class:

[MaxLength(800)]
public String Todo { get; set; }

(NB: You’ll need “using System.ComponentModel.DataAnnotations” for this attribute.) Now run ‘Add-Migration CreateTodoIndexes’ in the console (where “CreateTodoIndexes” is the name of migration – use whatever name you prefer), and customize the Up() method to add the indexes.

public override void Up()
{
AlterColumn("dbo.TodoItems", "Todo", c => c.String(maxLength: 800));

foreach (string col in new[] { "Todo", "Priority", "DueDate" })
    CreateIndex("TodoItems", col);
}

Finally, run “Update-Database”, to make this changes in the DB. Now you’re truly web-scale!

Deploying to AppHarbor

Deployment is already very well covered by the docs at AppHarbor, so I’ll just summarize the steps here.

First, create a GitHub project and commit your code. Create an application at AppHarbor, and be sure to add the SQL Server add-on (20MB is free).

image

Connect your AppHarbor application and GitHub, by simply clicking the Configure Github link on your main AppHarbor project page.

image

Now we need to configure the DB. Open web.config.release in the root of your project.

image

Paste in the following code:

<?xml version="1.0"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <connectionStrings>
    <add xdt:Transform="SetAttributes"
         xdt:Locator="Match(name)"
         name="AmazingTodoContext"
         connectionString="...paste..." />
  </connectionStrings>
</configuration>

You need to paste in the unique connection string provided by AppHarbor. You can get this by clicking ‘Configuration Variables’ by the list of AppHarbor addons, and clicking the copy button for the value of ‘SQLSERVER_CONNECTION_STRING’.

Finally, we need to ensure that Update-Database is called automatically as required, by adding this to the database context class (AmazingTodoContext):

protected override void OnModelCreating(DbModelBuilder modelBuilder) {
    Database.SetInitializer(
        new MigrateDatabaseToLatestVersion<AmazingTodoContext, Migrations.Configuration>());
}

If you now commit to GitHub and sync, AppHarbor will be notified of the commit and will automatically build and deploy your application. Each time you commit a new build and deploy will be kicked off, and status is displayed in AppHarbor.

image

The Hostnames link shows you the hostname of your running app.

image

Click it (and add ‘index.html’ to the url) to see your stunning addition to internet commerce!

image

You can get the code as at the end of part 4 from this GitHub link. Don’t forget to set the connection string and also to update your local database if you want to run the code from GitHub, rather than creating it yourself using the tutorial.

In the next part we will add make the application more resilient, by adding error handling and validation.

Advertisements

12 Comments

Leave a Comment
  1. Robert Anderson / Jan 17 2013 2:45 am

    Fantastic tutorial. Thanks!

  2. cweyer74 / Feb 14 2013 7:12 pm

    Nice.
    Where did you get the AngularJS and Bootstrap snippets from? (I did watch the videos, but without sound ;)).

  3. Eric Whitmore / Mar 19 2013 3:47 am

    Great Tutorial. Would have never made it through angular without it. Would like to put in my vote for Angular Unit Testing as the next tutorial.

  4. Bastien Vandamme / Apr 23 2013 12:52 am

    Where can I find all the code snippet you use in your examples ?

  5. Matt Herb / Aug 24 2013 7:26 am

    The piano music relaxes me

  6. Nguyễn Văn Nam / Mar 26 2014 7:07 am

    thank you very much

  7. Derek Tomes / Mar 27 2014 10:47 am

    Thanks for the very clear tutorial!

  8. Ankit Jain / May 8 2014 3:01 am

    All your tutorials are one of the best i have seen online 🙂 But i am having some issues after i deploy my application using App Harbor. My first page loads just fine, but none of the routes work. In console i am getting an error 404 ( Not Found ), Is there anything that i am missing ? Or what ? would appreciate if you could reply and help.

  9. Don Sheffi / Jun 27 2014 2:50 pm

    Great tutorial, Thank you!
    Would it be possible to continue with Part 5, on how to add Authentication to the Web API with AngularJS??

  10. Jen Pearson / Jul 1 2014 3:50 pm

    Thanks for the tutorial. It definately took more than an hour, but was easy to follow along with 🙂

Trackbacks

  1. End to end web app in under an hour–Part 3 « Jeremy Howard
  2. Todo Web App Part 4 - ASP.NET MVC Angular Web API | Share You All

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: