Building Modular Components with Orchard Core Framework

Modular Orchard Core Web Applications

YouTube Video

OrchardSkillsYouTubeThumbNailModular

Introduction

The Orchard Core framework was designed with modularity in mind : A modular design can be characterized by functional partitioning into discrete scalable and reusable components.

Orchard-Core-Modular-001

Launch Visual Studio and select "Create a new project".

Orchard-Core-Modular-002

Select "ASP.NET Core Web Application" and click the "Next" button.

Orchard-Core-Modular-003

Enter the project name "OrchardCoreModularMVCWebApplication" and select the "Create" button.

Orchard-Core-Modular-004

Select "Web Application" and press the "Create" button.

Orchard-Core-Modular-005

As you can see, the "OrchardCoreModularMVCWebApplication" project was created.

Orchard-Core-Modular-006

Lets add another project. Right click on the solution, select "Add" then "New Project...".

Orchard-Core-Modular-007

Select "ASP.NET Core Web Application" and click the "Next" button.

Orchard-Core-Modular-008

Enter the project name "OrchardCoreModularEmptyWebApplication" and press the "Create" button.

Orchard-Core-Modular-009

Select "Empty" and the press the "Create" button.

Orchard-Core-Modular-010

As you can see, the "OrchardCoreModularEmptyWebApplication" was created.

Orchard-Core-Modular-011

Lets add another project. Right click on the solution, select "Add" then "New Project...".

Orchard-Core-Modular-012

Select "Class Library (.NET Core)" and click the "Next" button.

Orchard-Core-Modular-013

Enter "OrchardCoreModualLibrary" for the project name and click the "Create" button.

Orchard-Core-Modular-014

Lets add another project. Right click on the solution, select "Add" then "New Project...".

Orchard-Core-Modular-015

Select "ASP.NET Core Web Application" and click the "Next" button.

Orchard-Core-Modular-016

Enter "OrchardCoreModualWebAPI" for the project name and click the "Create" button.

Orchard-Core-Modular-017

Select "API" and press the "Create" button.

Orchard-Core-Modular-018

As you can see the projects were created.

Orchard-Core-Modular-019

Lets add a new item to the solution. Right click on the solution, select "Add" and then "New Item...".

Orchard-Core-Modular-020

Lets add a "Text File" and select the "Add" button.

Orchard-Core-Modular-021

Right click on the "TextFile.txt" and select "Rename".

Orchard-Core-Modular-022

Note: Orchard Core changed the Orchard Preview Feed.

Rename it to "NuGet.config". Add the following text:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <clear />
    <add key="nuget.org" value="https://www.nuget.org/api/v2/" />
  </packageSources>
  <activePackageSource>
    <add key="All" value="(Aggregate source)" />
  </activePackageSource>
</configuration>

Orchard-Core-Modular-023

Exit Visual Studio. You can press the "X" (Close) in the upper right corner.

Orchard-Core-Modular-024

Restart Visual Studio and Select the OrchardCoreModualMFCWebApplication" solution.

Orchard-Core-Modular-025

Visual Studio reloaded the solution.

Orchard-Core-Modular-026

Click on the "OrchardCoreModularLibrary" modify the project to the following:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <OutputType>Library</OutputType>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="OrchardCore.Module.Targets" Version="1.0.0-rc2-13450" />
  </ItemGroup>

</Project>

Orchard-Core-Modular-027

Modify the "Startup.cs" file to:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Routing;

namespace OrchardCoreModularLibrary
{
    public class Startup
    {
        public void Configure(IEndpointRouteBuilder endpoint)
        {
            endpoint.MapGet("/ecommerce", async context =>
            {
                await context.Response.WriteAsync("ModularLibrary!");
            });
        }
    }
}

Orchard-Core-Modular-028

Select "Build" then "Build OrchardCoreModularLibrary".

Orchard-Core-Modular-029

Project built successfully.

Orchard-Core-Modular-030

Select the "OrchardCoreModularEmptyWebApplication" project. Modify it to the following:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="OrchardCore.Application.Targets" Version="1.0.0-rc2-13450" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\OrchardCoreModularLibrary\OrchardCoreModularLibrary.csproj" />
  </ItemGroup>

</Project>

Orchard-Core-Modular-031

Click on the "Startup.cs" file. Modify it to the following:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace OrchardCoreModularEmptyWebApplication
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddOrchardCore();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Hello World!");
                });
            });

            app.UseOrchardCore();
        }
    }
}

Orchard-Core-Modular-032

Select "Build" then "Build OrchardCoreModularEmptyWebApplication".

Orchard-Core-Modular-033

Build was successful.

Orchard-Core-Modular-034

Run the application by clicking on the green play button.

Orchard-Core-Modular-035

Congratulations your app is running.

Orchard-Core-Modular-036

Right click on "Dependencies" and then "Add Reference...".

Orchard-Core-Modular-037

Click on "OrchardCoreModularLibrary" to enable it and then press the "OK" button.

Orchard-Core-Modular-038

Run the application and go to the URL "/ModularLibrary". Congraulations, the ModularLibrary is now integrated.

Orchard-Core-Modular-039

Click on the "OrchardCoreModularWebAPI" project and modify it to the following:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <OutputType>Library</OutputType>
    <IsPackable>true</IsPackable>
    <PackageVersion>1.0.0-rc1-10004</PackageVersion>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="OrchardCore.Module.Targets" Version="1.0.0-rc2-13450" />
  </ItemGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

</Project>

Orchard-Core-Modular-040

Click on "Build" then "Build OrchardCoreModularWebAPI".

Orchard-Core-Modular-041

Build was successful.

Orchard-Core-Modular-042

Select "Build" then "Build OrchardCOreModularMCVWebApplication".

Orchard-Core-Modular-043

Build was successful.

Orchard-Core-Modular-044

Run the application by clicking on the green play button.

Orchard-Core-Modular-045

Congratulations, your Application is running.

Orchard-Core-Modular-046

Select the "OrchardCoreModularMVCWebApplication" project, right click on "dependencies" and "Add Reference...".

Orchard-Core-Modular-047

Clink on both "OrchardCOreModularLibrary" and "OrchardCoreModularWebAPI".

Orchard-Core-Modular-048

Run the application by clicking the green play button.

Orchard-Core-Modular-049

Congradulations, your Application is running.

Orchard-Core-Modular-050

Now browse to "/ModularLibrary". You can see the modular library integrated.

Orchard-Core-Modular-051

Now browse to "/WeatherForcast". You can now see the weather data from the API.

Conclusion

With the Orchard Core modular framework, multiple teams can work on separate modules. The functional of an application can be added to a module. These modules can be toolkits and reused in other applications. A module can contain static assets, scripts, images, middleware, authentication, or user interface such as a dashboard.

GitHub

The complete source code is located here.