Scribd
Upload
56 views

Using React

The document summarizes the React project template for ASP.NET Core, which provides a starting point for building ASP.NET Core apps with a React frontend. The template sets up an ASP.NET Core backend API and a Create React App frontend project that can be run and published together. It is not intended for server-side rendering of React.

Uploaded by

hsuyip
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
56 views

Using React

The document summarizes the React project template for ASP.NET Core, which provides a starting point for building ASP.NET Core apps with a React frontend. The template sets up an ASP.NET Core backend API and a Create React App frontend project that can be run and published together. It is not intended for server-side rendering of React.

Uploaded by

hsuyip
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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 app


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:

.NET Core CLI

Copy
dotnet new react -o my-new-app
cd my-new-app
Run the app from either Visual Studio or the .NET Core CLI:

Visual Studio
.NET Core CLI
Ensure you have an environment variable called ASPNETCORE_Environment with value of
Development. On Windows (in non-PowerShell prompts), run SET
ASPNETCORE_Environment=Development. On Linux or macOS, run export
ASPNETCORE_Environment=Development.

Run dotnet build to verify your app builds correctly. On the first run, the build
process restores npm dependencies, which can take several minutes. Subsequent
builds are much faster.

Run dotnet run to start the app.

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:

console
Copy
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:

Add a .env file to the ClientApp subdirectory with the following setting:

Copy
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:

console

Copy
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:

C#

Copy
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.

You might also like