Part 8: Preparing for launch – Create an EPiServer site from scratch

Posted on December 24, 2009 by Frederik Vig in EPiServer

This is the last part of Create an EPiServer site from scratch. We’ve come a long way, almost finishing our site! What we have left is doing some testing and deploying it to our production server.

Client side performance testing

When doing performance testing, we as ASP.NET developers, mostly focus on the server side stuff. EPiServer has done a superb job with making sure that EPiServer looks after server side performance for you, and gives you the tools to improve it even more. But one area of performance we don’t necessarily focus so much on is client side performance.

With client side performance I mean how fast the transfer to the client (user) is. Most of the users time will not be spent waiting for a SQL query to run, but actually downloading all the sites resources (images, css, JavaScript files etc).

There are some easy steps we can take to improve our site even more. Lets start by taking a look at Yahoo!’s Best Practices rules for Speeding up our site. There are some very good rules here that we’ll implement. Yahoo! has also developed a Firefox extension YSlow for Firebug.

YSlow

Install YSlow, and run it by pressing the YSlow button in the bottom right corner of Firefox.

YSlow in Firefox

Click the YSlow tab and Run Test.

YSlow result

Overall we have a result of C, which is fine, but as you can see we have a few F’s around.

ETags

From YSlow rules

Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser’s cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.

To remove the ETags in IIS 7, open up the IIS Manager, go to the Jungle site, and click HTTP Response Headers, click Add and type ETag into the name and “” into the Value field.

Remove ETags in IIS 7

Expires HTTP headers

Per Bjurström has written on this before, Configuring cache expiration on IIS 7.

I updated the staticContent sections clientCache to.

<staticContent>
    <clientCache cacheControlMode="UseExpires" httpExpires="Sun, 29 Mar 2020 00:00:00 GMT" />
</staticContent>

Which sets the expiration date to 2020 on static content (CSS, JavaScript, PNGs etc).

Expires header with Network monitor in Firebug

If your using IIS 6, you can use a custom static file handler.

using System;
using System.Web;
 
namespace Jungle
{
    public class JungleStaticFileHandler : EPiServer.Web.StaticFileHandler
    {
        protected override void SetCachePolicy(HttpContext context, DateTime fileChangedDate)
        {
            if (fileChangedDate > DateTime.UtcNow)
            {
                fileChangedDate = DateTime.UtcNow;
            }
            context.Response.Cache.SetLastModified(fileChangedDate);
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.Cache.SetExpires(DateTime.UtcNow.AddYears(1));
            context.Response.Cache.SetValidUntilExpires(true);
            context.Response.Cache.VaryByParams.IgnoreParams = true;
            context.Response.Cache.SetOmitVaryStar(true);
        }
    }
}

For some reason you can only add 1 year when doing this with a custom handler. You also need to update the web.config file to use JungleStaticFileHandler instead of StaticFileHandler.

CDN Support

Per Bjurström has another terrific post explaining how to enable CDN for EPiServer. I’ve not enabled it for my local site, but if you do, just remember that you don’t need to use JungleStaticFileHandler anymore, since CdnStaticFileHandler does the same thing.

Fewer HTTP requests

We can easily reduce our HTTP requests by combining our CSS or JavaScript files into one, and by using CSS Sprites. To help with the CSS Sprites there are quite a few generators out there. I encourage you to take a look and try it out, this is one of the most important steps you can take for better client side performance.

Compressing CSS and JavaScript

To compress CSS and JavaScript code we can add either add an HTTP Handler that does this for us, use an online compressor, or add a build task to Visual Studio.

There are a number of resources to help you with compressing CSS and JavaScript files, many of them also combine CSS or JavaScript files into one.

From local development to remote server

We’re now ready to deploy our application to a remote server. Open up UnleashIt (install it if you haven’t done so already).

Create a new profile by going to: File, Profiles, Profile Configuration. Select the Quick Deploy Profile, duplicate it, and give it a name of Jungle. Click OK, and go back to the main UnleashIt window. Under Source destination select your wwwroot folder and choose a destination folder.

UnleashIt profile

