How to add a pure React project to an existing solution in Rider - rider

Question

I have an existing solution with a few different .Net Web apps and class libraries on it. Our front end team is busy working on a new React / NextJS app that will run on Node.
I'd like to include this project into our Rider solution but it doesn't have a project file or anything like that. It's just a folder.
How do I do this?
I see I can create a "Project Folder" in Rider which I can nest actual .Net Web or library projects under. Is it possible to include this new folder under one of these?
I see there is an option when I right click on the folder to "Attach to solution". Is this what I'm looking for?
Thank you =)

Answer 1

For this kind of applications, Rider has an Attach Existing Folder action.
Right-click your solution, choose Attach Existing Folder, and then select a folder containing the frontend application sources.
It will be visible near the solution in the Solution view, and you'll be able to work on it normally (as you would if it was included into the solution).
Please note that an "Attached folder" is not the same as a "Solution folder" (since it isn't tied to the solution in any way, and cannot contain .NET project structure).

Answer 2

For anyone still reading this, there i another way which I find better, because you can exclude subfolders (for example node_modules).
Create a Project.njsproj file and use this as an example to populate it:
<Project>
<Import Project="$(VSToolsPath)\Node.js Tools\Microsoft.NodejsToolsV2.targets" />
<PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
<SchemaVersion>2.0</SchemaVersion>
<ProjectGuid>{1d5f9c22-57bc-4a29-8528-2b5b775c37f6}</ProjectGuid>
<ProjectHome />
<ProjectView>ShowAllFiles</ProjectView>
<WorkingDirectory>.</WorkingDirectory>
<OutputPath>.</OutputPath>
<ProjectTypeGuids>{3AF33F2E-1136-4D97-BBB7-1795711AC8B8};{349c5851-65df-11da-9384-00065b846f21};{9092AA53-FB77-4645-B42D-1CCCA6BD08BD}</ProjectTypeGuids>
</PropertyGroup>
<ItemGroup>
<Script Include="src/**/*" />
<Script Include=".gitignore" />
<Script Include=".eslintrc.cjs" />
<Script Include="index.html" />
<Script Include="package.json" />
<Script Include="tsconfig.json" />
<Script Include="tsconfig.node.json" />
<Script Include="vite.config.ts" />
</ItemGroup>
</Project>
Then add it as a project in the solution