I’ve recently been working on a gradual rewrite of an existing ASP.Net/jQuery application using React/Redux/ES6. By gradual rewrite I mean we’re maintaining existing pages and introducing new ones as they are completed. This makes the work a little slower and more complex than would be the case if we were starting again from scratch, it also means we have to use the existing tools, in this case Visual Studio 2015.
I originally conceived this post as a how-to of configuring the Visual Studio 2015 development environment for using React/ES6 with existing ASP.Net applications. This was a bit of a painful learning process which can be summarised in these steps:
- Install NodeJS. If it’s already installed, update to the latest stable version.
- Update npm by running the following from the command line: npm install npm -g
- Install WebPack globally by running: npm install webpack -g
- Update Visual Studio 2015 to the latest Update.
- Install one or both Visual Studio Extensions Npm Task Runner or WebPack Task Runner.
- Make sure Visual Studio is using the latest version of Node and npm you installed and not it’s own old version:
- In Quick Launch type “external web tools”.
- Add the path to the latest version of npm on your machine (something like C:\Users\yourusername\AppData\Roaming\npm, can be found in Environment Variables) and move the entry to the top.
- Add the path to Node (likely C:\Program Files\nodejs) and move to 2nd top just under the npm path.
- Configure the webpack.config/npm build scripts to use Babel and whatever else (ESLint, Mocha, etc) to compile your React/ES6 code. This is the same as with any other environment and there’s lots of info and boiler plate out there.
- Optionally configure Task Runner Explorer to run the watch version of the build scripts on Project Open.
- If you’re using publish profiles add a BeforeBuild Target which runs the npm/webpack script in Production mode (it’s worth verifying React is not using development mode when publishing from Visual Studio or CI, I didn’t at first and it was).
So after doing all that you can start getting productive writing slick front ends using React, ES6 and whatever ever else takes your fancy from within Visual Studio 2015 (or even 2013 as you can install the Task Runner as an extension).
But alas your editor will likely look something like this:
Whilst Visual Studio 2015 does support React syntax, it seems to really struggle when ES6 is used too. You can see above the editor is utterly bemused by the ES6 modules which seems to throw it off for the rest of the file. There are a few little tweaks like this that certainly help, and Resharper can also either make things worse or better probably depending on licensed version.