ngx-admin with Asp.net Core 2.0, possibly plus OrchardCore

1

Download ngx-admin from https://github.com/akveo/ngx-admin

2

Create a new Web Application in vs2017 through file->new->project->Select .Net Core->Select ASP.NET Core Web Application and Next->Select Empty Template(Not Angular) and OK

Now you have a .net core app and a ngx-admin app in different folders. Presume:

ngx-admin in D:\test\ngx-admin

asp.net application solution in D:\test\WebApplication1 and there's a project named WebApplication1 in D:\test\WebApplication1\WebApplication1

3

Copy all contents in D:\test\ngx-admin into D:\test\WebApplication1\WebApplication1. Yes only the contents, not the entire folder.

Don't panic. Although looks quite a mess in the .net core project folder now, you'll soon get along with it because your other modules of the .net core application don't have to stay in the same folder.

4

Open Webapplication1.sln using vs2017. Open Startup.cs and modify Configure method as below:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env) {

      if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
      }

      app.Map("/admin", appNgxAdmin => {
        appNgxAdmin.UseSpa(spa => {
          spa.Options.SourcePath = "src";
          if (env.IsDevelopment()) {
            spa.UseAngularCliServer(npmScript: "start");
          }
        });
      });

      app.UseMvc();
    }

Modify ConfigureServices method as below:

    public void ConfigureServices(IServiceCollection services) {
　　　　services.AddMvc();
      // In production, the Angular files will be served from this directory
      services.AddSpaStaticFiles(configuration => {
        configuration.RootPath = "dist";
      });
    }

Now you'll see several errors. Install Microsoft.AspNetCore.SpaServices.Extensions package through nuget. Get rid of the rest errors by adding using Microsoft.AspNetCore.SpaServices.AngularCli;

5

Open package.json, modify these 2 lines:

    "start": "ng serve --base-href=/admin/ --serve-path=/",
    "build": "ng build --base-href=/admin/ --serve-path=/",

Save and right click package.json -> Restore Packges

Now try to run in vs2017 using IIS Express. Should show a blank page and if you go /admin , ngx-admin should already be working.

But there's a problem with some sockjs issue if you look at chrome dev-tool. I don't know why but could be an issue with Angular-cli earlier version which uses webpack-dev-server below v3. If you know how to solve it much appreciated if you can let me know.

Another issue is sometimes the browser complains 500 server error. Kindly let me know if you have the remedy.

It's normally not satisfying you yet. To make the whole thing working the backend controllers or alternatives are needed.

6

Notice we have services.AddMvc() and app.UseMvc() in place already which enables using controllers.

Create a Controllers folder under WebApplication1 project. Create a HomeController.cs class within it, with the content below:

using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
  [Route("api/[controller]")]
  public class HomeController : Microsoft.AspNetCore.Mvc.Controller {
    [HttpGet]
    public IActionResult Get() {
      return Ok("Hello WebApplication1!");
    }
  }
}

Now run the project and visit /api/home should show Hello WebApplication1! in the browser.

The very basic procedure is done. To work on both backend and frontend in a sigle IDE is the harmony.

For more info about how to setup MVC in Asp.Net Core, here's an official link to go: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/startup

The default Mvc setup only allows you to use controllers within the project. If you prefer putting your controllers in different modules and leave only the Spa app(s) here in the main project(the "host" app) Orchard Core provides utilities with full flexibility.

To use Orchard Core utilities, for the moment I'm writing this article, a myget.org source has to be configured to nuget in vs2017(by clicking the configure icon next to the package source selector): https://www.myget.org/F/orchardcore-preview/api/v3/index.json

For WebApplication1 project, install OrchardCore.Application.Mvc.Targets , OrchardCore.Module.Targets (edit: and OrchardCore.Mvc.Core) packages through myget. Don't forget to check "Including Pre-release" because the utilities are still in beta versions.

Modify Startup.cs -> Configure method:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env) {

      if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
      }

      app.Map("/admin", appNgxAdmin => {
        appNgxAdmin.UseSpa(spa => {
          spa.Options.SourcePath = "src";
          if (env.IsDevelopment()) {
            spa.UseAngularCliServer(npmScript: "start");
          }
        });
      });
　　　 //app.UseMvc();
      app.UseModules(); edit: later version UseOrchardCore();
    }

Yes only the last line changed. Modify ConfigureService method:

    public void ConfigureServices(IServiceCollection services) {
　　　　// services.AddMvc();
         services.AddModules(); edit: later version services.AddOrchardCore().AddMvc();
      // In production, the Angular files will be served from this directory
      services.AddSpaStaticFiles(configuration => {
        configuration.RootPath = "dist";
      });
    }

Just the first line is changed.

Now create a .NET Standard Class Library(.NET Standard) project named MyControllers under your WebApplication1 solution.

Install OrchardCore.Application.Mvc.Targets and OrchardCore.Module.Targets packages for this project.

Create a class named MyController.cs under MyControllers project with the content:

using Microsoft.AspNetCore.Mvc;

namespace MyControllers
{
  [Route("api/[controller]")]
  public class MyController : Microsoft.AspNetCore.Mvc.Controller {
    [HttpGet]
    public IActionResult Get() {
      return Ok("Hello MyControllers!");
    }
  }
}

Add reference to MyControllers project in WebApplication1 project.

Run and visit /api/my you should see Hello MyControllers! in the browser.

That's it. Simple and neat. How to link ngx-admin with the api is out of scope here. Guess shouldn't be a big issue.