How can you proxy to SPA development server when serving Vue.JS SPA from ASP.NET Core running on Docker?

  asp.net, c#, docker, vue.js

I’m trying to develop a Vue.JS SPA and serve it using an ASP.NET Core core application which runs in a Docker container, while retaining the ability to have the SPA auto-update when I make changes to the code in Visual Studio 2019.

I notice that .UseProxyToSpaDevelopmentServer() is provided through ISpaBuilder when configuring the app.UseSpa() call within Startup.Configure(), seemingly for this purpose, but I’m not sure how to start the development server correctly while the solution is running in a Docker container.

While researching, I came across a great blog post by KazukiOta on the Microsoft Tech Community explaining how to launch the Vue dev server before returning the development server endpoint to .UseProxyToSpaDevelopmentServer() which probably works well in the context of the development machine but doesn’t translate to containers as it would launch the dev server process within the container which is running an immutable image.

Is there a way to configure the project so that requests are proxied from the Docker container to a dev server running on the host machine during development or do I have the wrong end of the stick?

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddSpaStaticFiles(configuraiton =>
    {
        configuraiton.RootPath = "wwwroot";
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory, IAntiforgery antiforgery)
{
    ...

    app.UseDefaultFiles();
    app.UseStaticFiles();

    if (!env.IsDevelopment())
    {
        app.UseSpaStaticFiles();
    }

    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapControllers();
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "client";
        if (env.IsDevelopment())
        {
           /* See: [https://techcommunity.microsoft.com/t5/windows-dev-appconsult/how-to-integrate-vue-js-and-asp-net-core-using-spa-extension/ba-p/698648]
            * Starts a shell process with argument "npm run serve" targeting "client" folder in the project
            * and returns http://localhost:8080 within .UseProxyToSpaDevelopmentServer(Func<Task<Uri>>)
            *
            * Could this be adapted to handle containerized environments?
            */
            spa.UseVueDevelopmentServer();
        }
    });
}

SPA Source & Distribution Folders

Vue.JS source located in client folder, build output is wwwroot

wwwroot & client folders

Source: Docker Questions

LEAVE A COMMENT