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.

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

Troubleshooting Angular2 Router: Version 3.0.0-alpha.8 - Issue with resolving parameters for provideRouter function

Encountering an issue while working on a project in angular2 with router version "3.0.0-alpha.8". The error message displayed during the loading of APIs states: Can't resolve all parameters for provideRouter: (?, ?) . Error : BaseException$1@http:// ...

Limiting text based on the space it occupies

Is it feasible to restrict the number of characters allowed in an input field based on the space they occupy? For instance, W's and M's require enough space for 34 of them. However, regular sentences of the same length only take up about half a ...

Let's unravel this JavaScript enigma: the code snippet window.confirm = divConfirm(strMessage) awaits

Imagine a scenario where you have an old website with a lot of existing JS code. If a user wants to update all the alert messages to modern, stylish Div-based alerts commonly used in jQuery, YUI, Prototype, etc., there are primarily three types of JS dialo ...

Angular2 app is sending empty HTTP headers to the server

My REST api, built using SpringBoot, incorporates JWT for authentication and authorization. To achieve this, I utilize a FilterRegistrationBean. Within this setup, there exists a class called JwtFilter that extends GenericFilterBean. This class is respons ...

What causes a component to not update when it is connected to an Array using v-model?

Array1 https://i.stack.imgur.com/cY0XR.jpg Array are both connected to the same Array variable using v-model. However, when changes are made to Array1, Array2 does not update. Why is this happening? Process: Upon examining the logs, it can be observed th ...

Struggling with making updates to an interface through declaration merging

I am encountering challenges with implementing declaration merging on an interface from a library that I created. An example illustrating the issue using StackBlitz can be viewed here: https://stackblitz.com/edit/typescript-qxvrte (issues persist in both ...

Transferring an array from JavaScript to PHP, encountering an issue with determining the length

I'm having an issue passing an array from my .js file to a PHP file. In JavaScript, the array is structured as follows: theBlock[0 - 79] with color, x, and y values. For example, theBlock[10].color or theBlock[79].x The data is sent using the follow ...

Redirecting files from the file system to the emulator is not functioning properly

I am new to Phonegap and need help resolving this issue. In my application, I need to redirect to the List.html file when a button is clicked. Here is the code I have written: button1 function test() { window.location="/home/swift-03/phonegapexa ...

Are Angular 4 auth guards implemented on the server side or the client side? And if they are on the client side, are they vulnerable to

While I am engaged in a project using Angular 4, my expertise lies in angular auth-guards. Here's my query: considering that Angular 4 is primarily a client-sided framework, is it possible to bypass the auth-guard by inspecting the browser window, giv ...

Using Vue.js to create numerous modal popups

Currently, I am using Vue.JS for a research project at my workplace. My focus right now is mainly on the front-end. I have a table with several entries, and when a row is clicked, I want a modal popup window to display further details about that specific ...

"Encountered an issue while serializing the user for session storage in Passport.js. Have you already implemented code for

I have recently started learning nodejs and I am currently working on creating a login system. I followed the code for serializing the user from the passport documentation and placed it in config/passport.js. However, I keep encountering the error "Failed ...

Encountered a problem while trying to connect to WCF service using c

Currently, I am in the process of developing a SOAP software solution for one of our clients. The reason behind this migration to SOAP is that we have plans to launch a mobile application soon. After creating the .svc file and successfully establishing a ...

Experience the magic of animated number counting using RxJs

I am working on my Angular application and I want to implement a feature where the records from HTTP get requests are animatedly counted. However, when using RxJs, the response is returned too quickly and I only see the final result immediately. I attemp ...

Form Input Field with Real-Time JavaScript Validation

Is there a way to validate the content of a textarea using pure JavaScript, without using jQuery? I need assistance with this issue. <script> function validate() { // 1. Only allow alphanumeric characters, dash(-), comma(,) and no spaces ...

Angular: the xhrRequest is failing to be sent

I am facing an issue with a service function that handles an HTTP post request. The request does not get sent for some reason. However, when I add a subscription to the post method, the request is successfully executed. In other services that have the sam ...

Parsing JSON objects with identifiers into TypeScript is a common task in web development

I possess a vast JSON object structured like so: { "item1": { "key1": "val1", "key2": "val2", "key3": [ "val4", "val5", ] }, { "item2": { "key1": "val1", "ke ...

Function used to update database through AJAX technology

I have implemented a PHP script to update my database using AJAX, and it is working correctly after being tested. To pass the required two variables to the PHP script for updating the database, I created a JavaScript function that utilizes AJAX to call the ...

Issue: Incorrect hook usage. Hooks are designed to be used within the body of a function component. This error may occur due to one of the following reasons: 1

I've reviewed similar questions and attempted to apply the solutions provided, but it seems I'm missing something specific to my situation. My goal is to streamline my code by importing headers from a utils file and using them across different AP ...

When attempting to initiate a new session, Webdriver.io receives an HTML response from selenium

Currently, I am attempting to execute my selenium tests using webdriver.io. However, the test runner is encountering failure when attempting to establish a session: [18:12:36] COMMAND POST "/session" [18:12:36] DATA {"desiredCapab ...

Creating a dynamic component in Angular using the ng-template approach

Exploring Components using ng-template @Component({ template: ` <div>Welcome to the Component!</div> <ng-template #contentTemplate> <div>This is the template content</div> </ng-template> `, }) expo ...