Visual Studio 2015 with ASP.Net, React and Modern JavaScript Development
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.
Whilst I ignored all the squiggly lines for while and used ESLint for general linting to make up for the lack of real-time visual feedback, what I really wanted was intellisense. Writing large amounts of modular code in a totally dumb text editor is not productive. Eventually I gave up and looked first to Atom and then Visual Studio Code (I was looking for something free so ruled out Sublime and WebStorm) for the JavaScript development within the ASP.Net project. Atom is great but takes a lot of configuring, Visual Studio Code is fantastic for JavaScript development pretty much out of the box and very easy to browse/add extensions. The instellisense and environment is very rich, it just works with no effort required.
I still use Visual Studio 2015 to build/run/edit the C# code, but whenever I’m working on the JavaScript, which is most of the time currently, I switch to Visual Studio Code and have been much more productive because of it. The next release of Visual Studio will include the salsa engine, so the JavaScript development environment should be comparable to what you get with Visual Studio Code now. Until then I would recommend using an alternative editor for the bulk of any JavaScript work and Visual Studio 2015 just for the ASP.Net/C# stuff.