11/4/2020 Admin

Configuring The Blazor Oqtane Blog Module


image

In this article we will explore the Blog module for Oqtane, the new web application framework that runs in Microsoft Blazor. There are two methods to create custom modules in Oqtane, inline, and as a separate Visual Studio project. This post will cover creating a separate Visual Studio project.

 

 

Install Oqtane

image

See the article: Installing Blazor Oqtane for instructions on installing Oqtane.

 

Download The Code from GitHub

image

Open Visual Studio.

 

image

Select Clone or check out code.

 

image

Enter https://github.com/oqtane/oqtane.module.blogs for Repository location.

 

image

The Local path can be anywhere you choose, however, by convention if you place the Blog module root folder at the same level as the oqtane framework, then you will not have to modify any folder configuration in the Package project.

 

image

Open the .sln file in Visual Studio.

 

image

The Solution will open in Visual Studio.

 

Build The Project

 image

We want to build the project, to create the NuGet package for the Module, and put that Nuget package in the Module folder of the Oqtane solution (so that Oqtane can load it).

To do this, switch your configuration in Visual Studio to Release and build the solution and it will create the Nuget package for you (the Nuget package is only set to be created when building in Release mode).

 

image

Build the Solution.

 

image

It should Build without errors.

 

image

When we view the \oqtane.framework\Oqtane.Server\wwwroot\Modules directory of the Oqtane solution, we see the NuGet package for the Blog module has been copied to that location.

 

Configure The Module in Oqtane

image

Open the Oqtane.sln in a separate instance of Visual Studio.

Keep the instance of Visual Studio that has the Blog module opened because we will return to it later.

 

image

Hot Ctrl+F5 to run the project.

 

image

Log in as the host account.

 

image

Click the Hamburger menu.

 

image

In the Control Panel, click the Add Page button.

 

image

Enter the settings for a new page and click the Save button.

 

image

Navigate to the page.

 

image

Click on the hamburger menu.

 

image

The Blog module will show up in the Module dropdown list (because it implements the IModule interface in its Module.cs file in its Server project).

Use the settings screen to add the module to the page.

 

image

The Blog module will display on the screen.

Click the pencil icon to edit the Blog module and its settings.

 

image

The page and the Blog module will now be in Edit mode.

 

image

Clicking the settings caret will allow us to manage the Blog module.

 

image

For example, the Manage Settings link will take us to the settings page for the module.

Clicking the Cancel button will close this dialog.

 

image

Click the Add Blog button to create a Blog.

 

image

Enter the information for the Blog and click Save.

 

image

The Blog will display.

Click the Logout button.

 

image

Visitors to the website will now be able to view the Blog.

 

Debugging

image

If you want to debug the Blog module, ensure that you open the Oqtane solution in one instance of Visual Studio, and the external Oqtane module in a separate instance of Visual Studio.

if you compile the solution in the Debug configuration it will automatically copy the DLLs, and static resources ,to the appropriate locations so that when you run Oqtane it will discover them automatically

In the Visual Studio instance that contains the Blog module, select Debug mode.

 

image

Then Rebuild Solution.

 

image

You will see that the .pdb files, required for debugging, have been copied to the Oqtane solution.

 

image

In the Visual Studio instance that contains the Oqtane solution, rebuild the solution, then select Debug, then Start Without Debugging.

Note: To see the latest version of the code, you must close the web browser and perform this step each time the code is changed.

 

image

This will load Oqtane in the web browser.

 

image

In the Visual Studio instance that contains the Blog module, set a breakpoint.

 

image

Select Debug, then Attach to Process.

 

image

Attach to the process that Oqtane is running under.

 

image

Return to the web browser, and navigate to the module.

 

image

When using the module, in the web browser, your break points will be hit, allowing you to debug the module.

 

Package The Module As a NuGet Package

image

Oqtane modules are distributed as Nuget packages.

You can install the module in Oqtane, using Module Management, either by uploading it, or downloading it from Nuget in the Available Modules section (if you first upload the module to Nuget with the tag: Oqtane).

 

Links

Blazor.net

Get started with Blazor

Announcing Oqtane... a Modular Application Framework for Blazor!

www.oqtane.org

Oqtane (GitHub)

Oqtane Custom Module Sample (GitHub)

Debug ASP.NET Core Blazor WebAssembly

An unhandled error has occurred. Reload 🗙