If this is the first time you use UnleashIt you need to add a few File Masks (files UnleashIt copies over to the deployment folder). To add new ones go back to Profile Configuration (File, Profiles, Profile Configuration). You have a text field where you can type new file masks, add them by clicking the Add as file mask button.

My file masks

  • *.asax
  • *.ascx
  • *.ashx
  • *.asmx
  • *.aspx
  • *.browser
  • *.config
  • *.css
  • *.dll
  • *.gif
  • *.htm
  • *.html
  • *.ico
  • *.jpg
  • *.js
  • *.master
  • *.png
  • *.skin
  • *.txt
  • *.xml

Database

Take a backup of your development database by using the SQL Server Management Studio (can be installed with Web Platform installer). Right-click the database, and choose Tasks, Back Up (make sure the backup type is set to full).

Database backup with SQL Server Management Studio

Connect to your production database server/instance, create a new database and restore the database by going to: Tasks, Restore, Database. Select from Device and choose our database (dbJungle.bak in my case), check the checkbox next to the backup set to restore. Go to Options and check the checkbox next to Overwrite the existing database, also update the Restore the database files as paths.

Great, we can now click OK, and the restore will start. After you’ve restored successfully, remember to add a user to the db_owner schema. Expand the the database and choose Security, Users, and either add a new one or update the existing one.

Add user to database

Remote server

In my case, I’m deploying the application to a Windows 2008 Server with IIS 7 (same IIS version as my development one).

Either use remote desktop or login to your remote server in another way. Make sure to install EPiServer on the server if it isn’t already installed (see Part 1: Setting up the development environment for more information).

Copy the deployed files to the remote server, I usually use a folder system like this on the remote server: Customers\CustomerName\Internet(Intranet)\wwwroot. Also make sure to copy the VPP folders.

Open up the IIS Manager and create a new application pool by going to Application Pools and Add Application Pool, use the default settings (.NET 2, Integrated mode etc).

Now we can create the site in IIS, right-click Sites, and Add Web Site, give it a name and choose our newly created application pool, choose the wwwroot folder, under host names add the host name you wish to use.

New Site in IIS 7

We need to update connectionStrings.config with the new connection information (new database, user name, password etc), and web.config with the new VPP paths. Just search for VPP and the first hit should match the PageFiles path (there are three paths to update). Last step is updating siteUrl under siteSettings, to our new host name.

You should now have a running site! Test by clicking a little around to make sure everything works as expected.

Sometimes it takes a while for the DNS of the new domain to get updated everywhere, a little trick is to update your local hosts file (C:\Windows\System32\drivers\etc\hosts), and add the host name with the remote servers IP address.

Uptime

There are various tools, both free and commercial, that’ll tell you when a site goes down. One I’ve used in the past is the free BasicState, you also have Pingdom and Uptrends both are commercial. I recommend giving them a try!

Logging exceptions

ELMAH (Error Logging Modules and Handlers) is an application-wide error logging facility that is completely pluggable. It can be dynamically added to a running ASP.NET web application, or even all ASP.NET web applications on a machine, without any need for re-compilation or re-deployment.

ELMAH is a free and easy to use and setup, and you can subscribe to a RSS feed for updates.

ASP.NET Exception Reporter

Another free tool that is based on ELMAH is ASP.NET Exception Reporter.

ASP.NET Exception Reporter (based on ELMAH) is pluggable application-wide error logging facility. Plug it in to your existing webapps, webservices, …
The goal is to centralize the different exceptions that are generated by ELMAH to one web application.
It is developed in C#.

Great for when you need to monitor multiple applications, not just the one.

ASP.NET Exception Reporter

Conclusion

There are of course numerous tasks and functionality we didn’t do or add in this series. I’ve deliberately kept things as simple as possible, and instead tried to give you pointers on how you might extend the site even more. I highly recommend playing around more with the site, and implementing some of the functionality we didn’t implement. Both the footer and the thumbnail images, are a great place to start.

I hope you’ve enjoyed this series, and do be sure to come back to this site for further updates and new blog posts!

Thanks for reading!

Related Posts: