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).

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

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

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.

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

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

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.