Feb 26, 2014

Running a Lightweight Static Server with Grunt

So you’re a Grails/Java/Some Other MVC developer, and you’ve taken the leap: your next application is going to be single page with a RESTful backend. Congratulations! But where do you start? The first thing you want to do is separate your application into two: the backend, and the front. Now there is no need to rebuild anything when you’re working on the front end. There is no need to spin up Tomcat or whatever container you would typically deploy your backend to. All you need is a lightweight static sever, and Grunt is perfect for this. Actually, Grunt is great for executing and automating a lot of your front end tasks, but for this article, I will focus just on setting up a static server.

Let’s just create a very simple front end app to demonstrate. This demonstration is dependent upon having the Node Package Manager installed. The easiest way to do this is to install node.js. There are installers available for almost any platform you’re going to use.

First create a new directory for your new project. I’ll call this folder MYAPP_HOME. Create a new src folder in your project root: MYAPP_HOME/src. In that folder, create a new file, index.html. All we need in this file right now is one line:

<html><body>Hello World</body></html>

Congrats, you have a static app now! Of course, you can “run” this app by simply opening the HTML file in the browser of your choice, but this stops working as soon as your app needs to load any other file. It needs to be served up. So let’s create a server. Back in MYAPP_HOME, create a new file and call it package.json:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-connect": "^0.2.0"
  }
}

This file describes the dependencies for your project. We have two. We need Grunt to execute our tasks. Grunt-connect will spin up the static server for you.

The next file we need to create is Gruntfile.js:

module.exports = function(grunt) {

	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		connect: {
			example: {
				port: 1337,
				base: 'src'
			}
		}
	});

	grunt.loadNpmTasks('grunt-connect');
	grunt.registerTask('default', 'connect:example');

};

This file configures Grunt for us.  The initConfig() method does just what it sounds like it does. It initializes the Grunt configuration. In this method, we are configuring a new connect task, with one subtask, example. This describes our static server. We are telling it to run on port 1337, and use the src folder (relative to the location of Gruntfile.js) as the base for content. The loadNpmTasks() call is used to tell Grunt which NPM tasks we are going to use. This tells Grunt what “connect” means. Lastly, we register the default task. Using Grunt, you can execute any task with the format:

grunt &lt;task-name&gt;

For us, this would mean to launch our server, we would execute:

grunt connect:example

However, by registering this as the default task, we only need to execute:

grunt

Now that everything is in place, we need to install our dependencies. This is done using the the Node Package Manager. In MYAPP_HOME, run:

npm install

This will create a new folder, MYAPP_HONME/node_modules, and store our dependencies there. Now we can launch our server with:

grunt

You should see output that looks like this:

Running "connect:example" (connect) task
Opening server for MYAPP_HOME/src on port 1337.

Now open the browser of your choice and navigate to http://localhost:1337 and see your Hello World.

About the Author

Object Partners profile.

One thought on “Running a Lightweight Static Server with Grunt

  1. Ashay Naik says:

    This is a very nice short, sweet and simple way to get Grunt web server started. I was looking everywhere for such a tutorial. Thanks for you this.

  2. Patrick says:

    Thanks for boiling this down in to such a quick, digestible chunk!

  3. Dmitry says:

    What is required for hosting such a project on some dedicated server in the internet? Is a simple apache host sufficient?

  4. Girish says:

    It’s rally an easy setup and anyone can easily understand. Thanks a lot man for giving such and easy example 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
Getting Started with CSS Container Queries
For as long as I’ve been working full-time on the front-end, I’ve heard about the promise of container queries and their potential to solve the majority of our responsive web design needs. And, for as […]
Simple improvements to making decisions in teams
Software development teams need to make a lot of decisions. Functional requirements, non-functional requirements, user experience, API contracts, tech stack, architecture, database schemas, cloud providers, deployment strategy, test strategy, security, and the list goes on. […]
JavaScript Bundle Optimization – Polyfills
If you are lucky enough to only support a small subset of browsers (for example, you are targeting a controlled set of users), feel free to move along. However, if your website is open to […]
Creating Mocks For Unit Testing in Go
Unit testing is an important part of any project, and Go built its framework with a testing package; making unit testing part of the language. This testing framework is good for most scenarios, but you […]