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 <task-name>For us, this would mean to launch our server, we would execute:
grunt connect:exampleHowever, by registering this as the default task, we only need to execute:
gruntNow 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 installThis will create a new folder, MYAPP_HONME/node_modules, and store our dependencies there. Now we can launch our server with:
gruntYou 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
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.
Thanks for boiling this down in to such a quick, digestible chunk!
What is required for hosting such a project on some dedicated server in the internet? Is a simple apache host sufficient?
It’s rally an easy setup and anyone can easily understand. Thanks a lot man for giving such and easy example 🙂