Hot Reload with Microsoft WebApi 2 and SPA Vue2

Question

Front-end : VueJs2 (vue-cli webpack) as SPA

Back-end : Microsoft WebApi 2

I can't set up hot reloading on project since Hot Reload launches a node server on a defined port and my WebApi is on different port => cross domain error. (and I can't disable cross domain in IIS)

I know that with Asp.Net Core, there is the NodeServices packages (Nuget and npm) to enable Hot Reloading.

Is there a similar workaround with WebApi 2 ?

Answer 1

You can make it work by adding a proxy in the webpack config. (vue-cli webpack config)

config/index.js

dev: {
env: require('./dev.env'),
port: 52286,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/someExamples': {
    target: 'http://localhost',
    changeOrigin: true,
  },
...
},

build/dev-server.js

var uri = 'http://localhost:' + port + '<path to home>'

var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

Any request made to http://localhost:52286/someExamples will be redirected to http://localhost/someExamples which can be a local website.