by Kyle Ballard | Programming

Setting Up A React & Web API Development Environment in Visual Studio 2017

Front-end frameworks like React, Angular, and Vue are making big waves in software development. Microsoft makes great tooling for working with JS frameworks like those in the form of Visual Studio Code. There is also a large trove of information and tutorials getting setup inside the VS Code environment. One specific resource I really appreciated was Cory House’s Pluralsight course on setting up a JS development environment.

Unfortunately, at least in my experience, there isn’t much available out there on how to setup a React dev environment using Visual Studio 2017, for those of us who wish to use only a single editor to maintain our .NET applications. My hope is, that the rest of this guide will serve as a useful resource for anyone else who is facing this same impediment to getting started and will end up saving them time.

Some pre-requisites before we get started:

Disabling Package Restore in Visual Studio

Visual Studio tries to take care of a number of things for you when dealing with npm pacakges. Some people prefer this, other’s don’t. I fall into the latter camp. It took me a bit of headache to figure this out, but by default, when you save a packages.config file, Visual Studio attempts to run ‘npm update’ for you automatically when you save the file or open the solution. So, if you are trying to run the command yourself after updating packages.config, then you are going to run into file locks with the /node_modules/ folder.

Thankfully Visual Studio offers you a way to disable the automatic updates when saving packages.config. Navigate to Tools > Options, then to Projects and Solutions > Web Package Management > Package Restore and set the following settings for NPM (below). What this does is prevents npm from being executed every time you open a project, or run a command line ‘npm update’/’npm install’. You can leave these on if you wish, but for me I found the experience better by being able to execute the npm command line syntax myself.

Setting Up The Application

Instead of walking you through line by line of each step you need to follow, please download the sample application from Github. There are a few important areas that I think are worth mentioning.

  • If you changed the package restore settings above, you’ll want to run “npm install” inside each project after cloning.
  • The ‘Empty’ solution assumes the webpack-dev-server for hosting, so when you run ‘npm start’, webpack will host a simple webserver at the port listed in webpack.config.js.
  • The ‘MVC’ solution assumes it will be hosted by IIS Express or the built in webserver. The ‘npm start’ command on this application will actively watch for JS file changes and rebundle them for you. No need to recompile to see your changes unless you something managed by .net.
  • This approach does leverage Babel as the transpiler. If you would like to use TypeScript, you could do that as well.
  • The webpack configuration assumes that the application start/root is /ClientApp/index.js.
  • The webpack configuration also assumes that everything is written to the /wwwroot/ folder as is convention with ASP.net Core projects in Visual Studio 2017.

I hope you find this post useful. It took me a bit of searching to figure some of this out since most tutorials focus on Visual Studio Code. Feel free to reach me on twitter if you have questions about any of this. Happy programming.

 

Kyle Ballard