Forem: Martin Soderlund Ek

Running Entity Framework Core Migrations with Optimizely CMS 12

Martin Soderlund Ek — Wed, 09 Oct 2024 13:19:56 +0000

So you've added your new Entity Framework DbContext to the Startup ConfigureServices method, everything works fine locally when you start your web application. Your database table(s) are created, migrations work both ways. Now you only need this working for other environments.

Enter the good old initialization engine in Optimizely.

What we want to do is:

Scan all classes inheriting from DbContext.
Go through your Entity Framework contexts and check if they have pending migrations.
Apply any pending migrations.

Here's the full solution:

using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
using Microsoft.EntityFrameworkCore;

[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class EntityFrameworkMigrationInitialization : IConfigurableModule
{
    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        context.Services.AddTransient<EFCoreMigrationService>();
    }

    public void Initialize(InitializationEngine context)
    {
        var migrationService = context.Locate.Advanced.GetInstance<EFCoreMigrationService>();
        migrationService.CheckAndApplyMigrations();
    }

    public void Uninitialize(InitializationEngine context)
    {
    }
}

public class EFCoreMigrationService
{
    private readonly ILogger<EntityFrameworkMigrationInitialization> _logger;
    private readonly IServiceProvider _serviceProvider;

    public EFCoreMigrationService(IServiceProvider serviceProvider, ILogger<EntityFrameworkMigrationInitialization> logger)
    {
        _serviceProvider = serviceProvider;
        _logger = logger;
    }

    public void CheckAndApplyMigrations()
    {
        using (var scope = _serviceProvider.CreateScope())
        {
            // Get all DbContext types in the application
            var dbContextTypes = AppDomain.CurrentDomain.GetAssemblies()
                .Where(a => !a.IsDynamic && !a.ReflectionOnly)
                .SelectMany(a => a.GetTypes())
                .Where(t => t.IsClass && !t.IsAbstract && t.IsSubclassOf(typeof(DbContext)));

            foreach (var contextType in dbContextTypes)
            {
                var context = scope.ServiceProvider.GetService(contextType) as DbContext;
                if (context != null)
                {
                    if (context.Database.GetPendingMigrations().Any())
                    {
                        _logger.LogError($"Applying EF migrations for {contextType.Name}");
                        context.Database.Migrate();
                    }
                }
            }
        }
    }
}

Partial Routing in Optimizely 12

Martin Soderlund Ek — Thu, 01 Feb 2024 11:19:20 +0000

If you need to implement partial routing in Optimizely CMS 12, this is a good start.

There are of course some breaking changes as per the documentation:

The interface IPartialRouter changed slightly, and implementations should now be registered in DI container as IPartialRouter, rather than the previous way to register a partial router, which was through the extension method RegisterPartialRoute on RouteCollection.

OK, lets start with adding a partial router class which implements IPartialRouter:

public class MyPagePartialRouter : IPartialRouter<MyPage, MyPage>
    {
        public MyPagePartialRouter() { }

        public object RoutePartial(MyPage content, UrlResolverContext urlResolverContext)
        {
            urlResolverContext.RouteValues.Add("requestPath", urlResolverContext.RemainingSegments);
            urlResolverContext.RemainingSegments = Array.Empty<Char>();
            return content;
        }

        public PartialRouteData GetPartialVirtualPath(MyPage content, UrlGeneratorContext urlGeneratorContext)
        {
            return null;
        }
    }

We add our params to the RouteValues collection. Note we use RemainingSegments instead of RemainingPath.

Then we need to register it in a DI container like this:

services.AddSingleton<IPartialRouter, MyPagePartialRouter>();

And that's it!

Customize the Optimizely CMS Login Page

Martin Soderlund Ek — Mon, 16 Oct 2023 09:46:13 +0000

The Optimizely CMS Login Page can be customized to fit your brand. Here's how.

The default one which we can modify..

For .NET Core based websites (Optimizely CMS 12 and later) this can be configured in the Startup.cs file and Configure method.

The simplest thing is to add a request delegate to the Configure method, looking for the default CSS file and background image, and replace them, like this:

app.Use(requestDelegate =>
{
    return new RequestDelegate(context =>
    {
        if (Regex.Match(context.Request.Path, "^\\/Util\\/styles\\/login\\.css", RegexOptions.IgnoreCase).Success)
        {
            context.Request.Path = new PathString("/ClientResources/Styles/EpiserverLogin.css");
        }

        if (Regex.Match(context.Request.Path, "^\\/Util\\/images\\/login\\/login-background-image\\.png", RegexOptions.IgnoreCase).Success)
        {
            context.Request.Path = new PathString("/ClientResources/Images/LoginImage.webp");
        }

        return requestDelegate(context);
    });
});

You can make this a separate middle ware class but I think this is pretty self-explanatory and clean. Note the paths.

For .NET framework based websites (Optimizely 11 and earlier), the same can be done with an InitializableModule and HttpContext.Current.RewritePath.

IOS Render Component Bug in Vue 3

Martin Soderlund Ek — Wed, 30 Nov 2022 09:54:18 +0000

Recently we had a problem where we toggled a CSS class disabled on a component like this:

<my-button :class="{ disabled: !readyToSubmit }" @click="handleSubmit">Submit</my-button>

The CSS class disabled is toggled depending on the computed property readyToSubmit's boolean value.

The problem was, only a few parts of the button changed on IOS/Safari, where all parts of the button changed on all other devices and browsers.

In short, this means the component wasn't properly re-rendered.

How can we best trigger a re-render in Vue? By adding the built in key special attribute to the component and changing its value.

Simply like this:

<my-button :class="{ disabled: !readyToSubmit }" @click="handleSubmit" :key="`MyBtn-${!readyToSubmit}`">Submit</my-button>

To better help Vue to keep track of what has changed and what hasn't, we supply a key attribute.

More on the key attribute in the Vue documentation

Setting up External File Storage in Optimizely CMS 12 (preview)

Martin Soderlund Ek — Fri, 10 Sep 2021 13:26:38 +0000

Optimizely (formerly Episerver) CMS 12 comes with lots of exciting new stuff, including .NET 5 support (thank you finally!).

Setting up a new website in a development environment is easy (Clone the .NET 5 preview repo here), however when you want a shared file share for the blobs (instead of the local App_Data folder), it's a little bit hard to find the accurate documentation for it.

To configure an Optimizely CSM 12 (preview) website to use a file share, you need to edit the appSettings.json file to include BlogProviderOptions, like this:

{
  "EPiServer":{
     "Cms":{
            "BlobProvidersOptions": {
                "DefaultProvider": "fileShare",
                "Providers": {
                    "fileShare": "EPiServer.Framework.Blobs.FileBlobProvider, EPiServer.Framework"
                },
             } 
             "FileBlobProvider":{
                 "Path": "\\dbserver\blobs"
             }
     }
  }
}

Until you do so, the App_Data folder will be used for your CMS content files.

The documentation for this can be found under the Deploying to Windows Servers section.

Set Nuget Proxy

Martin Soderlund Ek — Thu, 09 Sep 2021 06:48:13 +0000

When performing a dotnet tool install or similar command, you get an error like this one:

Unable to load the service index for source https://api.nuget.org/v3/index.json.
The SSL connection could not be established, see inner exception.
Received an unexpected EOF or 0 bytes from the transport stream.

You might then need to set proxy for Nuget.
Open Nuget.config in C:\users\YOUR_USER\AppData\Roaming\Nuget\Nuget.config

Add this config section to the configuration element:

<config>
  <add key="http_proxy" value="http://your-proxy-url:8080" />
  <add key="https_proxy" value="https://your-proxy-url:8080" />
</config>

Your Nuget.config might then look like this:

<configuration>
  <packageSources>
    ...
  </packageSources>
  <config>
    <add key="http_proxy" value="http://your-proxy-url:8080" />
    <add key="https_proxy" value="https://your-proxy-url:8080" />
  </config>
</configuration>

Set Git Proxy

Martin Soderlund Ek — Thu, 09 Sep 2021 06:34:33 +0000

You clone a Git repo and get this error message:

Git failed with a fatal error.
unable to access 'https://github.com/THE_REPO':
OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection github.com:443

This might be because you're behind a proxy. You then need to set proxy for Git in your command tool:

git config --global http.proxy http://your-proxy-url:8080
git config --global https.proxy https://your-proxy-url:8080

You also might need to disable SSL verification:

git config --global http.sslVerify false

Set npm Proxy

Martin Soderlund Ek — Thu, 09 Sep 2021 06:26:54 +0000

When you do an npm install and get an error message like this one:

npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/windows-build-tools failed, reason: Client network socket disconnected before secure TLS connection was established
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

the problem might be you're behind a proxy and need to configure this for npm.

You need to set proxy and https-proxy for npm, like this (in your preferred command tool):

npm config set proxy http://your-proxy-url:8080
npm config set https-proxy https://your-proxy-url:8080

Setting strict-ssl to false might be an idea too, if you really know what you're doing.

npm config set strict-ssl false

React Hooks and API Call Sample App

Martin Soderlund Ek — Sat, 19 Oct 2019 18:19:56 +0000

Last time around I wrote about a React sample app with an API call to RandomUser.me.

That version was classic React and now I've updated it to use hooks instead.

With classic React, we used Class components and mutated their internal state via setState when we wanted to do something.

With React hooks, we can use functional components instead, with the State hook useState, which itself is a React function.

We will import useState like this at the top of our file:

import React, { useState } from "react";

Then we'll declare our functional component, like this:

export default function RandomUser() {}

Then we will use EcmaScript 6 (ES6) destructuring and useState to return an array for use in our component:

const [name, setName] = useState([]);

The user and setUser variable names can be anything you want, as long as they are descriptive, of course.

Then we'll use the Effect hook useEffect to initialize our function and insert it into the tree. useEffect "serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API". (React Hooks documentation)

Sweet - useEffect takes care of a lot for us!

As you can see, we have a call to fetchRandomUser(), which will be an async function with our API call.

The complete code looks like this:

Compare this functional component with hooks sample, to the previous class components sample, we now have 48 rows, vs 65 rows before.

Here's the Github repo

React Sample App with API Call and Update to Latest Version

Martin Soderlund Ek — Fri, 20 Sep 2019 10:12:50 +0000

A while back I created a small and simple React app in order to fetch a random user from the RandomUser.me API.

You can find the React app on my GitHub: hello-react

I have a RandomUser component which simply looks like this:

We fetch a user from the API and present the user's name and picture, if present.

In our App.js file we then return the RandomUser component together with some HTML:

In the VS Code terminal we run the npm start command and our React app is compiled and we can look at it in the browser on http://localhost:3000/.

After commit to Github, I got a few security messages back, as expected.

First, I checked React version with this command:

npm list react

and got -- react@16.8.6 back, which isn't the latest version. To install latest React version, I had to run this command:

npm install --save react@latest

And then update packages in the React app with this command:

npm audit fix

I also manually had to update lodash.template to 4.5.0:

npm install --save lodash.template@latest

You can find the React app on my GitHub: hello-react @ dileno

Build an Angular 8 App with REST API and ASP.NET Core 2.2 - part 2

Martin Soderlund Ek — Wed, 18 Sep 2019 08:31:44 +0000

In part 1 of this tutorial, we built the ASP.NET Core back-end.

Part 2 - Create the Angular 8 app

Now, let’s finally start with the Angular app. We will use Node.js and Angular CLI to generate the Angular project and necessary files.

Remember. Github repo is here: Angular 8 blog app tutorial using .NET Core 2.2 and Entity Framework back-end

Prerequisites

When Node.js is installed, you can open the Node.js command prompt.

Execute this command in the command prompt to install the Angular 8 CLI:

npm install -g @angular/cli

This will install the latest Angular CLI globally and it’ll take a little while. When you’re done, you can check the Angular version with this command:

ng --version

The Node.js command prompt should look something like this:

Now, let's move to the folder where our Visual Studio back-end is located. Use the cd command to do this:

cd c:/projects/blog

We will simply call our Angular 8 application ClientApp. Let’s execute the command that creates our Angular application:

ng new ClientApp

We’ll be prompted with some questions. We want to use routing (press Y) and stylesheet format: SCSS. Then let Node do its thing and create the web app. It’ll take a minute or so.

When the app is created, cd command into the app folder:

