CODEWITHSUNDEEP
angulartypescriptwebpackwebpack-dev-serverasp.net-core-webapi
shazia perween
shazia perween

Reputation: 607

How to enable live reload for dotnet core(web Api) code change as well as TypeScript code change

I have a Asp.Net Core app for Web API development along with client side code in Angular 2 (Typescript).

For build purpose, I am using WebPack along with I am also using "webpack-dev-server".

Currently I have 2 Scripts in "Package.Json" file,

"scripts": {
"startWebpackDevServer": "webpack-dev-server --inline --progress --port 8080",
"build": "SET NODE_ENV=development && webpack -d --color && dotnet run"

},

  1. When I run command "npm run startWebpackDevServer", web application is available at port "8080" and as soon as I am changing any client side code (typescript+angular), live reload is happening and changes are automatically appears at browser. (great).

  2. but, In port "8080", my Web API call gave me 404, why?

  3. When I run command "npm run build", Web app is available at port "5000", Web API call is also gave me result, the missing thing here is "live reload".

I am looking for a command which should live reload either on, A. any change in typescript+angular code & B. any change in Web API (C#) code.

Please suggest!

Upvotes: 3

Views: 6883

Answers (3)

Victor
Victor

Reputation: 51

"dotnet watch run" should do webapi live-reload. tag should be added into the project file for Microsoft.DotNet.Watcher.Tools.

Upvotes: 0

Thaadikkaaran
Thaadikkaaran

Reputation: 5226

I don't understand your need completely, But still you have an answer.

You can do this with http-server and watch. To achieve live reload when either of javascript project (web) or C# project (API) is changed, it is recommended to have your web and web api project under the same folder.

you have to disable the watch in webpack and avoid using webpack dev server Because you are going to have an external tool (watch & http-server) to watch for file change and reload/serve the page.

Install the http-server and watch npm modules globally as shown below.

> npm install -g http-server watch

watch will watch for the file changes in the current working directory on files. If any change happened in either in javsacript code or c# code, it will execute the command given as CLI option. The command will use the http-server to reload the page.

The build task in package.json could have been as shown below.

"build:dev": "SET NODE_ENV=development && dotnet run && webpack -d --color && npm run serve",
"watch": "watch 'npm run build:dev' -p=node_modules|Bin|Obj|lib -d",
"serve": "http-server -p 8080",
"start": "npm run build:dev && npm run watch"

Now execute > npm start to build, serve and watch for the web and api.

Upvotes: 1

Ilya Chernomordik
Ilya Chernomordik

Reputation: 30335

I am not 100% sure I got your question, but I doubt you can have a command that does live reload of Web Api. It's not related in any way to node first of all. You can try to use watch command or something similar for the .Net Core.

You can check here how to use the watch. Otherwise if you just build the application in Visual Studio and run it behind IIS (or IIS Express) this will pretty much do the same.

Upvotes: 0

Related Questions