Alessandro Ciurlo
Alessandro Ciurlo

Reputation: 122

Import Cornerstone3D library in ASP.NET Core web application

Premise: I have successfully integrated the legacy cornerstonehttps://github.com/cornerstonejs/cornerstone library into an ASP.NET Core 6.0 project.

Now I try to switch to cornerstone3D but it is a big challenge. I read the Migration Guides but I didn’t find any answer for my case.

However I try to import in my project cornerstone3D in the same way that I have done for the legacy cornerstone. So:

I have imported in my libs cornerstone3D via unpkg https://unpkg.com/@cornerstonejs/[email protected]. At the end I have cornerstone lib under wwwroot\lib\cornerstonejs\core.

In the legacy version of the library I have just to import cornerstone.min.js in this way to use the library in my html (razor) pages... and this works!

With the new version I don't really know how to perform the same action, or better to make available the library in my html pages. If I have understood cornerstone3D is distributed in 3 ways: cjs, esm, udm. I think the best for me is esm (ECMAScript) however I have also tried the others without success.

  1. I try to import index.js or renderingengine.js but I face these issues, and I get this error

    Cannot use import statement outside a module

    and it's ok!

  2. I fix this problem in this way, but I get many 404 errors like

    Failed to load resource: the server responded with a status of 404

    I think this is because import clause inside the library are written in this way (I don't want to say it is wrong I just want to say that my server cannot handle this syntax):

     import * as Enums from './enums'
    

    instead of './enums/index.js'

    or

     import eventTarget from './eventTarget'; 
    

    instead of './enums/index.js'

  3. I have tried to fix this problem modifying my server, I write a dedicated middleware which can redirect the request to the correct path: in simple terms when request ask for ./enums response is ./enums/index.js

    Here is the code of the middleware just for completeness

    public class FileRedirectMiddleware
    {
        private readonly RequestDelegate _next;
        private readonly IWebHostEnvironment _webHostEnvironment;
    
        public FileRedirectMiddleware(RequestDelegate next, IWebHostEnvironment webHostEnvironment)
        {
            _webHostEnvironment = webHostEnvironment;
            _next = next;
        }
    
        public async Task Invoke(HttpContext context)
        {
            if (context.Request.Path.Value!.Contains("cornerstonejs") )
            {
                var fixpath = context.Request.Path.Value!.Replace("//", "/");
                fixpath = fixpath.Replace("/", "\\");
                fixpath = fixpath.TrimStart('\\');
    
                string path = Path.Combine(_webHostEnvironment.WebRootPath, fixpath);
                if (!File.Exists(path))
                {
                    if (Directory.Exists(path))
                    {
                        context.Response.Redirect(context.Request.Path + "/index.js");
                        return;
                    }
                    else
                    {
                        context.Response.Redirect(context.Request.Path + ".js");
                        return;
                    }
                }
            }
            await _next(context);
        }
    }
    

    and I have registered it in the message pipe

    var builder = WebApplication.CreateBuilder(args);
    
    // Add services to the container.
    builder.Services.AddControllersWithViews();
    
    var app = builder.Build();
    app.UseMiddleware<FileRedirectMiddleware>();
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    

    It doesn't work because I see that browser hangs indefinitely trying to load the page

  4. I have tried, I'm ashamed of this because it’s really bad, to modify library just to see if the problem is in the middleware I have implemented, in order to have the correct paths in import directive but I get the same result: browser hangs indefinitely trying to load the page

In my opinion my approach is completely wrong. I ask if there is a proper way to import cornestone3D in an ASP.NET Core web application or if someone have faced the same issue and solved in some way.

Upvotes: 0

Views: 108

Answers (0)

Related Questions