Make a Local Web Server With Grunt Connect

Last year I migrated my spa infrastructure away from ASP.NET MVC to just plain HTML. Removing this dependency gives me a broad latitude of freedom to work with any web server platform. Yes I know ASP.NET can now work across platforms, but in my opinion static HTML transcends that new feature.

Grunt Connect

First remember a SPA is a web application where rendering responsibilities moved from the server to the browser. This meant I no longer needed to rely on Razor to render my markup. In fact after evaluating the SPA mechanics I determined the core server-side rendering responsibilities could move to a node module executed as a Grunt task. More on that another day.

The next step was authentication, which I moved to the API. I still use ASP.NET MVC Web API, which has nice facilities to manage security.

Once rendering and authentication were managed I no longer needed ASP.NET and Visual Studio for that matter to code my SPAs. This left one final part, a local development web server. Visual Studio and ASP.NET ship with a local web server, invoked when you hit F5 or Ctrl + F5. The development server is a 'mini' version of IIS. However without Visual Studio and ASP.NET it is not the easiest thing to execute.

I knew there had to be another alternative. Rather than reinventing the wheel I did a few searches and found a few local node web server options. I did not need the node/express stack, just a simple server that could serve my static markup.

I also wanted to make my local web server part of my Grunt tasks because that makes the configuration easy to manage. There are several Grunt and Gulp plugins available for various local web servers. The one I found is connect. I am a Grunt user so I will discuss usage in terms of Grunt. If you are a Gulper, I am certain you can translate the usage.

Configuring Grunt Connect

Like all Grunt modules you pass a JSON object to the plugin. In the following example you see the configuration is pretty straight forward. Supply the localhost port number and if the server supports keep alives.

 connect: {    server: {  options: {   port: 27071,   keepalive: true  } }}

From here you can run the grunt command followed by connect to run the connect task. You could also make launching grunt connect part of a larger task definition, for example a startup script that calls the task.

If you run the command from the command line it looks something like this:

Grunt Connect

If you close the command window the server terminates. You can also press Ctrl + C and answer yes to if you want to close the server.

Under the Grunt plugin is the connect module. Connect serves as the foundation to just about any node HTTP server module. This means you could add additional plugins to extend the server's capabilities. I am not sure how extensible the Grunt plugin is in regard to connect plugins. I another post I plan on demonstrating how you can create a custom test API web server, which will get more hands on with the Node connect module.


The Grunt connect plugin empowers the developer to have a simple local web server to serve static web pages. The server is simple, yet offers enough features to be a powerful development web server. If you are like me and have migrated your web applications away from the classic server-side web frameworks Grunt-Connect provides you with an adequate web server utility for your local development needs.

Share This Article With Your Friends!