122013Jun

Grunt server installation

After we have a JavaScript development app in place, we need a server to host the app.

in this article-series we will:

  1. Setup a develpment app
  2. Get a grunt-server up and running ( this article )
  3. Develop big JavaScript Apps for SharePoint

Grunt installation

To get started quickly, you can use Yeoman. Yeoman is a tool/workflow that is build on grunt. I will let you use bower to install js packages (like nuget) and you can scaffold your projects with some simple commands. Yeoman will come with a fully configured grunt server. Later you may want to do things a bit different – i will provide you with a yeoman configuration, so that you can work with less instead of sass.

So, here are the simple steps ( detailed steps )

  1. download and install NodeJS
  2. open the command shell
  3. this command will install grunt-cli, yeoman and bower: npm install -g yo grunt-cli bower
  4. type: npm install -g generator-webapp .This generator will
  5. create a new folder. (example  c:\myapps\myfirstapp)
  6. go to your new folder, type: yo webapp to automatically install HTML5 Boilerplate, jQuery and Modernizr (+Twitter Bootstrap if needed)

Now, you have a basic webapp installed.

You can start the server by typing: grunt server

See everything in action

Now, that your grunt server is running ( do not close the command shell ), all you need is to go to your SharePoint site and open your JSDEV-App we created in part 1. If you are using Visual Studio as your editor, select “File” -> “Open” -> “Website” and open the apps folder in your webapp directory (example: c:\myapps\myfirstapp\app). Make sure you have the WebEssentials plugin installed

A grunt server for .less

I think that in the Microsoft/Windows world, we are using .less instead of .sass. To install a grunt configuration that will use .less, you need to install a new yeoman generator (globally):

npm install -g generator-lessapp

Then, you make a new folder (example: c:\myapps\mylessapp), you go into that folder and type:

yo lessapp

next step

To be able to build big JavaScript Applications, you may want to use a Framework like AngularJS -> part 3 ( soon )

Leave a Reply

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

Current month ye@r day *