How to have two separate react apps running in one project? #274

New Issue

fergalmoran · 2025-08-09T17:15:40Z

fergalmoran commented

2025-08-09 17:15:40 +00:00

Originally created by @gittestcoder on 12/11/2017

Hello, I have a requirement to run two react apps from the same project. I have tried:

duplicating the the ClientApp folder (lets call it ClientApp2),
adding separate webpack files with unique names
adding scripts below where the original npm scripts are called in the csproj file. Here is a snippet of the csproj file now:

  <Target Name="RunWebpackDebug" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'Debug'">
    <Exec Command="npm install" />
    <Exec Command="node_modules\.bin\webpack --config ClientApp2-webpack.config.vendor.js" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.js" />
      <Exec Command="node_modules\.bin\webpack --config webpack.config.js" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.js" />
  </Target>
   <Target Name="RunWebpackRelease" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'Release'">
    <Exec Command="npm install" />
    <Exec Command="node_modules\.bin\webpack --config ClientApp2-webpack.config.vendor.js" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.vendor.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.production.js --env.prod" />
  </Target>
  <Target Name="RunWebpackProductionRelease" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'ProductionRelease'">
    <Exec Command="npm install" />
    <Exec Command="node_modules\.bin\webpack --config ClientApp2-webpack.config.vendor.js" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.vendor.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.production.js --env.prod" />
  </Target>
  <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec Command="npm install" />
    <Exec Command="node_modules\.bin\webpack --config ClientApp2-webpack.config.vendor.js" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.vendor.production.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.production.js --env.prod" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="wwwroot\dist\**; ClientApp\dist\**;  ClientApp2\dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

However I believe both apps are referencing the same "dist" folder with the same vendor.config file so hot reloading only works for one app at a time (I think depending on which apps' scripts you call first). Would someone be willing to explain how to run to react apps at once from this template? Thank you

*Originally created by @gittestcoder on 12/11/2017* Hello, I have a requirement to run two react apps from the same project. I have tried: - duplicating the the ClientApp folder (lets call it ClientApp2), - adding separate webpack files with unique names - adding scripts below where the original npm scripts are called in the csproj file. Here is a snippet of the csproj file now: ``` <Target Name="RunWebpackDebug" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'Debug'"> <Exec Command="npm install" /> <Exec Command="node_modules\.bin\webpack --config ClientApp2-webpack.config.vendor.js" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.js" /> <Exec Command="node_modules\.bin\webpack --config webpack.config.js" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.js" /> </Target> <Target Name="RunWebpackRelease" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'Release'"> <Exec Command="npm install" /> <Exec Command="node_modules\.bin\webpack --config ClientApp2-webpack.config.vendor.js" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.vendor.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.production.js --env.prod" /> </Target> <Target Name="RunWebpackProductionRelease" AfterTargets="AfterBuild" Condition="'$(Configuration)' == 'ProductionRelease'"> <Exec Command="npm install" /> <Exec Command="node_modules\.bin\webpack --config ClientApp2-webpack.config.vendor.js" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.vendor.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.production.js --env.prod" /> </Target> <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">  <Exec Command="npm install" /> <Exec Command="node_modules\.bin\webpack --config ClientApp2-webpack.config.vendor.js" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.vendor.production.js --env.prod" /> <Exec Command="node node_modules/webpack/bin/webpack.js --config ClientApp2-webpack.config.production.js --env.prod" />  <ItemGroup> <DistFiles Include="wwwroot\dist\**; ClientApp\dist\**; ClientApp2\dist\**" /> <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)"> <RelativePath>%(DistFiles.Identity)</RelativePath> <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory> </ResolvedFileToPublish> </ItemGroup> </Target> ``` However I believe both apps are referencing the same "dist" folder with the same vendor.config file so hot reloading only works for one app at a time (I think depending on which apps' scripts you call first). Would someone be willing to explain how to run to react apps at once from this template? Thank you

fergalmoran closed this issue

2025-08-09 17:15:40 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#274