HMR not working with vue and asp.net core

Question

Hi I'm new to webapck and vue, I am trying to get hot module reloading to work so that my page updates with changes. At the moment it work when I ctrl f5 the page.

I'm using an asp.net core site that runs the site through IIS if that makes a difference.

I used this answer to get vue up and running:

https://stackoverflow.com/a/49428220/66975

Heres my webpack.config.js:

    const { VueLoaderPlugin } = require('./node_modules/vue-loader')
module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './wwwroot/js/bundle.js'//'./Vue/dist/bundle.js'
    },
    watch: true,
    plugins: [
        new VueLoaderPlugin()
    ],
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};

Package json:

{
  "name": "WebApplication13",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^15.2.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.12.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

Answer 1

I know it's a bit late, but it's relatively easy to set up HMR with Asp.net Core projects.

First in your package.json you only have to add these 2 packages.

"aspnet-webpack": "^3.0.0", 
"webpack-dev-middleware": "^3.1.3"

Aspnet-webpack, needs to be added to use webpack in conjuction with Aspnet.

Secondly, in your asp.net core project you gotta use the Nuget Package Microsoft.AspNetCore.SpaServices (In a Asp.net Core 2.1 this seems to be included by default via the Microsoft.AspNetCore.All package)

Finally, simple add the following to your Configure method inside your Startup.cs (or equivalent).

if (env.IsDevelopment())
{    
    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
    {
        HotModuleReplacement = true
    });
}

(We only want to enable HMR when we're developing)

Also going to link this, more specifically this part:

If you want to use the UseWebpackDevMiddleware helper with HotModuleReplacement, then don't put anything about HMR in your Webpack config, because the helper code adds that dynamically. For example, don't put webpack.HotModuleReplacementPlugin() in your config.

Hope this will help!

Answer 2

If you're using Vue for the front end and .Net Core 3.1 for the backend this should help you. I wasn't able to get HMR working from IIS but if you run IIS to start up your backend and then run the Vue part only on a different port you can proxy all calls to your backend and have the app fully functional with HMR that way. So in startup.cs you're going to want to add

    app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");

                if (env.IsDevelopment())
                {
                    endpoints.MapToVueCliProxy(
                        "{*path}",
                        new SpaOptions { SourcePath = "ClientApp" },
                        npmScript: "serve",
                        port: 8000,
                        regex: "Compiled successfully");
                }

                // Add MapRazorPages if the app uses Razor Pages. Since Endpoint Routing includes support for many frameworks, adding Razor Pages is now opt -in.
                endpoints.MapRazorPages();
            });


            app.UseSpa(spa =>
            {
                    spa.Options.SourcePath = "ClientApp";
            });

and include these packages at the top as well

  using Microsoft.AspNetCore.SpaServices;
using VueCliMiddleware;
using Microsoft.AspNetCore.SpaServices.Webpack;

Then create a vue.config.js in the root of your ClientApp folder and in there put

  module.exports = {
    devServer: {
        proxy: "https://localhost:44354",
        host: "localhost",
    }
 }

Of course the value for proxy is going to be the URL that comes up when you start IIS. So now if you start your IIS and then in a terminal from your client app run npm run serve your Client app will now be able to proxy calls to your backend and you will have HMR up and working. For most people this will work fine but one problem I ran into is errors being thrown from each end and cookies not being set this way and a few other problems. The problem all revolves around your IIS being ran on HTTPS and your webpack dev server being ran on HTTP. So the way I solved this is to add another script to my package.json like so

"dev": "vue-cli-service serve --https --port 8082"

So now when you start your IIS it will run the command of npm run serve which will provide no https, which is what you want. Then from your ClientApp folder run npm run dev which will provide you with HTTPS on your front end. But there is one more problem now, when you open localhost from your front end chrome will throw an error saying this site is not safe and then you have to click advanced and choose to proceed. So errors will still be thrown and cookies won't be set. What I did was go into VS code and created a new file called Localhost.cer. Then in your browser at the top left where that error is being thrown about not being secure(it's in red) click on that then go to details. Then I think its save files or import files or something like that click on that then the certificate wizard should pop up and your going to want to save that file as a whole to the Localhost.cer that you previously created. Then go to google settings up at the top search for certificates. Privacy and security should pop up then click more. Then click manage certificates, then click trusted root certification authorities and import that Localhost.cer file up there. That will get rid of the error that pops up.