I always try to find an excuse to code, I just love doing it. It rarely ends in a real life usable product, but I’m having a blast doing it.
For my latest project, I thought I would bring you around, just to get back into the blogging game, but also to keep my self on a schedule to, at least try to finalize this project.
Description
It’s no secret, my blog runs on WordPress, it has done so since 2007. I have tried, many times to move to Umbraco, but I never really got there, so here we are.
This project, is a way for me to start that transition. I want to move all public content away from the CMS, into a standalone application based on ASP.NET Core. This way, I will be able to isolate my WordPress backend and have a greater control over my frontend.
I will also like be able to try switching to Umbraco Headless or a full, local, Umbraco install without changing the frontend or needing to rebuild the front-end completely.
I usually use Visual Studio for my programming, but I will try to make this post as “cross platform” as possible.
My project names are all prefixed with NDesoft, feel free to call yours what you want.
I will also use my own WordPress API endpoint, feel free to use that as well. Everything is cached by Cloudflare, so go nuts.
Resources / Documentation
I am using the following resources to help me along in this endeavor:
ASP.NET Core: https://docs.microsoft.com/en-us/aspnet/core/index?view=aspnetcore-2.1
.NET Core CLI: https://docs.microsoft.com/en-us/dotnet/core/tools/?tabs=netcore2x
WordPress Rest API: https://developer.wordpress.org/rest-api/
Requirements
It must be based on ASP.NET Core.
Data access must be isolated from the web app, making it possible to add an App, Rest API or whatever later on without changing the code base.
CMS Api access must be isolated in a way that more can be added later on without rebuilding the applications completely from scratch.
This might make the project a bit over-engineered, but hey, we’re just having some fun here!
Getting started
First you must find a folder suitable for development. There, you open up a console, I prefer PowerShell, and run this command:
dotnet new sln
This creates a new Visual Studio solution file, nothing to it other than that.
Next we create a folder for our application, I call mine for “NDesoft.App”
In this folder we will create a new ASP.NET Core project, using the MVC template:
dotnet new mvc; dotnet sln ../NDesoft.sln add ./NDesoft.Web.csproj
This will create a new ASP.NET Core MVC project, and add it to our solution file.
Next, we need two more projects: One for wrapping the WordPress API, and one used as an interface between the web-app and the WordPress wrapper:
dotnet new classlib -o NDesoft.Wrapper;
dotnet new classlib -o NDesoft.Wrapper.WordPress;
dotnet sln add NDesoft.Wrapper;
dotnet sln add NDesoft.Wrapper.WordPress;
This will create two new folders, each with their own class library, (dll), project and add them to our solution file.
In each folder, the template has created a file called Class1.cs, please delete that. We don’t need that.
We’ll need to add some references between our newly created projects, to make them play nice together.
NDesoft.Web must have a reference to NDesoft.Wrapper and NDesoft.Wrapper.WordPress
NDesoft.Wrapper.WordPress must have a reference to NDesoft.Wrapper
To do that, we need to run the following commands:
dotnet add NDesoft.Web reference NDesoft.Wrapper NDesoft.Wrapper.WordPress;
dotnet add NDesoft.Wrapper.WordPress reference NDesoft.Wrapper;
Packages
We also need to install a few packages:
Newtonsoft.Json, AutoMapper and AutoMapper.Extensions.Microsoft.DependencyInjection
Automapper is used later on, but we might as well install it now.
dotnet add NDesoft.Web package automapper;
dotnet add NDesoft.Web package AutoMapper.Extensions.Microsoft.DependencyInjection;
dotnet add NDesoft.Web package Newtonsoft.Json;
dotnet add NDesoft.Wrapper package Newtonsoft.Json;
dotnet add NDesoft.Wrapper.WordPress package automapper;
And now, our solution and projects are up and running and we can start coding.
Interfaces
ASP.NET Core has native dependency injection, and since we are building a highly decoupled platform it makes sense to utilize that. So let’s start by adding a ton of interfaces. These will just be the bare minimum for this post, more will come.
In the NDesoft.Wrapper project, we’ll add a folder called “Interfaces” and under that another called “Helpers”.
In the Helpers folder, we’ll create to interfaces, (One file per interface):
IRequestManager
This interface manages requests to the Rest API and deserializes the responds, I might add an interface for the deserialization, but for now it’s handled by this manager.
public interface IRequestManager
{
Task<TResult> Get<TResult>(string url, CancellationToken cancellationToken, object parameters = default);
}
IUrlParameterHelper
This interface helps us handle URL parameters in a shared way. No copy/pasting anything.
public interface IUrlParameterHelper
{
string ConvertToUrlParameters(object parameters);
}
In the “Interfaces”-folder, we’ll create two new interfaces:
IPosts
This is an interface that handles everything related to blog posts. It has nothing to do with authors, tags, categories, media, comments, pages and so on, only posts.
Please note the “PostModel”-class, this will be implemented in a bit.
public interface IPosts
{
Task<IEnumerable<PostModel>> GetPosts(int currentPage = 1, int? pageSize = default, CancellationToken cancellationToken = default);
}
IClient
The name might change, I do not like the name, but for now it’s IClient. It’s the main entry point handling almost everything.
public interface IClient
{
IPosts Posts { get; }
}
Classes
Now we have the basic interfaces going, let’s implement them.
First of we need a class that represents a single blog post:
NDesoft.Wrapper
PostModel
Place this class in a folder, in the NDesoft.Wrapper project called “Models”.
public class PostModel
{
public string Id { get; set; }
public DateTime Date { get; set; }
public DateTime Modified { get; set; }
public string Slug { get; set; }
public string Title { get; set; }
public string Content { get; set; }
public string Excerpt { get; set; }
public string AuthorId { get; set; }
public string FeaturedMediaId { get; set; }
public bool IsSticky { get; set; }
public IEnumerable<string> CategoryIds { get; set; }
public IEnumerable<string> TagIds { get; set; }
}
This class is based off of the response from the following request for a single post:
GET https://ndesoft.dk/wp-json/wp/v2/posts/873
The properties contains, what I think is, the minimum required number of properties to display a blog post. You might want more or less.
You might want to add a reference to this class in the IPosts interface.
RequestManager
In NDesoft.Wrapper create a folder called Helpers. In here, create a class called RequestManager:
public class RequestManager : IRequestManager
{
public static readonly HttpClient httpClient = new HttpClient();
private readonly string baseUrl;
private readonly IUrlParameterHelper urlParameterHelper;
public RequestManager(string baseUrl, IUrlParameterHelper urlParameterHelper)
{
this.baseUrl = baseUrl;
this.urlParameterHelper = urlParameterHelper;
}
public virtual async Task<TResult> Get<TResult>(string url, CancellationToken cancellationToken, object parameters = default)
{
var fullUrl = this.GetFullUrl(url, parameters);
var response = await httpClient.GetAsync(fullUrl, cancellationToken).ConfigureAwait(false);
response.EnsureSuccessStatusCode();
var bodyContent = await response.Content.ReadAsStringAsync().ConfigureAwait(false);
var result = JsonConvert.DeserializeObject<TResult>(bodyContent);
return result;
}
protected virtual string GetFullUrl(string url, object parameters = default)
{
var parameterString = this.urlParameterHelper.ConvertToUrlParameters(parameters);
return $"{baseUrl}{url}{parameterString}";
}
}
Worth noting: The constructor takes a string as first parameter. It contains the base URL of the Rest API. The value is, later on, set using app settings. However, I would like to not add it as a parameter, since it adds to the complexity of setting up the dependency injector.
Also noteworthy, this class has a static readonly HttpClient. This way we always use the same HttpClient for all requests. I do know about RestSharp and the like, but I prefer HttpClient as I thinks it’s easier to use.
I have a habit to always pass a Cancellation token into every async method that supports it. To me it makes sense because if a user aborts a request, every subrequest I make on my site will be aborted as well releasing resources.
It might be beneficial to add some caching here to reduce response times and load on the source server.
UrlParameterHelper
Next to the RequestManager, add a class called “UrlParameterHelper”:
public class UrlParameterHelper : IUrlParameterHelper
{
public string ConvertToUrlParameters(object parameters)
{
if (parameters == default)
{
return string.Empty;
}
var type = parameters.GetType();
var properties = type.GetProperties();
var urlBuilder = new StringBuilder();
if (properties.Any())
{
urlBuilder.Append("?");
string joinedParams = GetParameterString(parameters, properties);
urlBuilder.Append(joinedParams);
}
return urlBuilder.ToString();
}
private static string GetParameterString(object parameters, PropertyInfo[] properties)
{
var urlParams = new List<string>(properties.Count());
foreach (var property in properties)
{
var value = property.GetValue(parameters);
if (value != null)
{
var stringValue = value.ToString();
if (string.IsNullOrWhiteSpace(stringValue) == false)
{
var encodedValue = HttpUtility.UrlEncode(stringValue);
var urlParam = $"{property.Name}={encodedValue}";
urlParams.Add(urlParam);
}
}
}
var parameterString = string.Join("&", urlParams.ToArray());
return parameterString;
}
This class is used to help converting an object to url parameters, making it easier to create url’s with objects rather than string manipulation.
In the future, this class might be extended to handle number and datetime formatting better than it does now, as well as flattening nested properties.
Client
And now, the last class in the NDesoft.Wrapper project, before moving on to the WordPress specific classes. This class should be located in the root of the project.
public class Client : IClient
{
public Client(
IRequestManager requestManager,
IPosts posts)
{
this.RequestManager = requestManager;
Posts = posts;
}
protected IRequestManager RequestManager { get; }
public IPosts Posts { get; }
}
There’s nothing much to this class at the moment, but we will add more in a future post.
NDesoft.Wrapper.WordPress
Now we move on to some of the WordPress specific implementations.
Models
This is not a class but a folder, we need to create a lot of classes that represents the json returned from the WordPress Rest API, and instead of me posting all those classes I’ll tell you how to generate all those classes.
First get the Json, I use Postman:
GET https://ndesoft.dk/wp-json/wp/v2/posts/873
Copy the response body and:
In Visual Studio:
Edit -> Paste Special -> Paste JSON As Classes
Or use http://json2csharp.com/
Posts
In the root of the project, add a class called Posts:
public class Posts : IPosts
{
private const string BaseUrl = "/wp/v2/posts";
private readonly IRequestManager requestManager;
public Posts(IRequestManager requestManager)
{
this.requestManager = requestManager;
}
public async Task<IEnumerable<PostModel>> GetPosts(int currentPage = 1, int? pageSize = null, CancellationToken cancellationToken = default)
{
var parameters = new
{
page = currentPage,
per_page = pageSize
};
var response = await requestManager.Get<IEnumerable<Post>>(BaseUrl, cancellationToken, parameters).ConfigureAwait(false);
return Mapper.Map<IEnumerable<PostModel>>(response);
}
}
Some background here: The method “GetPosts” loads all posts from the API by calling this URL:
GET https://ndesoft.dk/wp-json/wp/v2/posts
However, loading all posts at the same time would be overkill and slow down response times and over time only become slower. So, we need to add some paging parameters to the URL.
How to do that, we’ll look at this page https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/ it tells us that the API has two parameters we can use for our needs: “page” and “per_page”. Page, oddly enough is not zero-based so the first page is “1”.
PostProfile
Speaking of AutoMapper, we need some configuration to map the weird WordPress models the more leaner PostModel class. To do that, we need an AutoMapper profile.
Create a folder called “AutoMapperProfiles” and add a class called PostProfile:
public class PostProfile : Profile
{
public PostProfile()
{
CreateMap<Post, PostModel>()
.ForMember(dest => dest.Date, m => m.MapFrom(src => src.date_gmt))
.ForMember(dest => dest.Modified, m => m.MapFrom(src => src.modified_gmt))
.ForMember(dest => dest.Title, m => m.MapFrom(src => src.title.rendered))
.ForMember(dest => dest.Content, m => m.MapFrom(src => src.content.rendered))
.ForMember(dest => dest.Excerpt, m => m.MapFrom(src => src.excerpt))
.ForMember(dest => dest.AuthorId, m => m.MapFrom(src => src.author))
.ForMember(dest => dest.FeaturedMediaId, m => m.MapFrom(src => src.featured_media))
.ForMember(dest => dest.IsSticky, m => m.MapFrom(src => src.sticky))
.ForMember(dest => dest.CategoryIds, m => m.MapFrom(src => src.categories))
.ForMember(dest => dest.TagIds, m => m.MapFrom(src => src.tags));
}
}
Again, nothing special here. All we do is we flatten out some of the weird constructs of the WordPress json and maps everything to a more lean model.
Web
Now we have setup everything needed to access the WordPress API and have a solid base to build on. All we need to do now is wire everything up in the web project.
Configure AutoMapper
First things first, we need to configure AutoMapper. Open up the Startup-class and add the following method at the bottom of the class:
private void SetupAutoMapper(IServiceCollection services)
{
services.AddAutoMapper(cfg =>
{
cfg.AddProfile(typeof(PostProfile));
});
}
All we do here is adding AutoMapper to our services, and adds our PostProfile to the AutoMapper collection.
Setting up the Dependency Injector
Next up, adding our services to the Dependency Injector. Again in the Startup-class add the following method to the bottom of the class
private void SetupWrappers(IServiceCollection services)
{
services.AddTransient<IUrlParameterHelper, UrlParameterHelper>();
var baseUrl = Configuration["WrapperConfig:BaseUrl"];
services.AddTransient<IRequestManager, RequestManager>((provider) => new RequestManager(baseUrl, provider.GetRequiredService<IUrlParameterHelper>()));
services.AddTransient<IClient, Client>();
// Service specifics:
services.AddTransient<IPosts, Posts>();
}
All we do here is telling the DI, what services we have, and where to find their implementations. Note that everything uses the NDesoft.Wrapper classes, but only Posts uses the NDesoft.Wrapper.WordPress classes.
Before we’re done here, we need to add the following to the appsettings.json-file:
"WrapperConfig":{
"BaseUrl":"https://ndesoft.dk/wp-json"
}
By doing this, we tell the wrapper where to find the endpoints needed to get the data.
Finishing up Startup
In the ConfigureServices-method, add these two lines at the top of the method:
this.SetupAutoMapper(services);
this.SetupWrappers(services);
And now we are set, and can start building our controller.
Home
In the HomeController, remove everything except the Index-method and add the following:
private readonly IClient client;
public HomeController(IClient client)
{
this.client = client;
}
This injects the client into the controller and we’re ready to use it.
Replace the Index-method with this:
public async Task<IActionResult> Index(CancellationToken cancellationToken)
{
var posts = await this.client.Posts.GetPosts(1, 5, cancellationToken).ConfigureAwait(false);
return View(posts);
}
This code gets the first 5 posts from my blog and sends them to the view.
Final thing, we need to update the view. Open the file /Views/Home/Index.cshtml and replace everything with this:
@model IEnumerable<NDesoft.Wrapper.Models.PostModel>
@using System.Globalization;
@{
ViewData["Title"] = "Home Page";
}
@foreach (var item in Model)
{
<article>
<a href="/@item.Date.ToString("yyyy/MM/dd", CultureInfo.InvariantCulture)/@item.Slug"><h2>@Html.Raw(item.Title)</h2></a>
<div>@item.Date</div>
<div>
@Html.Raw(item.Content)
</div>
</article>
}
Trying it out
Let’s try to run the darn thing:
dotnet build;
dotnet run --project ./NDesoft.Web;
You should now be able to go to http://localhost:5000 or https://localhost:5001 and se something like this:
Source
The source code for this blog post can be found on Github:
Next part
In the next part, I’ll try getting pages, author, tags and categories up and running.