Adding a React App to a .NET Core MVC App

I am one to think that not everything I build has to be a Single Page Application (SPA). Recently I was building a project for a client, and I decided that only one section of the app needed to be a SPA and the rest of the app a "traditional" MVC app, so I started the app with the "MVC" part and later added the "SPA". This is how I did it.

Adding a React app to your existing .NET Core MVC app is easier than you might think

One thing to note is that I am using VS Code and the .NET Core CLI on macOS.

If you wish to follow along, clone the following repo 

 branch. Yes, branch name is misspelled >_<) and open the project. 

git clone -b intial-app --single-branch https://github.com/esausilva/dotnet-core-mvc-react.git

To run the project in VS Code, open the integrated terminal and type the following

 controller and configured with a custom 404 page.

You get a new feature request and it is a perfect candidate for a React app. Fortunately, adding a React app is easier than you might think.

Go ahead and stop the project (if you have it running) by pressing 

Rather than creating the app from scratch or using Create React App (CRA), we will create a new .NET Core project with React template. This default template will have React Router installed making it easier for us.

Open your terminal, navigate to a different directory and type the following

 navigate to this newly created project directory (

 directory to the root of our actual project. Also copy 

You will end up with the following project structure.

├── ClientApp/
├── Controllers/
|  ├── HomeController.cs
|  └── WeatherForecastController.cs
├── LICENSE
├── Models/
|  ├── ErrorViewModel.cs
|  └── WeatherForecast.cs
├── Program.cs
├── Properties
├── README.md
├── Startup.cs
├── Views/
├── appsettings.Development.json
├── appsettings.json
├── bin/
├── dotnet-core-mvc-react.csproj
├── obj/
└── wwwroot/

 and change the namespace to match our project's namespace. You will end up with the following

// WeatherForecastController
namespace dotnet_core_mvc_react.Controllers
{ ... }

// WeatherForecast
namespace dotnet_core_mvc_react
{ ... }

 and replace it with the following contents

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

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <RootNamespace>dotnet_core_mvc_react</RootNamespace>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
    <RootNamespace>dotnet_core_mvc_react</RootNamespace>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.0" />
  </ItemGroup>

  <ItemGroup>
    
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

</Project>

All of that is just configuration telling Webpack to build the React app. The line 

 tells .NET Core where the React app lives.

Another thing to note is that we are adding a new package 

Microsoft.AspNetCore.SpaServices.Extensions

Open Terminal again and type the following to restore this new package

public void ConfigureServices(IServiceCollection services) {
	...
	// In production, the React files will be served from this directory
    services.AddSpaStaticFiles(configuration => {
        configuration.RootPath = "ClientApp/build";
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
	...
    // After app.UseStaticFiles()
	app.UseSpaStaticFiles();
 	...
	// After app.UseEndpoints()
	app.UseSpa(spa => {
      spa.Options.SourcePath = "ClientApp";
      if (env.IsDevelopment()) {
        spa.UseReactDevelopmentServer(npmScript: "start");
      }
    });
}

 then React will take over routing and none of your MVC routes will work.

At this point we have configured the React app to work nicely with .NET Core. In the background the framework will run 

 which in turn run CRA to build and serve React in the development environment.

Now that everything is set up we can safely install and update the JavaScript packages. Open Terminal, navigate to 

 directory within our project, and type the following to install

. Go ahead and use that tool or the one of your preference to update the JavaScript packages.

Still in Terminal, go back to the root of the project and run the app

Now try to access the React app by typing the following: 

. You will notice you hit a blank page, but if you click on the menu items they actually take you to their respective pages. 

. If you were to hit refresh then the React home will go away and load the 

Now, if you were to type a route that does not exist (say 

) you will get a blank page. React took over our custom 404 page and just displays a blank page. In fact when we accessed 

// From
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');

// To
const baseUrl = "ClientApp";

. You will get the correct non-React home. Now access 

Since React is taking over the custom 404 page, we will have to handle 404s within React. There are two options for taking care of this issue.

 component and hook it up to React Router.

import React from "react";

const NotFound = () => (
  <h1 style={{ textAlign: "center" }}>
    Sorry! The resource you are looking for has not been found
  </h1>
);

export { NotFound };

 directory and replace it with the following:

import React, { Component } from "react";
import { Route, Switch } from "react-router";
import { Layout } from "./components/Layout";
import { Home } from "./components/Home";
import { FetchData } from "./components/FetchData";
import { Counter } from "./components/Counter";
import { NotFound } from "./components/NotFound";

import "./custom.css";

export default class App extends Component {
  static displayName = App.name;

  render() {
    return (
      <Layout>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/counter" component={Counter} />
          <Route path="/fetch-data" component={FetchData} />
          <Route component={NotFound} />
        </Switch>
      </Layout>
    );
  }
}

In order to display the custom 404 page correctly, we would need to import 

 component and add it after the last route. If we add it before the first route or in between, and you try accessing any other route after it, then the 

 component will display instead of the requested component. This is because the 

 component would display alongside every other route.

, and you will get the 404 page from React. Nice!!

 and replace the contents with the following:

const NotFound = () => {
  window.location = "/Home/NotFoundPage";
  return null;
};

export { NotFound };

// [Route("error/404")]
public IActionResult NotFoundPage() {
    return View();
}

 and comment out the following line under the 

/// app.UseStatusCodePagesWithReExecute("/error/{0}");

 and you will get the 404 page served by .NET.

https://github.com/esausilva/dotnet-core-mvc-react

If you already have authentication set up, any calls from within React to your Web API will  already be authenticated since cookies attach automatically to ajax calls, including the auth cookies.

More than likely you will not want to access your awesome new feature with 

 to whatever you want want it to be, say 

With this change we can access the app like so https://localhost:5001/AwesomeNewFeature

That is it. You made it through the end. Thanks for reading.

Let me know in the comments any questions, corrections or even praise. I look forward to reading them.

You can access my website to learn more about me at 

<h1 data-node-type="titlePlaceholder">Adding a React App to a .NET Core MVC App</h1><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200108022807950_dotnet-core-and-react.jpg" attachmentid="ebe0bd09-de47-43eb-84f1-91b2dd709c08" contenteditable="false" data-width="1200" data-height="630"><div></div></figure><p>I am one to think that not everything I build has to be a Single Page Application (SPA). Recently I was building a project for a client, and I decided that only one section of the app needed to be a SPA and the rest of the app a "traditional" MVC app, so I started the app with the "MVC" part and later added the "SPA". This is how I did it.</p><blockquote><p>Adding a React app to your existing .NET Core MVC app is easier than you might think</p></blockquote><p>One thing to note is that I am using VS Code and the .NET Core CLI on macOS.</p><h2>The Existing .NET Core MVC App</h2><p><em>If you wish to follow along, clone the following repo <a href="https://github.com/esausilva/dotnet-core-mvc-react/tree/intial-app" rel="noopener noreferrer nofollow">dotnet-core-mvc-react</a></em> <em>(</em><strong><em>intial-app</em></strong><em> branch. Yes, branch name is misspelled &gt;_&lt;) and open the project. </em></p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-xQbXb" id="cm-xQbXb">git clone -b intial-app --single-branch https://github.com/esausilva/dotnet-core-mvc-react.git</textarea><p>To run the project in VS Code, open the integrated terminal and type the following</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-7zbFd" id="cm-7zbFd">dotnet watch run</textarea><p>Our awesome app has three views under <code>Home</code> controller and configured with a custom 404 page.</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20191230040445080_initial-app.gif" attachmentid="b8a584b9-e738-4b11-b857-53a0b0cb6488" contenteditable="false" data-width="1334" data-height="771"><div></div></figure><p>You get a new feature request and it is a perfect candidate for a React app. Fortunately, adding a React app is easier than you might think.</p><p>Go ahead and stop the project (if you have it running) by pressing <code>Ctrl + C</code> in your terminal.</p><h2>Creating the React app</h2><p>Rather than creating the app from scratch or using Create React App (CRA), we will create a new .NET Core project with React template. This default template will have React Router installed making it easier for us.</p><p>Open your terminal, navigate to a different directory and type the following</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-bFtgd" id="cm-bFtgd">dotnet new react -n temp-react-core</textarea><p>Now in <strong>Finder</strong> navigate to this newly created project directory (<em>temp-react-core</em>) and copy <strong>ClientApp</strong> directory to the root of our actual project. Also copy <code>WeatherForecastController.cs</code> to the <strong>Controllers</strong> directory and <code>WeatherForecast.cs</code> to the <strong>Models</strong> directory of our project.</p><p>You will end up with the following project structure.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-gnyRS" id="cm-gnyRS">├── ClientApp/
├── Controllers/
|  ├── HomeController.cs
|  └── WeatherForecastController.cs
├── LICENSE
├── Models/
|  ├── ErrorViewModel.cs
|  └── WeatherForecast.cs
├── Program.cs
├── Properties
├── README.md
├── Startup.cs
├── Views/
├── appsettings.Development.json
├── appsettings.json
├── bin/
├── dotnet-core-mvc-react.csproj
├── obj/
└── wwwroot/</textarea><p>Now back to VS Code, open <code>WeatherForecastController.cs</code> and <code>WeatherForecast.cs</code> and change the namespace to match our project's namespace. You will end up with the following</p><textarea data-iscodemirror="true" data-mode="text/x-csharp" data-uniqueid="cm-zE2Cw" id="cm-zE2Cw">// WeatherForecastController
namespace dotnet_core_mvc_react.Controllers
{ ... }

// WeatherForecast
namespace dotnet_core_mvc_react
{ ... }</textarea><p>Still in VS Code, open <code>dotnet-core-mvc-react.csproj</code> and replace it with the following contents</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-cI8pS" id="cm-cI8pS">&lt;Project Sdk="Microsoft.NET.Sdk.Web"&gt;

  &lt;PropertyGroup&gt;
    &lt;TargetFramework&gt;netcoreapp3.1&lt;/TargetFramework&gt;
    &lt;RootNamespace&gt;dotnet_core_mvc_react&lt;/RootNamespace&gt;
    &lt;SpaRoot&gt;ClientApp\&lt;/SpaRoot&gt;
    &lt;DefaultItemExcludes&gt;$(DefaultItemExcludes);$(SpaRoot)node_modules\**&lt;/DefaultItemExcludes&gt;
    &lt;RootNamespace&gt;dotnet_core_mvc_react&lt;/RootNamespace&gt;
  &lt;/PropertyGroup&gt;

  &lt;ItemGroup&gt;
    &lt;PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.0" /&gt;
  &lt;/ItemGroup&gt;

  &lt;ItemGroup&gt;
    &lt;!-- Don't publish the SPA source files, but do show them in the project files list --&gt;
    &lt;Content Remove="$(SpaRoot)**" /&gt;
    &lt;None Remove="$(SpaRoot)**" /&gt;
    &lt;None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" /&gt;
  &lt;/ItemGroup&gt;

  &lt;Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') "&gt;
    &lt;!-- Ensure Node.js is installed --&gt;
    &lt;Exec Command="node --version" ContinueOnError="true"&gt;
      &lt;Output TaskParameter="ExitCode" PropertyName="ErrorCode" /&gt;
    &lt;/Exec&gt;
    &lt;Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." /&gt;
    &lt;Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." /&gt;
    &lt;Exec WorkingDirectory="$(SpaRoot)" Command="npm install" /&gt;
  &lt;/Target&gt;

  &lt;Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish"&gt;
    &lt;!-- As part of publishing, ensure the JS resources are freshly built in production mode --&gt;
    &lt;Exec WorkingDirectory="$(SpaRoot)" Command="npm install" /&gt;
    &lt;Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" /&gt;

    &lt;!-- Include the newly-built files in the publish output --&gt;
    &lt;ItemGroup&gt;
      &lt;DistFiles Include="$(SpaRoot)build\**" /&gt;
      &lt;ResolvedFileToPublish Include="@(DistFiles-&gt;'%(FullPath)')" Exclude="@(ResolvedFileToPublish)"&gt;
        &lt;RelativePath&gt;%(DistFiles.Identity)&lt;/RelativePath&gt;
        &lt;CopyToPublishDirectory&gt;PreserveNewest&lt;/CopyToPublishDirectory&gt;
        &lt;ExcludeFromSingleFile&gt;true&lt;/ExcludeFromSingleFile&gt;
      &lt;/ResolvedFileToPublish&gt;
    &lt;/ItemGroup&gt;
  &lt;/Target&gt;

&lt;/Project&gt;</textarea><p>All of that is just configuration telling Webpack to build the React app. The line <code>&lt;SpaRoot&gt;ClientApp\&lt;/SpaRoot&gt;</code> tells .NET Core where the React app lives.</p><p>Another thing to note is that we are adding a new package <code>Microsoft.AspNetCore.SpaServices.Extensions</code>.</p><p>Open Terminal again and type the following to restore this new package</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-QKdYX" id="cm-QKdYX">dotnet restore</textarea><p>Now open <code>Startup.cs</code> and add the following under the <code>ConfigureServices</code> and <code>Configure</code> methods</p><textarea data-iscodemirror="true" data-mode="text/x-csharp" data-uniqueid="cm-wVGhP" id="cm-wVGhP">public void ConfigureServices(IServiceCollection services) {
	...
	// In production, the React files will be served from this directory
    services.AddSpaStaticFiles(configuration =&gt; {
        configuration.RootPath = "ClientApp/build";
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
	...
    // After app.UseStaticFiles()
	app.UseSpaStaticFiles();
 	...
	// After app.UseEndpoints()
	app.UseSpa(spa =&gt; {
      spa.Options.SourcePath = "ClientApp";
      if (env.IsDevelopment()) {
        spa.UseReactDevelopmentServer(npmScript: "start");
      }
    });
}</textarea><p>The order of configurations under the <code>Configure</code> method matters, if you add <code>app.UseSpa(...)</code> before <code>app.UseEndpoints(...)</code> then React will take over routing and none of your MVC routes will work.</p><p>At this point we have configured the React app to work nicely with .NET Core. In the background the framework will run <code>react-scripts</code> which in turn run CRA to build and serve React in the development environment.</p><h2>Running the app for the first time</h2><p>Now that everything is set up we can safely install and update the JavaScript packages. Open Terminal, navigate to <strong>ClientApp</strong> directory within our project, and type the following to install</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-TB6TC" id="cm-TB6TC">npm i</textarea><p><em>Optional:</em> To update the packages I use <a href="https://www.npmjs.com/package/npm-check" rel="noopener noreferrer nofollow">npm-check</a>. Go ahead and use that tool or the one of your preference to update the JavaScript packages.</p><p>Still in Terminal, go back to the root of the project and run the app</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-S4BDG" id="cm-S4BDG">dotnet watch run</textarea><p>Now try to access the React app by typing the following: <a href="https://localhost:5001/clientapp" rel="noopener noreferrer nofollow">https://localhost:5001/ClientApp</a>. You will notice you hit a blank page, but if you click on the menu items they actually take you to their respective pages. </p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200102015115396_client-app-default.gif" attachmentid="9b7344c2-c133-4e48-9779-1bfe7b3a0abf" contenteditable="false" data-width="1334" data-height="771"><div></div></figure><p>When you click <strong>Home</strong>, notice the URL changes to <a href="https://localhost:5001/clientapp" rel="noopener noreferrer nofollow">https://localhost:5001</a>. If you were to hit refresh then the React home will go away and load the <strong>Home View</strong> in <code>HomeController</code>. This is not good.</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200102015438316_client-app-home.gif" attachmentid="9a1bd3d9-b128-430b-b36d-9ac5154804ea" contenteditable="false" data-width="1334" data-height="771"><div></div></figure><p>Now, if you were to type a route that does not exist (say <a href="https://localhost:5001/dfdf" rel="noopener noreferrer nofollow">https://localhost:5001/dfdf</a>) you will get a blank page. React took over our custom 404 page and just displays a blank page. In fact when we accessed <a href="https://localhost:5001/clientapp" rel="noopener noreferrer nofollow">https://localhost:5001/ClientApp</a> we got React Router's "404 page".</p><h2>Fixing the <em>Home</em> issue</h2><p>Open <code>index.js</code> under <strong>ClientApp -&gt; src</strong> directory and assign <code>baseURL</code> to <code>"ClientApp"</code>.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-ZI063" id="cm-ZI063">// From
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');

// To
const baseUrl = "ClientApp";</textarea><p>Back to your browser, access <a href="https://localhost:5001/" rel="noopener noreferrer nofollow">https://localhost:5001/</a>. You will get the correct non-React home. Now access <a href="https://localhost:5001/ClientApp" rel="noopener noreferrer nofollow">https://localhost:5001/ClientApp</a>, and you will get the React home.</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200102170351086_correct-home.gif" attachmentid="522550fe-b4da-4825-93e2-cdf950471495" contenteditable="false" data-width="1334" data-height="771"><div></div></figure><h2> Fixing our custom 404 page</h2><p>Since React is taking over the custom 404 page, we will have to handle 404s within React. There are two options for taking care of this issue.</p><h3>Option 1</h3><p>Let's create a <em>Not Found</em> component and hook it up to React Router.</p><p>Create a new file under <strong>ClientApp -&gt; src -&gt; Components</strong> directory and call it <code>NotFound.js</code>. Copy the following:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-VYqtf" id="cm-VYqtf">import React from "react";

const NotFound = () =&gt; (
  &lt;h1 style={{ textAlign: "center" }}&gt;
    Sorry! The resource you are looking for has not been found
  &lt;/h1&gt;
);

export { NotFound };</textarea><p>Now open <code>App.js</code> under <strong>ClientApp -&gt; src</strong> directory and replace it with the following:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-HlJrk" id="cm-HlJrk">import React, { Component } from "react";
import { Route, Switch } from "react-router";
import { Layout } from "./components/Layout";
import { Home } from "./components/Home";
import { FetchData } from "./components/FetchData";
import { Counter } from "./components/Counter";
import { NotFound } from "./components/NotFound";

import "./custom.css";

export default class App extends Component {
  static displayName = App.name;

  render() {
    return (
      &lt;Layout&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/" component={Home} /&gt;
          &lt;Route path="/counter" component={Counter} /&gt;
          &lt;Route path="/fetch-data" component={FetchData} /&gt;
          &lt;Route component={NotFound} /&gt;
        &lt;/Switch&gt;
      &lt;/Layout&gt;
    );
  }
}</textarea><p>In order to display the custom 404 page correctly, we would need to import <code>Switch</code> from <code>react-router</code> and enclose our routes with it.</p><p>Then we import the <code>NotFound</code> component and add it after the last route. If we add it before the first route or in between, and you try accessing any other route after it, then the <code>NotFound</code> component will display instead of the requested component. This is because the <code>NotFound</code> <code>Route</code> does not have a <code>path</code> and is basically a <em>"catch-all"</em> route.</p><p>Now, if we were to not include the <code>Switch</code>, then the <code>NotFound</code> component would display alongside every other route.</p><p>Try accessing <a href="https://localhost:5001/dfdf" rel="noopener noreferrer nofollow">https://localhost:5001/dfdf</a>, and you will get the 404 page from React. Nice!!</p><figure class="photo figure-position-hang"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200102172741573_not-found.gif" attachmentid="ee3fc625-5de5-4861-b320-a3424c6ae720" contenteditable="false" data-width="1334" data-height="771"><div></div></figure><h3>Option 2</h3><p>Open <code>NotFound.js</code> and replace the contents with the following:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-dm8fx" id="cm-dm8fx">const NotFound = () =&gt; {
  window.location = "/Home/NotFoundPage";
  return null;
};

export { NotFound };</textarea><p>Now open <code>HomeController.cs</code> and comment out the annotation above <code>NotFoundPage</code> action result</p><textarea data-iscodemirror="true" data-mode="text/x-csharp" data-uniqueid="cm-pN5FV" id="cm-pN5FV">// [Route("error/404")]
public IActionResult NotFoundPage() {
    return View();
}</textarea><p>Finally open <code>Startup.cs</code> and comment out the following line under the <code>Configure</code> method.</p><textarea data-iscodemirror="true" data-mode="text/x-csharp" data-uniqueid="cm-9xzli" id="cm-9xzli">/// app.UseStatusCodePagesWithReExecute("/error/{0}");</textarea><p>Try accessing <a href="https://localhost:5001/dfdf" rel="noopener noreferrer nofollow">https://localhost:5001/dfdf</a> and you will get the 404 page served by .NET.</p><h2>Final Repo</h2><p><a href="https://github.com/esausilva/dotnet-core-mvc-react" rel="noopener noreferrer nofollow">https://github.com/esausilva/dotnet-core-mvc-react</a></p><h2>Bonus</h2><p>If you already have authentication set up, any calls from within React to your Web API will  already be authenticated since cookies attach automatically to ajax calls, including the auth cookies.</p><p>More than likely you will not want to access your awesome new feature with <code>ClientApp</code> as the route. Just change the <code>baseURL</code> under <code>index.js</code> to whatever you want want it to be, say <code>AwesomeNewFeature</code></p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-W3FKN" id="cm-W3FKN">const baseUrl = "AwesomeNewFeature";</textarea><p>With this change we can access the app like so https://localhost:5001/AwesomeNewFeature</p><h2>Conclusion</h2><p>That is it. You made it through the end. Thanks for reading.</p><p>Let me know in the comments any questions, corrections or even praise. I look forward to reading them.</p><hr><p>You can access my website to learn more about me at <a href="https://www.esausilva.dev/" rel="noopener noreferrer nofollow">https://www.esausilva.dev/</a> or follow me on <a href="https://twitter.com/_esausilva" rel="noopener noreferrer nofollow">Twitter</a> or <a href="https://github.com/esausilva" rel="noopener noreferrer nofollow">GitHub</a>. To read more of my blog posts follow <a href="https://esausilva.com/" rel="noopener noreferrer nofollow">https://esausilva.com</a></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Adding a React App to a .NET Core MVC App

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript