ServiceStack Nuxt.js SPA and ImageSharp.Web integration

Question

I am migrating my project from Asp.Net MVC to ServiceStack Nuxt.js SPA and one thing that I used on MVC was ImageProcessor.Web to manipulate images on the fly

I am now trying to use ImageSharp.Web with Azure blob on ServiceStack Nuxt.js template.

I registered service in ConfigureServices

  services.AddImageSharp()
                .SetRequestParser<QueryCollectionRequestParser>()
                .Configure<AzureBlobStorageImageProviderOptions>(options =>
                {
                    // The "BlobContainers" collection allows registration of multiple containers.
                    options.BlobContainers.Add(new AzureBlobContainerClientOptions
                    {
                        ConnectionString = "DefaultEndpointsProtocol=https;AccountName=storage1;AccountKey=*****;EndpointSuffix=core.windows.net",
                        ContainerName = "blob"
                    });
                })
                .SetCache<PhysicalFileSystemCache>()
                .SetCacheHash<CacheHash>()
                .AddProvider<AzureBlobStorageImageProvider>()
                .AddProcessor<ResizeWebProcessor>()
                .AddProcessor<FormatWebProcessor>()
                .AddProcessor<BackgroundColorWebProcessor>();

and also in Configure

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


        app.UseServiceStack(new AppHost
        {
            AppSettings = new NetCoreAppSettings(Configuration)
        });


        app.UseImageSharp();

But I cant get image on

http://localhost:3000/blob/media/picture.jpg

How can I enable ImageSharp.Web to intercept calls to /blob route in this scenario ?

Also is it possible to use Azure blob for cache so no files are stored locally ?

Thanks in advance

Answer 1

In ServiceStack's vue-nuxt template, the nuxt Webpack dev server runs on http://localhost:3000 which proxies API Requests to the ASP.NET Core server runs on https://localhost:5001.

So to ensure if your /blob route is working first check if it's accessible from your ASP.NET Core server, e.g:

https://localhost:5001/blob/media/picture.jpg

If it is you'll need to register an additional dev proxy route in your nuxt.config.js to forward all /blob/* requests to your ASP.NET Core server, e.g:

  proxy: {
    '/json': {
      target: 'https://localhost:5001/',
      secure: false
    },
    '/auth': {
      target: 'https://localhost:5001/',
      secure: false
    },
    '/metadata': {
      target: 'https://localhost:5001/',
      secure: false
    },
    '/css': {
      target: 'https://localhost:5001/',
      secure: false
    },
    '/blob': {
      target: 'https://localhost:5001/',
      secure: false
    },
  },

If your https://localhost:5001/blob/* API requests isn't being served by ImageSharp then you'll need to register its middleware handler to have higher preference by registering it before ServiceStack, e.g:

app.UseImageSharp();

app.UseServiceStack(new AppHost
{
    AppSettings = new NetCoreAppSettings(Configuration)
});