When you buy this book you support this site! - Thank You for your support!

Oct 20

Written by: Michael Washington
10/20/2019 5:45 PM  RssIcon

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.

 

Also see:

 

Install Oqtane

image

See the article: What is 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 .

The Local path can be anywhere you choose.

  

image

Open the .sln file in Visual Studio.

 

image

The Solution will open in Visual Studio.

 

Fix References

image

In each of the following three projects in the Solution, fix the references to the Octane assemblies to point to the location of the Octane project on your computer:

  • Oqtane.Module.Blogs.Client
    • Oqtane.Client - {{ Location of Oqtane on your hard drive }}\Oqtane.Server\bin\Debug\netcoreapp3.0\Oqtane.Client.dll
    • Oqtane.Shared - {{ Location of Oqtane on your hard drive }}\Oqtane.Server\bin\Debug\netcoreapp3.0\Oqtane.Shared.dll
  • Oqtane.Module.Blogs.Server
    • Oqtane.Server - {{ Location of Oqtane on your hard drive }}\Oqtane.Server\bin\Debug\netcoreapp3.0\Oqtane.Server.dll
    • Oqtane.Shared - {{ Location of Oqtane on your hard drive }}\Oqtane.Server\bin\Debug\netcoreapp3.0\Oqtane.Shared.dll
  • Oqtane.Module.Blogs.Shared
    • Oqtane.Shared - {{ Location of Oqtane on your hard drive }}\Oqtane.Server\bin\Debug\netcoreapp3.0\Oqtane.Shared.dll

Note: Replace {{ Location of Oqtane on your hard drive }} with the location, on your computer, that you downloaded Oqtane to.

 

image

You will need to right-click on each reference to remove it…

 

image

Then right-click on Dependencies and select Add Reference to re-add the assembly reference in the correct location.

 

image

In the Reference Manager box that popups, select the Browse section, then the Browse button…

 

image

Navigate to the assembly, select it, then click the Add button.

 

image

Back on the Reference Manager popup, click OK to add the assembly reference.

 

Build the Nuget Package Into the Oqtane Modules Folder

image

We need to update the pack.cmd, that creates the NuGet package, to set the location of the NuGet package so that it ends up in the Module folder of the Oqtane solution (so that Oqtane can load it).

Right-click on pack.cmd and select open.

 

image

Change the destination to the \Oqtane.Server\wwwroot\Modules folder of your Oqtane solution.

 

Build The Project

 image

We want to build the project, create the NuGet package for the Module, and put that Nuget package in the Module folder of the Oqtane solution.

Switch to Release mode (By default, 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.Server/wwwroot/Modules directory of the Oqtane solution, we see the NuGet package for the Blog module have 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 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.

 

Package The Module As a NuGet Package

image

Oqtane modules are distributed as Nuget packages. You can get information on creating those packages at this link:

Quickstart: Create and publish a package (dotnet CLI)

You will need to create a .nuspec file as part of the process. You can see the example the Blog module uses at this link:

https://github.com/oqtane/oqtane.module.blogs/blob/master/Oqtane.Module.Blogs.nuspec

 

image

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

What is Blazor Oqtane?

Blazor.net

Get started with Blazor

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

www.oqtane.org

Oqtane (GitHub)

Oqtane Custom Module Sample (GitHub)

Tags: Blazor , Oqtane
Categories:

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation