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?

Solution 1

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.

Solution 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.

Solution 3

I did this with VS 2017 using article (click here). There you would find a template called Blank Node.js Web Application, please find it here .

Few good to know points:

• In Visual Studio 2017 there is no specific template for React as we have for Angular.

• There's a difference if you create your project using cli (refer here) and with Visual Studio. Cli created project loads all modules by default in node_modules and hence takes around 132 MB initially, but in case you create project using Visual Studio it loads only the required modules in node_modules and hence takes around 75 MB initially. This matters when you start deploying it in production.

Hope it'll help you !

Disclaimer: It always depends on requirements.

Comments

[Lojka]

i use default ASP MVC project for this kind of settings

[Ken Tucker]

marketplace.visualstudio.com/…

[Marc L.]

@KenTucker, that template doesn't work in VS 2017

[Marc L.]

This really isn't a bad idea. You can keep the React application directory under the same solution directory/Git repo as your VS17 projects. With multiple monitors you can have an IDE in each. On a purely aesthetic level, the lightweight VS Code just feels more appropriate for JS/TS web development, with npm/yarn/react commandline handling the builds.

[n daniel]

I'm just dipping my toe in here, but it looks as if, in step 5, you can choose "From Existing Node.js code" and then select the directory you made in step 4 with create-react-app. It uses that directory directly, and places any .sln and .proj files there.

[Ivan Paniagua]

I will add after when is ready for deploy to production- run the command "npm run build" and move to the root of the content. You won't need start again another server/port.

[Muhammad Adnan]

The react-scripts-ts package is deprecated. TypeScript is now supported natively in Create React App. You can use the --typescript option instead when generating your app to include TypeScript support. Would you like to continue using react-scripts-ts?