28

I tried to automatically reload ASP.NET Core project as I do using Angular with Node or NPM.

When I change the code of the .NET Core project and save, I want the web page to be automatically refreshed in the web browser.

Sabuncu
  • 5,095
  • 5
  • 55
  • 89
Akash Limbani
  • 1,283
  • 4
  • 14
  • 34

8 Answers8

20

run this command in project console

dotnet watch run

same works for visual studio code

From Develop ASP.NET Core apps using a file watcher (for 3.0)

dotnet watch is a tool that runs a .NET Core CLI command when source files change. For example, a file change can trigger compilation, test execution, or deployment.

The link above contains a tutorial with two sample projects:

  1. WebApp (an ASP.NET Core web API) and
  2. WebAppTests (unit tests for the web API).

Alternatively, you can also this nuget package for runtime compilation.

Amir Dora.
  • 2,831
  • 4
  • 40
  • 61
9

I think that dotnet watch should work. See the documentation from the link as there are various options.

  1. Add Microsoft.DotNet.Watcher.Tools to the tools section of the project.json file
  2. Run dotnet restore
  3. Execute with dotnet watch run
PrinceT
  • 459
  • 4
  • 19
  • But Using this, I am not able to reloading automatically like Angular. If I pressed **ctrl+s**, That time not any action working in browser. Thanks for giving answer. – Akash Limbani Nov 25 '19 at 09:49
  • you have to run your application using command prompt and add watch details in project. json – PrinceT Nov 25 '19 at 09:50
  • Or you can just use my launch profile I provided in my answer.. – GrowSing Nov 25 '19 at 09:51
  • You can see changes in console.. when you try to run.. are you able to see anything? – PrinceT Nov 25 '19 at 09:54
  • Yes, But not reloading automatically in the browser like Angular. – Akash Limbani Nov 25 '19 at 10:04
  • @AkashLimbani `like Angular` doesn't do what you think it does. If you create use the Angular ASP.NET Core template, changes to the *client* code will be reloaded automatically. This is done because *Node* does the equivalent of `dotnet watch` and reloads the SPA when the files change. – Panagiotis Kanavos Nov 25 '19 at 10:12
6

You can use dotnet watch. Viz. Docs

I have created custom lunch profile to make it easyer to run in VS.

"Watch": {
  "executablePath": "dotnet.exe",
  "workingDirectory": "$(ProjectDir)",
  "commandLineArgs": "watch run",
  "launchBrowser": false,
  "launchUrl": "http://localhost:5000/",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}
GrowSing
  • 603
  • 1
  • 5
  • 14
  • 1
    Using this, Not reloading automatically in the browser like Angular. – Akash Limbani Nov 25 '19 at 10:04
  • Can you run Angular project ? – Akash Limbani Nov 25 '19 at 11:34
  • 1
    Doesn't work for me on .NET Core 5 too. I needed to add `"commandName": "Project"` cause otherwise VS won't use it, but no reaction on file changes. When I run `dotnet watch run` outside of VS, it works well but sadly without any debugger :/ – Lion Feb 22 '21 at 17:47
  • I got the debugger started with `"commandName": "Executable",` and `"executablePath": "dotnet.exe"` but the debugger seems not properly attached: It doesn't hit breakpoints, which works fine with the default project. – Lion Feb 22 '21 at 18:26
4

According to this requirement, we need to run .net core application just like Angular application, loading the pages and contents automatically without built and manual refresh.

I had done some research and experienced that auto-reloading is not possible in ASP.NET core project. However, we have got the success, in our solution we are using dotnet watch which monitors source files and if a file changes, shuts down the application that it started, rebuilds and publishes the project, and then restarts the application then we just need to refresh page manually in the browser to get the changes which made in application, we don’t require to build or start the project.

Steps to follow to use asp.net watch:

1) Create.Net core application.

2) Open a command Window in your Web project's folder

3) Type dotnet watch run

4) Open your browser and navigate to an API or Page

5) Make a change to source code

6) Save the file

7) Go back to the browser and refresh manually

8) You should see the change reflected

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Kristy Davis
  • 59
  • 2
2

Use dotnet watch to recompile the source code. Use Browser Link with "Browser reload on save" from Visual Studio to reload all your browsers. https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BrowserReloadonSave

Magnus Olsson
  • 136
  • 1
  • 6
1

One of the tasks automatically created in VS Code environment for a ASP.NET Core project (web, mvc, etc.) is called "watch". To check this, from ".vscode" folder, open the file tasks.json and you will see 3 tasks configuration: "build", "publish" and "watch". By default, "build" is used in launch.json. You can then go in the "configurations" section of launch.json and look for "preLaunchTask", and there, you can change the task to "watch". And that's it. Hot reload will be active when you run your web application. Regards.

Ricardo Maroquio
  • 436
  • 4
  • 9
0

You should think triple before going forward to this option. (1) It is a resource-consuming. As it necessitates auto-build, as pre-operation, of the modified project and sometimes the whole solution. (Imagine a medium to a huge Asp.net solution composed from many projects, get built for each modification performed !! how much time is left for programming ???!!) (2), as you know, the page reload consumes much time for the first launch after a successful build !!... Hence, the time you want to gain from this option you will be wasted multiple, especially CLR-based programming languages (e.g. .NET Core). And finally, (3) your project is expected to be in need to develop test samples that can be injected automatically in the view for a better automation process, imagine how difficult it is!

Instead, try to unit test your solution, and then, any next modification is expected to be superficial and low occurring.

If you disagree with my proposition, I suggest developing a visual-studio extension that better reload the target web page on-build rather than an on-save-changes event. Next, Ctrl + b will do the job!

Where to start?

I have developed a VSIX that watches folders to load automatically specific generated files outside the VS UI. check the source code you will have an idea about the project's files management. it revolves in the EnvDTE API, please have a look in this piece of code.

Also, check the source project from here

AbuDawood
  • 745
  • 7
  • 22
0

Follow the procedure indicated in the Microsoft's page.

  1. Nuget package Microsoft. VisualStudio. Web. BrowserLink

  2. Install NuGet Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation

  3. app.UseBrowserLink(); in the startup.cs page on the configure method.

  4. and enter image description here

now when you change something on your code Ctrl + Maj + enter and everything is saved and actualized on your browser.

Amir Dora.
  • 2,831
  • 4
  • 40
  • 61
gilles greata
  • 11
  • 1