cd ClientApp

And then build and run the app with the ng serve command:

ng serve

The command prompt will look like this:

The build succeded and now you can browse to your Angular app with the URL http://localhost:4200. The basic Angular 8 app is based on a template and it’ll look something like this:

If you have a look at the source code, it’ll look like this:

The interesting thing here is <app-root></app-root>, which is Angular specific and tells us where our Angular app will execute.

One final command is good to know — it’s Ctrl+C to close the Angular application, and you should press it twice to terminate the batch job and stop ng serve.

One of the nice features of Angular development is changes you save in front-end files will immediately be reflected in the browser. For this to happen the app needs to be running.

For some changes though, like adding Bootstrap, you need to restart the application to make it work.

Angular 8 fundamentals

Let’s pause, take a step back and learn some of the Angular 8 fundamentals.

Angular 8 is an open source client-side JavaScript framework, based on TypeScript which is compiled to JavaScript.

The Angular 8 architecture consists of the following:

Modules
Components
Templates, Directives, Data-Binding
Services and dependency injection
Routing

You can delve deeper into the Angular architecture here in the official documentation. Here’s a quick rundown though:

Modules

Angular NgModules are fundamental to any Angular application. Every Angular app has a root module called AppModule, which bootstraps and launches the app. Modules can call components and services. The default module is app.module.ts.

Components

Components provide us with a class and a view, and are parts of the application. The class is TypeScript based and the view is HTML. All Angular app has at least one component called app.component.ts.

Templates, directives, data-binding

A template combines HTML with Angular markup. The directives provide logic and the binding markup connects the application data with the DOM.

Services and dependency injection

Service classes provide application logic that isn’t tied to a specific view and shared across the app. They are injectable using the @Injectable() decorator. Component classes are kept nice and tidy using dependency injection.

Routing

The Router NgModule provides a service that defines navigation in the app. It works the same way as a browser’s navigation.

Visual Studio 2019 for back-end, VS Code for front-end

While Visual Studio 2019 works very well for back-end as well as front-end, VS Code is actually better for front-end heavy work with frameworks like Angular. I recommend you try VS Code and most instructions for the Angular application in this tutorial, will be for VS Code.

To make front-end and Angular development easier in VS Code, install these extensions. You can do it easiest through the VS Code Extensions module.

There’s obviously a lot more awesome extensions like Beautify and Path Intellisense that makes your development more productive. It’s all up to your preference and style.

In VS Code, make sure you open the folder ClientApp on your disk and work from there.

Add components and services to our Angular app

Let’s continue building the Angular app. First, press Ctrl+C twice in the Node.js command prompt, if you haven’t closed the connection to your app.

Next, let’s add Bootstrap 4 to the application. Execute this command in the Node.js command prompt:

npm install bootstrap --save

Then find the angular.json file and edit the build node to make styles look like this:

The angular.json build node should look like this:

Next up, let’s create our components. We will have three components for our blog application:

BlogPosts — shows all blog posts.
BlogPost — show a specific blog post.
BlogPostAddEdit — add new or edit existing blog post.

To create these components, execute the following commands in the Node.js command prompt:



ng generate component BlogPosts
ng generate component BlogPost
ng generate component BlogPost-AddEdit

Under ClientApp/src/app, the components are now there:

As you can see, we have a .html file, scss file, spec.ts file and component.ts file for each component.

HTML and SCSS are used for the view.
spec.ts is for tests.
component.ts contains our component class and logic.

While we’re at it, let’s create our service as well, using the command prompt:

ng generate service BlogPost

Create a new folder under app and call it services. Move the two generated service files to the folder:

Now let’s leave our components and services and have a look at the app.module.ts file. This is where we import modules and components, declare them and also add providers.

We get a few things for free from the created app. Necessary imports are added and a few modules too. When we add components in the Node.js command prompt, the app.modules.ts file is updated as well. However we don’t get help with everything. For our blog app, we need to manually import some modules on our own and add them. We also need to import and add our service to providers.

Let’s update the file to look like this:

Necessary modules like HttpClientModule and ReactiveFormsModule are imported. AppRoutingModule and AppComponent were already created for us from the beginning.

