Events
Power BI DataViz World Championships
Feb 14, 4 PM - Mar 31, 4 PM
With 4 chances to enter, you could win a conference package and make it to the LIVE Grand Finale in Las Vegas
Learn moreThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Note
This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.
Warning
This version of ASP.NET Core is no longer supported. For more information, see the .NET and .NET Core Support Policy. For the current release, see the .NET 9 version of this article.
Important
This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
For the current release, see the .NET 9 version of this article.
Visual Studio provides project templates for creating single-page apps (SPAs) based on JavaScript frameworks such as Angular, React, and Vue that have an ASP.NET Core backend. These templates:
Projects created by using the Visual Studio templates can be run from the command line on Windows, Linux, and macOS. To run the app, use dotnet run --launch-profile https
to run the server project. Running the server project automatically starts the frontend JavaScript development server. The https
launch profile is currently required.
To get started, follow the Create an ASP.NET Core app with React tutorial in the Visual Studio documentation.
For more information, see JavaScript and TypeScript in Visual Studio
Visual Studio includes templates for building ASP.NET Core apps with a JavaScript or TypeScript frontend. These templates are available in Visual Studio 2022 version 17.8 or later with the ASP.NET and web development workload installed.
The Visual Studio templates for building ASP.NET Core apps with a JavaScript or TypeScript frontend offer the following benefits:
Earlier versions of the .NET SDK included what are now legacy templates for building SPA apps with ASP.NET Core. For documentation on these older templates, see the ASP.NET Core 7.0 version of the SPA overview and the Angular and React articles.
The ASP.NET Core with React project template provides a convenient starting point for ASP.NET Core apps using React and Create React App (CRA) to implement a rich, client-side user interface (UI).
The project template is equivalent to creating both an ASP.NET Core project to act as a web API and a CRA React project to act as a UI. This project combination offers the convenience of hosting both projects in a single ASP.NET Core project that can be built and published as a single unit.
The project template isn't meant for server-side rendering (SSR). For SSR with React and Node.js, consider Next.js or Razzle.
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 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.
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.
To install third-party npm packages, use a command prompt in the ClientApp
subdirectory. For example:
cd ClientApp
npm install <package_name>
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.
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 run the CRA server externally, switch to the ClientApp
subdirectory in a command prompt and launch the CRA development server:
cd ClientApp
npm start
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.
For more information, see http-proxy-middleware.
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.
The React project template isn't meant for server-side rendering (SSR). For SSR with React and Node.js, consider Next.js or Razzle.
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 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.
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.
To install third-party npm packages, use a command prompt in the ClientApp
subdirectory. For example:
cd ClientApp
npm install --save <package_name>
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.
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:
Add a .env
file to the ClientApp
subdirectory with the following setting:
BROWSER=none
This will prevent your web browser from opening when starting the CRA server externally.
In a command prompt, switch to the ClientApp
subdirectory, and launch the CRA development server:
cd ClientApp
npm start
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.
Important
"Server-side rendering" is not a supported feature of this template. Our goal with this template is to meet parity with "create-react-app". As such, scenarios and features not included in a "create-react-app" project (such as SSR) are not supported and are left as an exercise for the user.
For more information, see http-proxy-middleware.
ASP.NET Core feedback
ASP.NET Core is an open source project. Select a link to provide feedback:
Events
Power BI DataViz World Championships
Feb 14, 4 PM - Mar 31, 4 PM
With 4 chances to enter, you could win a conference package and make it to the LIVE Grand Finale in Las Vegas
Learn moreTraining
Module
Create a full stack application by using React and minimal API for ASP.NET Core - Training
Learn how to create a full stack application by using React and minimal API for ASP.NET Core.
Documentation
Create an ASP.NET Core app with React - Visual Studio (Windows)
Create an ASP.NET Core project to serve as an API backend and a React project to provide the user interface in Visual Studio.
Overview of Single Page Apps (SPAs) in ASP.NET Core
Overview of Single Page Apps (SPAs) in ASP.NET Core
Create an ASP.NET Core app with Vue - Visual Studio (Windows)
Create an ASP.NET Core project to serve as an API backend and a Vue project to provide the user interface in Visual Studio.