Visual Studio stopps responding when creating new React + .NET project

Question

Hello.

I have a problem when creating new project in Visual Studio.

I am trying to create new Fullstack React + .NET project using the official React + .NET template.

However upon creating new project, the console gets opened and quickly closes only for Visual Studio to stop responding.

Answer 1

Could be an extension that you have installed, incorrectly set up tools, etc. I would recommend you use Report a Problem in Visual Studio to report the issue to MS. While you're waiting ensure you have the latest version, try running VS in safemode (/safe) and check the event logs to see if any errors are reported. Ultimately VS is going to create a basic project and then run the CLI tools to set up the React project. You can always do this manually if you need to but you'll need to refer to online help somewhere to figure out the steps. I don't use React so I cannot provide them here.

Answer 2

we need more info. version of VS, version .net core, and if you used visual studio or the dotnet cli to create the project and any options used to create the project. also did you pick javascript or typescript template? what version of node did you install?

if you used all the lastest, if you look at the file system. there should be two project folders

<name>
 <name>.client (a node vite project)
 <name>.server (a .net 8 webapi project)

the client project should look like:

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.784122">
  <PropertyGroup>
    <StartupCommand>npm run dev</StartupCommand>
    <JavaScriptTestRoot>src\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
    <!-- Allows the build (or compile) script located on package.json to run on Build -->
    <ShouldRunBuildScript>false</ShouldRunBuildScript>
    <!-- Folder where production build objects will be placed -->
    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
  </PropertyGroup>
</

the server project should look like (with you project name and port number). the vite port number should match between vite.config.js and webapi project file:

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <SpaRoot>..\<project name>.client</SpaRoot>
    <SpaProxyLaunchCommand>npm run dev</SpaProxyLaunchCommand>
    <SpaProxyServerUrl>https://localhost:5173</SpaProxyServerUrl>
  </PropertyGroup>
  <ItemGroup>
    <ProjectReference Include="..\<project name>.client\<project name>.client.esproj">
      <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy">
      <Version>8.*-*</Version>
    </PackageReference>
  </ItemGroup>
</Project>

as VS will typically build the client first, the VS build console should show the node build messages

to debug:

• vs starts the webapi project
• vs starts the node vite project (which will proxy to the webapi)

note: the vite proxy is configured for ^/weatherforecast => http://localhost:<api port>