Just make sure to declare components, add modules to imports and also add our service to providers.

Just one thing on import and export.

TypeScript uses the module concept from EcmaScript 2015. Modules are executed in their own scope and not in the global scope. To make one module’s classes, variables, functions etc visible to other modules, export is used. Also to use some of these from another module, an import is needed.

Setup routing

Open app-routing.module.ts. Here you have the routes setup with no routes configured:

const routes: Routes = [];

Update the file to look like this instead:

We import necessary component and update Routes with paths and tell what components will be loaded in those paths.

{ path: '', component: BlogPostsComponent, pathMatch: 'full' }

This tells us we will load the BlogPostsComponent on the app start page.

{ path: '**', redirectTo: '/' }

This tells us all invalid paths for the application will be redirected to the start page.

Open app.component.html and update the file to look like this:

The <router-outlet></router-outlet> element will be replaced by the correct component and this file will be used for all components in the app.

Now let’s build and run the app again using the ng serve command in the Node.js command prompt. When Node is done compiling, go to http://localhost:4200. The start page will now look like this:

This is our BlogPostsComponent in action. Try browsing to http://localhost:4200/add as well and you’ll get the view for our BlogPostAddEditComponent.

If you try to browse to a path that doesn’t exist, you’re redirected to the start page again.

Different ways to build and run the application

We have two different ways that we can use to build and run our Angular application:

Node.js command prompt and ng serve.
Visual Studio F5 command and IIS Express.

This is good to know. The simplest thing to do is to just use Visual Studio to build and run our Angular app as well as the back-end. To make the Angular app work, we need to edit Startup.cs to allow SPA static files.

In Startup.cs, we already have commented out configuration for SPA. In the ConfigureServices method, uncomment the services.AddSpaStaticFiles section:

In the Configure method, uncomment the app.UseSpaStaticFiles() line and app.UseSpa() section. Since before, we already have app.UseMvc():

Also, let’s update environment.ts. Add appUrl to the environment constant, it should look like this:

Now in Visual Studio 2019, press F5 and your Angular app AND back-end will be up and running on the same address, on IIS Express:

Whether you want to use the Node.js command prompt to build and run the Angular application is up to you. Just remember the back-end needs to be up and running too.

Visual Studio building and running both the front-end and back-end means one less thing to think about.

Create blog post model and service methods

We need a blog post model to work with in TypeScript. Let’s create a new folder called models and then a TypeScript file(right click the folder -> New file in VS Code) and name it blogpost.ts.

Copy and paste this BlogPost model class into blogposts.ts:

Our BlogPost model will now be available across the application.

Angular 8 service CRUD tasks

Our Angular service will call our back-end and carry out these tasks:

Create blog post.
Show all blog posts / show a single blog post.
Update an existing blog post.
Delete a blog post.

Now let’s go back to our previously created service, located in the services folder. Open blog-post.service.ts and edit the file to look like this:

We already injected the service into the providers array in app.module.ts, meaning the service can be used right away across the application.

Observables in Angular

The Angular HttpClient methods use RxJS observables. Observables provide support for passing messages between publishers and subscribers in your application. They are powerful and have several advantages and are therefore used extensively in Angular.

Observables in the Angular documentation

When we’ve created (published) an observable, we need to use the subscribe() method to receive notifications. We then get a Subscription object we can work with. Also, we can use unsubscribe() to stop receiving notifications.

We make our BlogPostService injectable via the @Injectable() decorator. We will inject the service into our components later.

For our service’s post and put methods, we will send application/json.

Then we use the pipe() method for each service call. Here we can pass in operator functions for data transformation in our observable collection. We add retry and catchError to our pipe method.

It’s very common to subscribe to observables in Angular. This is fine, but you have to remember to unsubscribe too. pipe does that automatically for you, freeing up memory resources and preventing leaks.

Update components to show service data

Over to our three blog components. Let’s start with BlogPostsComponent which will list all our blog posts. Update the file blog-posts.component.ts to look like this:

We dependency inject BlogPostService in the constructor and in loadBlogPosts() we simply call our Angular service.

Since the service getBlogPosts() method gives us an Observable<BlogPost[]> back, we assign it to this component’s blogPost$ object. It’s common practice to name observable objects with a $ sign at the end.

