JavaScript
Enterprise Mobile – More Than iOS vs Android
April 1st, 2014
Android vs iOS is the wrong question. Our job as mobile consultants is to solve a business problem and use that solution to bring value to the client.
Charlie Horning
Running a Lightweight Static Server with Grunt
Running a Lightweight Static Server with Grunt.
Object Partners
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 MYAPPHOME. Create a new src folder in your project root: MYAPPHOME/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 MYAPPHOME, run:npm installThis will create a new folder, MYAPPHONME/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.
Related Blog Posts
JavaScript
Groovy convenience in JavaScript with Lo-Dash
February 7th, 2014
Discover the JavaScript equivalents of Groovy helper methods in the Lo-Dash library
Object Partners
JavaScript
Resolving browser-specific issues using the Grails Resources plugin
November 21st, 2013
Internet Explorer caps the number of CSS rules in a file, while Chrome throws a 404 on missing source maps. Customizing the Grails Resources plugin can help.
Igor Shults
About the author
Object Partners
The Company
Insert bio here