When developing a web application it is very helpful to run the application on an actual web server. The javascript community has built some really excellent tools in the last 5 years that make it very easy to do just that.
Grunt is “the javascript task runner”. What the heck does that mean? It means that a single command grunt can be used to kick off multiple commands and watchers. This is incredibly helpful when developing “modern” web applications where you may want to use coffeescript and sass instead of javascript and css and run the application on a web server. If you are familiar with Ruby on Rails we are going to create something similar to rails s.
This post will show you how to get started using node.js and Grunt to create an application server for hosting html and css. This post is not going to go over installing node.js. Here is a nice overview if you’re interested. Let’s get started
Grunt
First install Grunt npm install -g grunt-cli. The -g flag tells npm to install grunt globally on your machine. This is cool for Grunt, we want all applications to have access to it.
After installing grunt, create a package.json file and Gruntfile.js file in your application root. The package.json file is used by node.js to install dependencies and the Gruntfile.js a configuration file that tells grunt what to do.
package.json
{
"name": "my-first-grunt-app",
"version": "0.1.0",
"repository": {
"type": "git",
"url": "https://github.com/hoitomt/grunt-setup"
},
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.2"
}
}
// Gruntfile.js
module.exports = function(grunt){
grunt.registerTask('default', []);
};
After adding package.json and gruntfile.js run npm install. Notice that a node_modules directory is automatically created. Node installs all of your project’s dependencies in that directory. So far only grunt is installed.
This is the basic setup. All additional dependencies will be added to these two files. Dependencies are specified by adding one line to the package.json file in the devDependencies block, and then update Gruntfile.js with the configuration and runtime information.
First add the web server dependency. We’ll use the grunt-contrib-connect library. We also need to add the grunt-contrib-watch library in order to keep the server running.
package.json
...
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-connect": "~0.6.0"
}
...
Run npm install after adding the dependencies, and update Gruntfile.js
// Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
connect: {
server: {
options: {
base: './',
port: '4000',
host: '*'
}
}
},
watch: {
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect', 'watch']);
};
We added a connect task and a watch task to the grunt file. The connect task starts a server on port 4000 and the server will look in the root directory (./) for the html files. Then we told grunt where to find those tasks (loadNpmTasks). Finally we added the connect task and the watch task to the the default command so that when you run grunt it will run those tasks. Add an index.html file to the root directory so that you have something look at when you run the server.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Grunt Setup</title>
</head>
<body>
<h1>Grunt it</h1>
</body>
</html>
Now run grunt and navigate to http://localhost:4000. You should see the index.html file.
This setup makes it simple to add a web server to an application. Future posts will build on this setup to add additional functionality.
Recalibrate 