Use the React project template with ASP.NET Core

Note

This documentation isn't about the React project template included in ASP.NET Core 2.0. It's about the newer React template to which you can update manually. The template is included in ASP.NET Core 2.1 by default.

The updated React project template provides a convenient starting point for ASP.NET Core apps using React and create-react-app (CRA) conventions to implement a rich, client-side user interface (UI).

The template is equivalent to creating both an ASP.NET Core project to act as an API backend, and a standard CRA React project to act as a UI, but with the convenience of hosting both in a single app project that can be built and published as a single unit.

Create a new app

If using ASP.NET Core 2.0, ensure you've installed the updated React project template.

If you have ASP.NET Core 2.1 installed, there's no need to install the React project template.

Create a new project from a command prompt using the command dotnet new react in an empty directory. For example, the following commands create the app in a my-new-app directory and switch to that directory:

dotnet new react -o my-new-app
cd my-new-app

Run the app from either Visual Studio or the .NET Core CLI:

Open the generated .csproj file, and run the app as normal from there.

The build process restores npm dependencies on the first run, which can take several minutes. Subsequent builds are much faster.

The project template creates an ASP.NET Core app and a React app. The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. The React app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

Add pages, images, styles, modules, etc.

The ClientApp directory is a standard CRA React app. See the official CRA documentation for more information.

There are slight differences between the React app created by this template and the one created by CRA itself; however, the app's capabilities are unchanged. The app created by the template contains a Bootstrap-based layout and a basic routing example.

Install npm packages

To install third-party npm packages, use a command prompt in the ClientApp subdirectory. For example:

cd ClientApp
npm install --save <package_name>

Publish and deploy

In development, the app runs in a mode optimized for developer convenience. For example, JavaScript bundles include source maps (so that when debugging, you can see your original source code). The app watches JavaScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.

In production, serve a version of your app that's optimized for performance. This is configured to happen automatically. When you publish, the build configuration emits a minified, transpiled build of your client-side code. Unlike the development build, the production build doesn't require Node.js to be installed on the server.

You can use standard ASP.NET Core hosting and deployment methods.

Run the CRA server independently

The project is configured to start its own instance of the CRA development server in the background when the ASP.NET Core app starts in development mode. This is convenient because it means you don't have to run a separate server manually.

There's a drawback to this default setup. Each time you modify your C# code and your ASP.NET Core app needs to restart, the CRA server restarts. A few seconds are required to start back up. If you're making frequent C# code edits and don't want to wait for the CRA server to restart, run the CRA server externally, independently of the ASP.NET Core process. To do so:

  1. In a command prompt, switch to the ClientApp subdirectory, and launch the CRA development server:

    cd ClientApp
    npm start
    
  2. Modify your ASP.NET Core app to use the external CRA server instance instead of launching one of its own. In your Startup class, replace the spa.UseReactDevelopmentServer invocation with the following:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
    

When you start your ASP.NET Core app, it won't launch a CRA server. The instance you started manually is used instead. This enables it to start and restart faster. It's no longer waiting for your React app to rebuild each time.