A template combining ASP.NET and React, using ASP.NET static files feature to serve the React build, and ASP.NET minimal API to provide a web service.
This template shows how to upload files from React to ASP.NET supporting large files (up to ~3Gb, configurable).
To create and edit your React app, work from the react folder, edit the React code as usual, like any other TypeScript app.
If your React application requires your web service to be running, run the .NET app (see below), and point React to https://127.0.0.1:9001/api/yourendpoints. In this case TCP ports will differ, needing CORS.
The web service already includes a POST /api/upload endpoint accepting file uploads.
Once the React application code is ready, run yarn build. This publishes
the optimized React build under react/build, needed later (see below).
As usual the React build merges and compresses all stylesheets and javascript
files.
Open app.sln in VS/VSCode/Rider and edit the .NET code as usual, like any other ASP.NET app.
The code uses ASP.NET minimal API syntax, making it easy to add new endpoints.
The web service already includes a POST /api/upload endpoint accepting file uploads.
The ASP.NET build process copies files from react/build to aspnet/wwwroot. The logic used to copy these files is defined in aspnet.csproj.
- Build the React app (see above).
- Build the ASP.NET app. The build process copies files from react/build to aspnet/wwwroot.
- Start the ASP.NET app. The .NET app runtime provides both a Web API and a Web app, on the same port.
- Open https://127.0.0.1:9001 (or http://127.0.0.1:9000) in your browser, enjoy.