Search code examples
webpackwebpack-dev-serverwebpack-4visual-studio-2019asp.net-core-2.2

ASP CORE and webpack in VS2019: how to configure IIS Express to proxy js/css requests to webpack devserver?


Code like this

<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link rel="stylesheet" href="~/dist/main.css" asp-append-version="true" />

started on IIS Express requests the files using IIS Express port, when I need return those files from webpack devserver that works on another port.

There is an article how to "switch" configurations and "put" required port to <link> and <script> references, but here should be much more easy to instruct IIS Express (or self hosted ASP Core app) to proxy requests for css and js.

Unfortunatly this doesn't work (has no effect):

<system.net>
    <defaultProxy>
      <proxy
        proxyaddress="http://localhost:55510"
        bypassonlocal="false"
      />
      <!--<bypasslist>
        <add address="^((?!\/dist\/).)*$" />
      </bypasslist>-->
    </defaultProxy>
  </system.net>

How to configure IISEXpress or (selfhosted app) to proxy requests for /dist/*.js and /dist/*.css to the webpack devserver?

PS It seems those developers who are working with VS+webpack/devserver prefer to configure webpack devserver to proxy requests for html/json/images/fonts to IISExpress (solving the same way but from another end). Why?


Solution

  • "Just write the middleware that do the proxy"

    solves it.

    I have create nuget package for it: DashboardCode.AspNetCore.Http

    GitHub: https://github.com/DashboardCode/AspNetCore

    First add this to the Startup.cs

    using DashboardCode.AspNetCore.Http;
    

    Then add this to Startup.ConfigureServices():

    serviceCollection.AddSingleton( new DevProxyMiddlewareSettings(new PathString("/dist"), new Uri("http://localhost:55555")));
    

    Then add this to the Startup.Configure:

    app.UseMiddleware<DevProxyMiddleware>();
    

    After this all GET requests like http://localhost:xxxx/dist/sample.js will be redirected to the http://localhost:55555/dist/sample.js

    What is nice, it works for both cases: self-hosted and IISExpress hosted application.