Is it possible to concurrently hot module reload both the server (.NET Core) and client (Angular)?

Using the command 'dotnet watch run' to monitor changes in server code and 'ng build --watch' for Angular code updates has been successful. It rebuilds the code correctly into directories "bin/" and "wwwroot/" respectively.

myapp.csproj

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>myapp</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
  </ItemGroup>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
  </ItemGroup>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
  </ItemGroup>

  <ItemGroup>
    <!-- extends watching group to include *.js files -->
    <Watch Include="wwwroot\*.js;bin\**\*"/> <!-- Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" /> -->
  </ItemGroup>

</Project>

The configuration in my Startup.cs allows it to read from the "wwwroot" file and serve the transpiled TypeScript.

Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
...
            app.UseMvc();
        }
    }
}

To facilitate running both watch commands in one terminal, I set up the project to use "npm run saw". This allows the client and server to operate on the same port while serving the application using "dotnet run."

package.json

"scripts": {
    "ng": "ng",
    ...
    "saw": "npm run start:all:watch"
  }

In order to re-serve the "wwwroot" folder after a rebuild in dotnet core, especially when using localhost:5000, additional steps may need to be implemented within the project structure.

https://i.sstatic.net/EUFfT.png

Answer №1

I have successfully configured a proxy for the Angular CLI to address the challenge of hot module reloading for both the client and server with just one command. If only the server code is modified, a refresh is still necessary. Moving forward, I plan to run the client and server on separate ports using "ng serve --proxy-config proxy.config.json" for the client, and "dotnet watch run" for the server.

Establishing a proxy config for Angular CLI

In the current setup, "Startup.cs" will no longer serve the app bundle from the "wwwroot" directory (removing UseDefaultFiles() and UseStaticFiles() functions).

Remember to execute "dotnet restore" if you have made changes to your *.csproj file before running the updated server code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

turn on labels for every individual cell in the bar graph

I'm working on setting labels of A, B, and C for each bar chart cell to display all my data on the chart. I attempted using data.addColumn('string', 'Alphabets'); but it's not functioning as expected. It seems like a simple ta ...

PHP cannot be utilized within the script tag

I'm currently using JavaScript to display an error message If a user inputs incorrect information and I add the following code: <?php $_POST["usernamereg"] ?> = usernamereg; the alert function stops working. However, if I remove this code, t ...

Angular 8 throws a TS2339 error, yet the code is functioning perfectly and delivering the desired output

Upon compiling my code, I encountered the following error: ERROR in src/app/home/home.component.ts:13:37 - error TS2339: Property 'name' does not exist on type 'string | Type'. Property 'name' does not exist on type &ap ...

Access to uploading files has been restricted due to CORS policy restrictions

I'm currently attempting to upload files using Angular and ng2-file-upload. I have two local servers: http://localhost:4200 for my Angular app and http://localhost which hosts PHP files When trying to send a file to the PHP server for uploading, I ...

Angular is programmed to actively monitor the status of elements for enabling or

Seeking a solution to determine if an element is disabled in an Angular directive. Have attempted with host listeners, but no success yet. Directive: @HostBinding('attr.disabled') isDisabled : boolean; @HostListener("disabled") disabled() { ...

Once logged out in Vue Router, the main app template will briefly display along with the login component

After clicking the logout button, I am experiencing an issue where my main UI remains visible for a few seconds before transitioning to a blank page and displaying the login form component. This behavior is occurring within the setup of my App.vue file: & ...

How can you implement multiple validators on a single control in Angular 2?

I've been working on a form using Angular2 and I've implemented two custom validators for the email address field. The initial validator checks for valid email format, while the second (which is asynchronous) checks if the email address already ...

Tips for identifying and swapping values/parameters in a URL during redirect

To provide more clarity on my inquiry, I will outline the details below: There are three links: Link A, Link B, and Link C Link A: {c_val} Link B: {id} Link C: In the database, there is a value adgaf7g6adf6gadfg8a86fgs9f6g The main focus here is when ...

Is there a way to remove an event listener once the associated button has been clicked within the given code?

Is there a way to prevent this event from triggering once the "dispensed" button is clicked in another module? Here is the code snippet: stopDrugOrder(e: Event, drugOrder: any, drugName: string) { const confirmDialog = this.dialog.open(SharedConfirmat ...

Changing the time format in Extent report 3.0.2 for c# can be easily accomplished by following a few simple

Is there a way to modify the format of the time displayed in an extent report for C#? The current format is "07/09/2017 10:59:58", but I am wondering if it can be changed to a different format? ...

Unable to resolve the issue with ExpressPeerServer not being recognized as a function in server.js

I'm facing an issue with the peer.js library in my npm project. I have successfully installed it, but when I try to use it in my server.js file, I get an error saying that peerServer is not a function. const express = require('express'); con ...

Developing a multi-graph by utilizing several JSON array datasets

Currently exploring D3 and experimenting with creating a multi-line graph without utilizing CSV, TSV, or similar data formats. The key focus is on iterating over an array of datasets (which are arrays of objects {data:blah, price:bleh}). I am trying to a ...

javascript alter css property display to either visible or hidden

I am struggling with a CSS id that hides visibility and uses display: none. The issue arises when I want the element to be visible upon clicking a button, but removing the display:none property is causing design problems due to it being an invisible elemen ...

Check for pattern using JavaScript regular expression

Utilizing ng-pattern to validate a regular expression. The pattern must include 3 letters and 2 numbers in a group. For example: G-31SSD or G-EEE43 Currently, the pattern only matches the second example. ng-model="newGroup.groupCode" ng-pattern="/^&bso ...

Passing a list of objects from .Net to JQuery as a parameter

Hey there, I recently attempted to pass a list of custom objects to JQuery as a parameter with the expectation that jQuery would recognize it as a specific object and iterate through it. The class definition looks like this: public class PriceSummary{ ...

Adjust the width of a textarea dynamically as you type by detecting keyup events

Two text areas have the same text formatting. Their IDs are textareaA and textareaB. I've successfully added functionality to resize textareaA on keyup. How can I make textareaB resize its WIDTH while the user is typing in textareaA? Here's wha ...

Issues with the update of class properties in Node.js using Express

I am facing some challenges with a .js Object's attribute that is not updating as expected. Being new to the world of JavaScript, I hope my problem won't be too difficult to solve. To begin with, here is a snippet from my Node class: Node = fu ...

Adding total stars options seems to be causing issues with the star rating feature in the ng framework

I have implemented the ng-starrating library in my Angular project by following this link. It was working fine without specifying the totalstars option like this: <star-rating value="{{rate}}" checkedcolor="#000000" uncheckedcolor="#ffffff"> Howeve ...

Changing the cursor while the onDrag event is active in ReactJs

I want to implement Drag functionality on certain elements in my application, but I am facing an issue where the cursor changes during dragging. How can I change the cursor specifically when onDrag is active? ...

Angular dependency issue: Expected '{' or ';' for @types/node

I encountered an error while running "ng serve" in my Angular application. Originally built as Angular 2, it was upgraded to Angular 8 (with attempts at versions 6 and 7 along the way). However, after migrating from Angular 5, I started experiencing errors ...