create-asp.net-core-app-with-react

Create ASP.NET Core app with React in Visual Studio

In this post I am  going  to build an ASP.NET Core project as an API backend and a React project as it UI.

Currently, Visual Studio 2022 includes ASP.NET Core Single Page Application (SPA) templates that support Angular and React. The templates provide a built in Client App folder in the ASP.NET Core projects that contains the base files and folders of each framework.

You can create the client project with with ways:

  1. Put the client app in a separate project, outside from the ASP.NET Core project.
  2. Create the client project based on the framework CLI installed on your computer

Prerequisites

Make sure that you have installed the following softwares:

  • Visual Studio 2022 or later with the ASP.NET and web development workload installed.
  • Go to the Visual Studio downloads page to install it for free. If you need to install the workload and already have Visual Studio, go to Tools > Get Tools and Features, which opens the Visual Studio Installer. Choose the ASP.NET and web development workload, then choose Modify.
  • npm (https://www.npmjs.com/), which is included with Node.js
  • npx (https://www.npmjs.com/package/npx)

Create the frontend App

  1. In the Start window (choose File : Start Window to open), select Create a new project.
  2. Search for React in the search bar and then select Standalone JavaScript React Project as shown in the following image:

create-asp.net-core-app-with-react-2.png

3. Give your project name: aspnetcorewithreact-frontend and Soution name: ASPNETCoreAppWithReact. When you get to the Additional information window, be sure to check the Add integration for Empty ASP.NET Web API Project option. This option adds files to your React template so that it can be hooked up later with the ASP.NET Core project.

4. Press to Create button to create the Solution.

It takes a little time to install npm and more.

Once the project is created, you can see the following project structure:

create-asp.net-core-app-with-react-1.png
Project structure for Front-end project.

Under the src folder you see the following files:

  • App.js
  • App.test.js
  • App.css
  • index.css
  • index.js4.

Two  files out of src folder:

  • aspnetcore-https.js
  • aspnetcore-react.js

5. Run the Project, by selecting a browser from the Debug toolbar, such as Chrome or Microsoft Edge. If you press to F5 to start the Front-end project then, a command line prompt is displayed first  and  then after browser shows the following:

create-asp.net-core-app-with-react-4.png
Output of ASP.net core project

Create the backend app

    1. In Solution Explorer, right-click the solution name and Add, then select New Project. and give the name of project.
    2. Search .net core and select the ASP.NET Core Web API project as following:
asp-net-core-choose-web-api-template-5.png
Creating new project

3. Give your project a name,  in my  case (AspnetcoreWithReact-Backend)  When you get to the Additional information window, select .NET 6.0 as your target framework.

Once the project is created, the Solution Explorer shows the following image:

create-asp.net-core-app-with-react-6.png
Solution structure for both Back-end and Front-end projects

Set project properties

  1. In Solution Explorer, right  click on the ASP.NET Core project and choose Properties.
  2. Go to the Debug menu and select Open debug launch profiles UI option. Uncheck the Launch Browser option.

Set the startup project

  1. In Solution Explorer, right-click the solution name and select Set Startup Project. Change the startup project from Single startup project to Multiple startup projects. Select Start for each project’s action.
  2. Next, select the backend project and move it above the frontend, so that it starts up first.
create-asp.net-core-app-with-react-7.png
Configurering startup of multiple projects

Start the project

  1. Before you start the project, make sure that the port numbers match. Go to the launchSettings.json file in your ASP.NET Core project (in the Properties folder). Get the port number from the applicationUrl property. If there are multiple applicationUrl properties, look for one using an https  endpoint. It should look similar to https://localhost:7049.
  2. Then, go to the setupProxy.js file for your React project (look in the src folder). Update the target property to match the applicationUrl  property in launchSettings.json. When you  have updated, then value should look similar to this:
 target: 'https://localhost:7080'

3. To start the project, press F5 or select the Start button at the top of the window. You will see two command prompts appear:

  • The ASP.NET Core API project running
  • npm running the react-scripts start command.

Note: Check console output for messages, such as a message instructing you to update your version of Node.js.

Frontend project shown as following:

create-asp.net-core-app-with-react-8.png
Front -end output

Backend project (Asp.net Core) starts browser with Swagger UI as following:

create-asp.net-core-app-with-react-9.png
Back-end project output

As you should see a React app (WeatherForecast) appears, whichis populated via the API.

If you see any Error look to the Troubleshouting in the end of this post to find resolution.

Publishing the project

Starting in Visual Studio 2022 version 17.3, you can publish the integrated solution using the Visual Studio Publish tool.

Note: To use publish, create your JavaScript project using Visual Studio 2022 version 17.3 or later.

  1. in Solution Explorer, right-click the ASP.NET Core project and choose Add : Project Reference.
  2. Select the React project and choose OK.
  3. Right-click the ASP.NET Core project in Solution Explorer and choose Unload project. This opens the .csproj file for the project.
  4. In the .csproj file, update the project reference and add <ReferenceOutputAssembly> with the value set to false. When you’ve updated the reference, it should look like this (substituting your own project folder and project name).
  5. Right.click the ASP.NET Core project and choose Reload Project.
  6. To publish, right click the ASP.NET Core project, choose Publish, and select options to match your desired publish scenario, such as Azure, publish to a folder, et al.

The publish process takes more time than it does for just an ASP.NET Core project, since the npm run build command gets invoked when publishing.

Publishing is seen in the Visual studio as following image:

create-asp.net-core-app-with-react-10.png
Publishing UI in Visual Studio

The published files  are iunder: bin\Release\net6.0\publish.

You can modify the npm run build  command using the Production Build Command in the React project properties. To modify it, right-click the React project in Solution Explorer and choose Properties.

Troubleshooting

You may see the following error:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Resolution:

If you see this issue, most likely the frontend started before the backend. Once you see the backend command prompt up and running, just refresh the React App in the browser.

Now the structure of project is ready, and you can change the content in the different files and build it.

All Source code can be found in my Github

Conclusion

In this post, you’ve seen how to start a React front-end project and integrate it with ASP.net Core Backend project. You have learned also how to configure and integrate these project and how to start and how to publish them.

In my next post I am going to describe how to  Build a React App With .NET Core  Backend

This post is part of “React-Step by step”.

Back to home page