Rewriting this site with Razor Pages

06/04/2021

Alex



Introduction

Recently I decided to rewrite the entire site in Razor pages. Main reason? The old site's code was a bit of a mess to be honest. I had written it well over a year ago and code rot had started to set it, especially with Vue3 now released.


History

So first off, a bit of history about the web site. Originally this site way back was merely a single static index.html file sitting on a basic GoDaddy server. My experience with web development at this point was limited.

The main purpose of the site was to act as a portfolio/landing page for the games I had been making. So all I knew was to write some vanilla HTML and upload it to the server. This site did not look pretty at all, it was basic.


A year so or later I released Virtual Escape: The Play room. This prompted a need for a new website. Due to time constraints and limited web developed experience, SquareSpaced proved to be a simple option to quickly build a new site.


The site stayed on SquareSpaced for a good 2 years. However, the costs were proving to be a little high for what it was. Also, I wanted more control over the styling of the site. So, it was rewritten from scratch.


The first rewrite was done using Vue.js. I chose Vue as it was open source and looked simple to use and I wanted to explore using a Framework. The main reason, was I liked the idea of using reusable components, it seemed to made sense for me coming from a game development background.

Building the site took a bit of time but using it as a learning opportunity I managed to develop something I was quite happy with. I had managed to create static pages hosting our content in addition to a contact form that would allow us to receive messages from prospective clients.


For hosting the site was put up on Netlify. Linking the GitHub repository to their build pipeline was effortless, updating the site was simple as pushing changes to the repository.

So, all was well. I had managed to create a site that visually looked how I wanted it, and I managed to cut the hosting costs down. The site was like this for a good year, until I decided to update it to Vue3.
I began a rewrite in Vue3 and got far with it. I wanted to show off my efforts to a friend who is a Web developer, and his first reaction was.

"Using Vue for what you are doing is overkill”.

It was at that point I became aware of client and server-side rendering. Little did I know that I had been writing my site as a SPA (Single Page Application) What this meant was that the site was being rendered by the client. This also meant our SEO (Search Engine Optimization) was not being picked up properly. I then had to accept that I had chosen wrong. It also became clear that the web development world is filled with a lot more concepts that I was not fully aware of.


ASP.Net and Razor Pages

When discussing it with that friend he suggested I investigate ASP.Net and Razor Pages. The main benefit and reason for it is that it would be a server-side application that could then serve the pages to the client. In addition, the construction of the page would be written in C# a language that I am already fairly familiar with. Also, the way Razor pages works also allows for components or reusable layouts, again adhering to DRY concepts (Don't repeat yourself) At first, I was a bit hesitant as I felt the change would be drastic. Going from a JavaScript/ a JavaScript Framework to .NET Core could be a big shift in development approach. However, for the most part the transition was easy.

Pages

Razor Pages makes serving pages easy. Each page can be added to a "Pages" folder and upon start up each one gets generated and served when the client requests the page. Each page is made up of a ".cshtml" and ".cshtml.cs" file. The "cshtml" file acts as the layout file for the page. In here normal HTML tags can be placed as needed. However, the added power of C# allows for code to be added to the layout to generate elements of the page automatically. For example:

    @foreach (var Employee in Model.Employees)
    {
        <div class="card">
            <img class="employee-img" src="@Employee.EmployeeImage" alt="">
            <h1>@Employee.Name</h1>
            <h2 style="margin-bottom: 20px">@Employee.JobTitle</h2>
        </div>
    }

Here we have a foreach looping over each Employee. In doing so we can automatically add each card element to the page. Again, being able to reuse and automatically generate elements was a big requirement for my needs.

C#

Having C# as the main language for developing also made things more consistent. Logic that the server runs could be all written in C#. Minimizing the need for JavaScript in a lot of cases. The only bit of JS appears is on the Header to open and close the menu bar on mobile. Also having a more statically typed language was a lot more enjoyable than JavaScript.

Hosting

For hosting this did require a bit more effort. Netlify was an easy place to host content, but it was mainly for flat static files. ASP on the other hand requires a server that can run the ASP web application. So, Azure seemed to be the easiest option to go with. While the costs are a bit higher, having the convenience of deploying from Visual Studio to deploy on Azure makes the process very similar to Netlify. Overall I'll be keeping an eye on the server cost as time goes on. If it gets too much, I'll probably look to another option.

Blog

One new addition to the site is the inclusion of a blog. This is something I had been wanting to do for a while but needed to spend the time to investigate on how to build one. So, with this rewrite I spent the time to build a blog. The content of the blog itself is simply hosted on the site. The need for a CMS (Content Management System) was a bit overkill for my requirements, as its only about 2 people who will be contributing blogs. So, uploading them to the repository will be the way forward for now. Each blog is written in Markdown and then dynamically rendered into the page using Markdig. This was a good learning process, as it required parsing files and having the parsed file render as HTML. It took a bit of figuring out but one vital piece of the puzzle was this:

@Html.Raw("HTML STRING HERE")

Once you parse in the HTML String the layout will render it correctly, rather than a string with tags included, as I kept getting to begin with.


Final Thoughts

Over the course of writing this site I have discovered that web development is full of surprises and many different ways of working. So far, the rewrite has gone as well as I have liked it to. I have learnt a lot about ASP.Net, and Razor Pages and I think I now prefer it over Vue in some ways. That said it does not rule out the possibility that the site may well see another rewrite in the future. Time will tell...