React project in Visual Studio 2017

Question

I want to develop a React application in Visual Studio 2017 alongside my .NET application (in the same solution).

I am using TypeScript, so I want a project type where I can customise the build (I want to webpack the project, etc, so the standard Visual Studio TypeScript build is not enough).

I have installed the node.js developer tools but they only allow me to create node.js specific projects (which run a node.js instance when started) and do not let me customise the build process.

Which project type will be best for this?

Answer 1

I've seen people recommend adding the folder containing your React project by right-clicking on the solution and "Add -> Existing Web Site", then excluding it from the build from "BUILD -> Configuration Manager".

Answer 2

Another possibility is to use the react extension in Visual Studio Code. That's not exactly what you asked for, but you get a look and feel similar to Visual studio and full React support.

Answer 3

I recently did this and would recommend the following:

1. Create a "Blank" solution project in Visual Studio 2017.
2. Add/create your .NET project as you would normally in Visual Studio.
3. Now create your React project. I used the create-react-app from Facebook to actually generate my React project. This has a lot of really good built in features such as Webpack, Jest (for testing), yarn (for package management), etc. However, these details are "hidden" from you so the generated project looks much simpler. If you do need more control over the build/testing process you can run the create-react-app eject command. Be advised that this is a "one-way" operation as you can't put the files back in to create-react-app. You will need to install node and yarn separately, if that wasn't obvious.

4. Since you also want to use TypeScript you should use the react-scripts-ts script like so:

   create-react-app my-app --scripts-version=react-scripts-ts

   Microsoft has a good walk through here.

5. The tricky part is getting the generated React project into Visual Studio. I did this by installing the "Node.js development" module from the "Visual Studio Installer" that gets installed with Visual Studio. Unfortunately, Microsoft seems to have removed the blank or empty TypeScript project template (see here).

6. Once the Node.js tools are installed you can create a node based project in your solution. There are several to choose from under the File -> New -> Project... -> Templates -> Other Languages -> TypeScript left menu navigation. I chose "Blank Node.js Web Application".

7. After that you will need to copy over the React project files created by create-react-app into your Visual Studio project. I find it easier to create the directories in Visual Studio so they are added to the project file, then copy the files the generated folders, and finally add them to the project folder in Visual Studio.

8. At this point you can run the scripts in the package.json file that were added by create-react-app. I prefer to run these at the command line, but you can run them in Visual Studio as well using the "Task Runner Explorer" by Mads Kristensen.