Working as a developer it is very common to be working on extending existing code bases - the core of these often written years previously using tools and frameworks relevant to the time - rather than working on some funky new app from the ground up at some hip young startup. I’m not sure many of us would choose ASP.Net 5, combined with some front end JS framework, as a stack of choice for new applications, especially those which are essentially Single Page Applications. But there is a shit ton of ASP.Net code out there, plenty of it perfectly good, with masses of C# code handling the business logic, data access, various services, REST APIs etc. Since it’s .Net (I’m talking pre ASP.Net Core) developers working on these projects, like myself, will almost certainly be using Visual Studio 2015 or possibly even an earlier version.
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.