Merging an existing React project with an empty Visual Studio .NET Core backend

I'm new to React so I was pleased to finally discover that this task is very easy. After going through all the tutorials on how things work, and diligently searching down a decent React project template, I finally had an existing open source React dashboard that I wanted to integrate into an brand-new .NET Core project which I could then modify to my heart's desire. I thought I would need to carefully stitch things together once I had figured out where to put the files, but it turns out to be so simple! All I needed to do was delete the (nearly) empty stubs within the ClientApp folder generated by the Create React App dotnet module, and drop in the existing project instead.

Here is how to do it:

At the command line, preferably in your C:\Users\%USERNAME%\source\repos\ folder, type the following, replacing <NewProjectName> with something like "Dashboard" (for my example), or whatever you want. This assumes you've already installed the .NET Core Command Line Interface, and if you haven't done that yet, follow the link and quickly install it. Then type, in an empty directory:

dotnet new react -o <NewProjectName>

This will generate the structure of a .NET Core project.

Go into the new ClientApp folder and delete everything in it. (I actually kept the .gitignore file because one didn't come with the React project I was going to inject, but it's safe to delete everything).

UnZip or copy the new React project into this same ClientApp directory. The structure should look something like this:

 

After you do this, navigate there with the command line and type:

npm install

This will populate the node_modules folder.

Go to the root <NewProjectName> folder and double-click on the .csproj file, which will open the project in Visual Studio (or, if Visual Studio is already open, just File/Open, and navigate to this file). There may be some minor tweaks you make so the application appears properly in Visual Studio's Solution Explorer. For example, I had to manually add a "src" folder (using "Add existing folder"). I also manually removed an unneeded "documentation" folder from the project.

Then I compiled the code, and started the project.

It worked. Just like that.

 

Posted in Developing Software on Sep 10, 2018