In the delete() method we need to subscribe to our observable instead to execute the action and then reload the blog post list.

Now open blog-posts.component.html and update it to look like this:

We use the AsyncPipe to subscribe to our observables. When we want to display our observable value in our HTML template file we use this syntax:

(blogPosts$ | async)

ngIf and ngFor are structural directives which change the DOM structure by adding or removing elements.

The routerLink directive lets us link to specific routes in our app.

You can press F5 in Visual Studio 2019 or use the Node.js command prompt and ng serve to launch the app. If you use Node.js to launch the app, make sure the back-end is launched as well in the background (using Visual Studio F5 command).

Since we’ve manually added a blog post in Postman before, we should now see this:

Excellent!

Next up is blog-post.component.ts to view a single blog post. Edit the file to look like this:

As it’s a single blog post we want to show, we fetch the id key from the url querystring with the built in ActivatedRoute component, and pass it to the service getBlogPost() method.

Now open blog-post.component.html and edit it to look like this:

We use the AsyncPipe again and also use the alias blogPost so we don’t have to write blogPost | async everywhere we want to access a blogPost property. We also provide a loading screen.

We’re getting closer. Now we just need a way to create new blog posts and edit existing ones. Open blog-post-add-edit.component.ts and edit it to look like this:

Here we’re introducing Angular forms: FormBuilder, FormGroup and also Validators.

Depending on if we’re creating a new blog post or editing an existing one, we use actionType to show the correct form view with or without data. When we save or update a blog post, we create a new BlogPost object which we then fill with correct form data and then post to our service.

Let’s open the blog-post-add-edit.component.html and edit it to look like this:

Here’s the form with validation.

We’re done!

Press F5 in Visual Studio 2019 or use the Node.js command prompt and ng serve to browse our final app. (If you use Node.js to launch the app, make sure the back-end is launched as well in the background (using Visual Studio F5 command))

Build a Simple CRUD App with Angular 8 and ASP.NET Core 2.2 - part 1 - back-end

Martin Soderlund Ek — Wed, 18 Sep 2019 08:31:30 +0000

Part 1 - back-end with ASP.NET Core 2.2 and Entity Framework Core

Let’s take a look at how to build a CRUD web app using ASP.NET Core 2.2, Entity Framework Core, and Angular 8. This is part 1 where we focus on the back-end.

Part 2 is here - Angular 8 app with REST API

We’ll have a REST API in the back-end and the Angular app on the front-end.

The basic CRUD app will be a blog, where we can Create, Read, Update, and Delete blog posts.

Github repo is here: Angular 8 blog app tutorial using .NET Core 2.2 and Entity Framework back-end

Prerequisites

For the Angular front-end we'll also use:

Make sure above are installed. We will use Visual Studio 2019 for the back-end and VS Code for the front-end. You can however use only Visual Studio 2019 if you want to.

As of Sept 15th, there are previews of .NET Core 3 that work with previews of Visual Studio 2019. However, in this tutorial we won’t use any previews and only use fully released versions of .NET Core 2 and Visual Studio 2019.

Create ASP.NET Core 2.2 REST API

In Visual Studio 2019, create a new project and choose ASP.NET Core Web Application. Name our project (Blog). Then choose .ASP.NET Core 2.2 version and the API template:

Add models and Entity Framework Database Context

Next up, let’s create a folder called Models, and then add a class file called BlogPost.cs. Make sure to import necessary namespaces.

Then create an API controller — right click the Controllers folder, choose Add -> Controller. Then choose API controller with actions, using Entity Framework.

Choose BlogPost as Model class.
Under Data context class, press the + button and call the context BlogPostsContext.

When you press Add, Visual Studio will add the necessary NuGet packages and create a new database context, BlogPostContext, in the Data folder. You will also have the BlogPostsController created for you, filled with lots of API methods.

The contents of BlogPostsContext.cs:

The contents of newly created BlogPostsController.cs, our ApiController:

This is fully working code, with route configuration, all CRUD operations and correct HTTP verbs using annotations (HttpPost, HttpGet, HttpPut, HttpDelete). We also force our API to serve JSON, using the [Produces("application/json")] filter.

