Starting a Vue App w/Visual Studio ASP.NET Core 2
I created my Vue project, included it with my ASP.NET Core project. For more information reference my prior post on Vue with ASP.NET Core.
Significant to how the project starts/runs is the setup within Startup.cs
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
}
});
Now, I can start my project with the following approaches (referencing Properties/launchSettings.json) Regardless of how the project is started, we are taking advantage of vue dev server and the hot module reloading feature (i.e. the ability to modify html, js, vue code and the page will auto re-load)
- Visual Studio F5 (debug-run) (selecting the application name) http://localhost:8081 This approach starts the project with the c# debugger attached.
"aspnetcorevueappGui": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:5001;http://localhost:5000"
}
- Visual Studio F5 (debug-run) (selecting IIS Express, browser by default navigates to http://localhost:50557 This approach starts the project with the c# debugger attached.
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:50557",
"sslPort": 0
}
}
- npm run serve from a command prompt/terminal window and opening browser to http://localhost:8080 The c# debugger is not attached, however I will show how to attach to the dotnet.exe process below. The port used is defined within Startup.cs spa.UseVueCli(npmScript: "serve", port: 8080);
- dotnet run and manually opening browser and navigating to http://localhost:8080/ The c# debugger is not attached, however I will show how to attach to the dotnet.exe process below. The port used is defined within Startup.cs spa.UseVueCli(npmScript: "serve", port: 8080);
Attaching from within Visual Studio to the dotnet.exe process Debug – Attach to Process
So there are a few ways of starting your web application and debugging.
If you use one of the F5 approaches (above) the debugger is automatically attached and you can step through your code as you browse through the application. If you use F5 you can stop debugging easily by just stopping within Visual Studio the debugger.
If you start the application from a terminal/command prompt window the .NET debugger is not attached however you can attach to the dotnet.exe process when you are interested in stepping into your c# .net code. Personally, I never use F5 and rely on attaching the process when I want to narrow my debugging experience manually. I code this way, as I can modify c#, build the project then simply just refresh my open browser to start using the updated dlls from the project.
Once the vue app is running, hot module loading is up and running. Changes to html and js files within the ClientApp directory are automatically loaded when the Vue CLI recognizes a file change. This is known as HMR (hot module reloading). All new js frameworks have an implementation of this. It is part of the new modern js framework world now. The root file for the web application is public/index.html.
