How to get webpack and iis express to work together?

Question

I have Angular 2 and Webpack 2 starter which run on node by webpack-dev-server, and I what to run it from visual studio with web-api.

The problem is when angular2-webpa

Answer 1

The accepted answer is for version 1. If you are using version 2 you can use a vue template to get you started.

Based on the existing vue-templates I made a vue template you can install with vue-cli. This template jumpstarts you for a vue application you can extend with or integrate in you existing environment.

npm install -g vue-cli
vue init delcon/webpack-simple
cd my-project
npm install

devwatch:

This template has an additional run devwatch option that watches for filechanges instead of using the webpack-dev-server. This makes it usable for any existing webserver enviroment. It uses livereload to update your browser on changes.

npm run devwatch

dev:

to run it with the default webpack-dev-server, remove <script src="http://localhost:35729/livereload.js"></script> in index.html:

npm run dev

build:

to build your project for production:

npm run build

Answer 2

In my ASP .NET Core 2.2 Vue JS SPA, running with IIS Express (instead of "Project") said HMR Connected in web console but no changes actually getting received and updated...

Not sure why but issue was to do with the hosting model so I just modified the .csproj as below and it worked fine thereafter:

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
    <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>
  </PropertyGroup>

Answer 3

I found it ! - Combining with an existing server Summary and example:

You may want to run a backend server or a mock of it in development. You should not use the webpack-dev-server as a backend. Its only purpose is to serve static (webpacked) assets.

You can run two servers side-by-side: The webpack-dev-server and your backend server.

In this case you need to teach the webpack-generated assets to make requests to the webpack-dev-server even when running on a HTML-page sent by the backend server. On the other side you need to teach your backend server to generate HTML pages that include script tags that point to assets on the webpack-dev-server. In addition to that you need a connection between the webpack-dev-server and the webpack-dev-server runtime to trigger reloads on recompilation.

To teach webpack to make requests (for chunk loading or HMR) to the webpack-dev-server you need to provide a full URL in the output.publicPath option.

To make a connection between webpack-dev-server and its runtime best, use the inline mode with --inline. The webpack-dev-server CLI automatically includes an entry point which establishes a WebSocket connection. (You can also use the iframe mode if you point --content-base of the webpack-dev-server to your backend server. If you need a websocket connection to your backend server, you’ll have to use iframe mode.

When you use the inline mode just open the backend server URL in your web browsers. (If you use the iframe mode open the /webpack-dev-server/ prefixed URL of the webpack-dev-server.)

https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

Answer 4

I had the same dilemma and solved it just by using the proxy option in the webpack dev server config:

module.exports = {
    devServer: {
        contentBase: './dist', /* output folder */
        proxy: {
            '/api': {                                 /* I had only to track calls to api, change path to one you need*/
                target: 'http://localhost:15536/'     /* specify your correct IIS port here */
            }
        }
    },
/*other configurations here*/
}

After code is in place, just run the VS project and start WebPack Dev server alongside. Now all the calls from the app will be redirected to your ASP.NET server.

Let me know if any questions.