We’re following the best practices for REST APIs, as we use GET for listing data, POST for adding new data, PUT for updating existing data, and DELETE for deleting data.

Note that the BlogPostContext is dependency injected. This context is used to perform all actions needed for our app’s back-end.

We can however improve this a little bit, using the Repository design pattern to create a data repository, and inject it.

Create a data repository

Our existing code works, however as applications grow, it’s better to split the logic into different layers:

Data layer with the data repository that communicates with the database.
Service layer with services used to process logic and data layer communication.
Presentation layer with only the API controller.

For our application, we will have an API controller which communicates with the data repository. Let’s create the repository.

Right click the Data folder and create a new interface called IDataRepository. Copy and paste this code into IDataRepository.cs:

Then right click the Data folder again and create a new class called DataRepository. Copy and paste this code into DataRepository.cs:

As you can see, we have dependency injected the BlogPostContext into our DataRepository class.

Update BlogPostsController to use the data repository

Replace the code in BlogPostsController with the following:

You can see the data repository in action in the PutBlogPost, PostBlogPost and DeleteBlogPost methods, like this:

We however choose to keep our dependency on BlogPostsContext in the controller, using both the context and data repository.

CORS in app configuration

In Startup.cs, you already can see some configuration — our app will use MVC and have a db context for instance. Update the ConfigureServices method to look like this:

Since we’re going to call our REST API from JavaScript, we need to enable CORS. We will use a default policy.

Also, we register our DataRepository here.

Make sure to import necessary namespaces.

Note that we’ve commented out services.AddSpaStaticFiles(). We will uncomment this when we’ve created the Angular application, but we’re not there yet.

Then update the Configure method to look like this:

UseCors must come before UseMvc here. Don’t forget to import the necessary namespaces.

We’ve commented out SPA specific configuration here. We will uncomment app.UseSpaStaticFiles() and app.UseSpa() later, when we’ve created our Angular application.

Let’s also update launchSettings.json to set launchUrl to empty in two places:

"launchUrl": “”

Also delete ValuesController.cs in the Controllers folder.

Setup migrations and create the database

We’re almost there!

Now that we have the BlogPostsContext and use the code first approach for Entity Framework, it’s time to setup migrations. First, let’s take a look at the database connection string in appSettings.json.

The connection string was created for us earlier and the app will use SQL Server Express LocalDb. You can, of course, use your own instance of SQL Server instead, just make sure the connection string is correct!

To enable migrations, open the Package Manager Console (Tools->NuGet Package Manager->Package Manager Console) and run this command:

Add-Migration Initial

We’ll get this message back:

Microsoft.EntityFrameworkCore.Infrastructure[10403]

Entity Framework Core 2.2.6-servicing-10079 initialized 'BlogPostsContext' using provider 'Microsoft.EntityFrameworkCore.SqlServer' with options: None

To undo this action, use Remove-Migration.

Perfect! A Migrations folder is created with your Entity Framework migrations, which will contain changes to the Entity Framework model. We have one migration file, named something like 20190912150055_Initial.cs

In this file, we have the Up and Down methods, which will upgrade and downgrade the database to the next or previous version.

To create the database, we now have to execute the following command in the Package Manager Console:

Update-Database

Let’s open the SQL Server Object Explorer (View -> SQL Server Object Explorer). We now have this:

Remember, if you make any changes to the data model, you need to use the Add-Migration YourMigrationName and Update-Database commands to push changes to the database.

Try the API

Press F5 in Visual Studio to start the application. On localhost, browse to /api/blogposts which should return an empty JSON string. You can now use Postman to create a new blog post.

Here’s the JSON to post:

{
  "dt": "2019-09-12T18:18:02.190Z",
  "creator": "Martin",
  "title": "Test",
  "body": "Testing"
}

In Postman, make sure the API URL is correct and POST is used as the http verb. Fill in above JSON in the editor (choose raw) and choose JSON (application/json) before you press Send. The request and returned body result should look like this:

And if you change http verb from POST to GET, you’ll now get this result:

Our API is up and running!

Now on to our Angular 8 front-end app. Here's part 2 of the tutorial. Part 2 is here - Angular 8 app with REST API