Can I hot module reload the server (.NET Core) and client (Angular) at the same time?

Question

I'm using 'dotnet watch run' to watch for changes in my server code and 'ng build --watch' to watch for changes in my Angular code. Both are rebuilding the code properly into "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>

My Startup.cs is set to read from the "wwwroot" file and serve my 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;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
// using Microsoft.AspNetCore.SpaServices.Webpack;

namespace myapp
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                /*app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
                    HotModuleReplacement = true
                });*/
            }
            app.UseDefaultFiles(); // URL rewriter to serve default web page
            app.UseStaticFiles(); // makes files in wwwroot servable
            app.UseMvc();
        }
    }
}

I run the project with "npm run saw" concurrently so both watch commands can be in the same terminal. I want the client and server to run on the same port so that's why I let "dotnet run" serve the app.

package.json

"scripts": {
    "ng": "ng",
    "start:client": "ng serve",
    "build:client": "ng build",
    "build:client:watch": "ng build --watch",
    "build:server": "dotnet build",
    "build:all": "npm run build:client && npm run build:server",
    "build:client:prod": "ng build --prod --env=prod",
    "build:all:prod": "npm run build:client:prod && npm run build:server",
    "test:client": "ng test",
    "lint:client": "ng lint",
    "e2e:client": "ng e2e",
    "restore": "dotnet restore",
    "start:all": "ng serve --live-reload false && dotnet run",
    "start:all:watch": "concurrently -k \"npm run build:client:watch\" \"dotnet watch run\"",
    "saw": "npm run start:all:watch"
  }

Finally, here is my overall project structure. How can I re-serve the "wwwroot" folder if I'm using dotnet run on "localhost:5000" after dotnet core detects that "wwwroot" (or server in "bin") has been re-built?

Harish Vangavolu · Accepted Answer · 2018-01-07T05:26:55.097

I just created a proxy config for the Angular CLI to resolve the issue of hot module reloading both client and server with one command. A refresh is still required if only server code is changed. Now I'll just run client and server on different ports and use "ng serve --proxy-config proxy.config.json" to run client and "dotnet watch run" to run server.

Create a proxy config for Angular CLI

For now "Startup.cs" will no longer serve the app bundle from the "wwwroot" folder (UseDefaultFiles() and UseStaticFiles() functions are removed).

Be sure to run "dotnet restore" if you've edited your *.csproj file before running the latest server code.

Can I hot module reload the server (.NET Core) and client (Angular) at the same time?

myapp.csproj

Startup.cs

package.json

1 Answers1