Creating a (.NET 6 based) website project with ASP.NET Core and React (TypeScript) in Visual Studio 2022?

Question

I have been trying to set up an ASP.NET Core + React (TypeScript) web app project in Visual Studio 2022, but couldn't succeed in doing so. There are no proper stacks/suites(?) in the Visual Studio 2022 create project dialog (File > New > Project...) that suit my needs.

I then tried what these docs say - and it works - but when I do the same for React TypeScript (i.e., using Standalone TypeScript React Template instead of Standalone JavaScript React Template) it doesn't work because this template doesn't have an Add integration for Empty ASP.NET Web API project. option in its setup (but the JavaScript template does).

How do I create an ASP.NET Core + React (TypeScript) project then?

I did see some modified and new files when the ASP.NET Core Web API integration option was enabled during the React.js (not TypeScript) setup. Can I copy those ASP.NET Core Web API integration files and their content, re-write the JavaScript files in TypeScript, and add those files (*.ts instead of *.js, etc.) in the TypeScript template? Or is there any other (official) method to properly set up an ASP.NET Core + React (TypeScript) project in Visual Studio 2022?

Juan Calderon · Accepted Answer · 2022-05-07 02:24:42Z

3

This is the guide do you need, just a consideration I changed this piece of code in aspnetcore-react.ts

fs.writeFileSync(
    '.env.development.local',
    `BROWSER=none
    HTTPS=true
    SSL_CRT_FILE=${certFilePath}
    SSL_KEY_FILE=${keyFilePath}`,
);

BROWSER=none Start without opening url in the browser because should be opened by .NET proxy

HTTPS=true Dev server to serve pages over HTTPS. Uses the .NET self-signed certificate

answered May 7, 2022 at 2:24

Juan Calderon

312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mrapi Over a year ago

followed the steps but 2 tabs are opened,one is React app and one shows: Launching the SPA proxy... 'This page will automatically redirect to localhost:44483 when the SPA proxy is ready.' and keeps loading... then a cmd window shows: "Something is already running on port 3000.Would you like to run the app on another port instead? » (Y/n)"

Arvind Suthar · Accepted Answer · 2023-08-11 14:31:27Z

1

You can use the "dotnet new react" command to create a template React and C# project. Here is a guide to upgrade that template code to TypeScript and Vite (also includes Azure AD, but I don't think you need that).

https://mindline.com/august-15-authenticating-apps-in-2023-a-closer-look/

Yesterday, the Visual Studio team released two much welcome improvements in 17.8 Preview 1.

I was not able to get the new template to deploy (even using the self-contained deployment option) so I am not recommending it just yet.

edited Aug 11, 2023 at 14:31

answered Aug 11, 2023 at 2:42

Arvind Suthar

1148 bronze badges

Collectives™ on Stack Overflow

Creating a (.NET 6 based) website project with ASP.NET Core and React (TypeScript) in Visual Studio 2022?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related