IIS with Node, Express, and VueJS development server

IIS is easy to use with Node, Express and Vue. Yes, you heard that right.

Do you have websites that you would like to add a full or partial VueJS front-end to, but need to communicate with a .NET api? Do you have an Express server you would like to easily integrate with an existing .NET site? Or do you just want to use an excellent and powerful Windows web server to host all of your Node development? I thought so. Here’s how you can have it all.

This also works with many other varieries of server technology. It will also work with React or Angular, and any kind of http server.

First, install Application Request Routing (currently version 3) in IIS. You can do this through the Web Platform Installer, or you can just go to the ARR homepage and click the install button.

Next, install URLRewrite (current version 2.1) in IIS. Again, this can be done through the Web Platform Installer, or from the tool’s home page here.

Configure Application Request Routing

You don’t usually need to reboot the server after those installations, but you will need to close and reopen IIS Manager (if you have it running) for the applets to show up in the list. Once you have reopened IIS Manager, look for “Application Request Routing Cache” on the top server level:

You’ll notice that ARR adds a Server Farms section to IIS Manager. No need to do any farming though.

You only have to do one thing with this item. Double-click on the icon to open it, then in the right hand panel, below proxy, choose Server Proxy Settings…

This will open a new panel. There just check the Enable proxy box, right at the top, then click “Apply” under Actions over on the right. That’s it, don’t touch anything else.

Head back to the top level, and from there we can now use URLRewrite to link any of our IIS hosted websites to any available web service running anywhere on the internet.

Use Express to serve a website hosted by IIS

This is the simplest case: if you have an Express web server running, say on port 8080 on the localhost, you can link it to an IIS website using URLRewrite like this. In IIS Manager:

1. Create the website
2. Open URLRewrite for that website
3. Click Add Rule(s)…
4. Choose Blank Rule
5. Give the rule a name
6. In Match Url set the using dropdown to Wildcards
7. Put an asterisk in Pattern (to match all incoming requests)
8. At the bottom, set the Action to Rewrite and set the Rewrite URL to http://localhost:8080/{R:1}

Like this:

URLRewrite setup to pass all website requests to a different server

The {R:1} paramater passes the URL path through to your Express server.

Now, bear in mind you could point the Rewrite URL field anywhere. So your Node server (or any other server for that matter) doesn’t even need to be on the same machine.

Host an Express site in a subfolder in an IIS website

You can probably see how to do this by now, but to make it clear, you can very simply add this functionality in a subfolder of the main site just by changing the Pattern field, like this:

Now you can have an IIS Asp.NET website running in every other part of the website, but when your users hit this directory, it will run your Node Express server (or, again, any other kind of web server you want). That means you can be running an Asp.NET API, for example.

Host your VueJS development server in IIS

So now you can probably guess how this works too. Just boot up your VueJS dev server and copy its URL into the Rewrite URL field of the URLRewrite panel:

The VueJS dev server gives you the address

In the case above, the Rewrite URL field would look like this:

Paste that address into the Rewrite URL field of the URLRewrite panel

Now you will get the hot-reloading capabilities of the VueJS dev server even when you run it under IIS, which speeds up your development time dramatically.

I guess I should point out that you would only use that particular configuration in development: for production you would simply copy your files to the server and host it, using URLRewrite in a similar way but pointing all requests to the index.html file of the VueJS app, and adding conditions to exclude existing files, so that linked .js and .css files will loaded:

In your production setup, simply host your VueJS app using IIS.

You can use this technique to host just about anything you want in IIS. It is simple, clean and robust, and there are many other tricks you can perform with this simple piece of IIS magic.