Dfyjkt

I am looking for guidance with respect to the following technologies and how best to integrate/setup moving forward concerns...

We have a number of existing web applications using asp.net and asp.net core. We want to update and move them forward taking advantage of more current JavaScript frameworks vue/angular. At this current moment, we are going with vue as we feel it is the easiest jump considering our current knockout based framework. These questions/concerns are similar regardless of the particular javascript framework under consideration

Currently we are using the framework respective cli tools, build the project/solution then copy the ClientApp into the same named folder in vs.net (then update the startup.cs) to integrate with hmr technology.

1. Considerations...is it best to jump into full spa type approaches and entirely just move away from page level coding? While this may be best for learning, we do need ways to migrate existing applications without entire rewrites. Can the 2 approaches live easily within the same solution (we are migrating to vue at this moment). Are there git repositories showing this combined approach?
   I believe the best answer is a combination. One solution where routes can use historic mvc routing to a controller/method and view while others can route to individual spa pages together. I have yet to find a repository that demonstrates this combination. Potentially there is a good reason why it is difficult to locate.



2. 
   

   With respect to vue.js we have modified the Startup.cs to rely on vue cli 3 vue-cli-service to server up our page

   
   
   

   app.UseSpa(spa => spa.Options.SourcePath = "ClientApp"; 
   if (env.IsDevelopment())
   
    //spa.UseReactDevelopmentServer(npmScript: "start"); 
    // run npm process with client app
    spa.UseVueCli(npmScript: "serve", port: 8080);
    // if you just prefer to proxy requests from client app, use proxy to SPA dev server instead,
    // app should be already running before starting a .NET client:
    // spa.UseProxyToSpaDevelopmentServer("http://localhost:8080"); // your Vue app port
    );
   

   
   

I have also seen solutions where they have modified the Startup to use app.UseWebpackDevMiddleware directly and pointing at the cli-service/webpack.config.js

 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
 
 HotModuleReplacement = true,
 ConfigFile = Path.Combine(env.ContentRootPath, @"node_modules@vuecli-servicewebpack.config.js")
 );

Both approaches here may work fine, but I question which one we should establish as a best approach. Inherently I feel it is probably best to stay with #1 as it most aligns with the vue cli documentation where using UseWebpackDevMiddleware may just add more confusion to the mix.