Intro

So, recently I had to redeploy new ASP.NET Core app few times and I don\’t want the user to stare at some ugly error page. I want something better, some nice page sayng website is under maintenance, and it would be nice if there would be progress of that operation.

file

Solution

My first try was ofcourse App_offline.htm. Simple static html page that you put in folder where your website is. When this App_offline.htm is present in that folder it would be shown to the user instead of your website. That\’s fine, now the user knows whats going on, but how long is the maintenance gona take? User don\’t know that and that might be a little bit frustrating for him.

What I came up with, is still simple html page, but with auto refresh(so when update is complete user will immediately see updated website), loader(it\’t just better when you see some wheel spinning :)) and progressbar.

You can see whole App_offline.htm page on my gist.

Autorefresh

Autorefresh feature is done with simple meta tag that will refresh page, in our case every 10 seconds:

Spinner

Spinner is pure css, I got mine from https://loading.io/css/.

Progressbar

Progressbar is just html div with background color.

Updating progressbar

Now we got the page, but how are we gonna update the progress? It\’s quite simple. We need to use our App_offline.htm as template. That is why there is #progress# placeholder. Every time we make progress in deployment(that is we copy some file) we update the template with percentage and move it in IIS website folder.

I wrote simple powershell script based on this post. Basicaly you get all files from your source(publish) directory with Get-ChildItem and then move them on server one by one with Copy-Item and every time you update App_offline.htm aswell.

Usage is pretty simple, just run:

Here is whole script Deploy-WithProgress.ps1:

When all files are transfered App_offline.htm is removed and because there is a refresh meta tag on the same page, so it will be refreshed into newly updated website.

Conclusion

I\’m very satisfied whith this maintenance page. Not only that it shows usefull information to the user, but it even get the user immediately on website when update is done. I hope it helps someone build better maintenance page and make users happier. Feel free to edit the html template and powershell script aswell. Happy coding!

Last modified: February 4, 2022
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments