So far I have:
In this post I will ramble on about setting up the environment for the front-end, our state-of-the-art AMD-module enabled backbone.js application.
For the sake of brevity, I will exclude the following requirements from the explanation - but they will indeed be necessary to be in place if you wanted to play along:
By the way, I, like many other people, despise unfounded strong opinions around platforms, frameworks and libraries. That said, here’s mine: If you consider using Subversion on a new project and you have control over which version control software to use, don’t. Just don’t. Use Git.
Now, where was I? Let us extend the capability of Grunt to assist us with our project scaffolding. That is, instead of creating our own skeletal folder and file structures, we’ll instead opt for the magic that is
grunt-init. If you haven’t seen this yet, prepare to be amazed. This is the
First, install it, because it has been split of recently from the main
grunt project. After successful installation, which you can verify by opening the terminal and typing
I’d love for you to navigate to
%USERPROFILE%/.grunt-init if you are on Windows, like me. We now want to clone a Git repository from Github, resulting in a folder in this location called
standardstack. That name is not well chosen, and I do feel guilty about it. Nevertheless, carry on by now executing the following:
git clone https://github.com/onehumanunit/grunt-init-standardstack.git standardstack
Now create a folder for your new project. I’ve picked this location:
Point a terminal there (
cd c:/development/todolist), and simply type:
It will prompt you for a project name and title, and subsequently give you a list of further commands to execute. Execute them one after the other, just as instructed:
I encourage you to now look inside that project folder and find the awe-inspiring structure there, all set up and welcoming you as its hero who will raise it from its skeletal simplicity into the beast that it will become.
I always cry here. No, be strong. We soldier on.
If we could set up a server and point an alias to the
/dist folder there, we could simply add changes to any of our files, and refresh the browser to see the updates. This is made possible by virtue of grunt’s
watch task that listens in on changes in the specified folders.
To do that, let’s install WAMP and add an alias:
We can now point our browser to:
and constantly refresh there after each change is saved in our project. Everything is concatenated, minified and compiled on the go.
Finally, I recommend one more tool - an IDE this time - Brackets. After some terrible sleepless nights, I have come to the point where I can definitely say Eclipse is just a bit too heavy for js development. I mean, I’ve allocated 4GB of juice to it -
-Xmx4096m, having 16GB in total available. It doesn’t use all of that, to be fair, but it tries to help so much that it slows me down and I find myself waiting for it to catch up too often. Too often, I tell you. So, Brackets is my new best friend, and I haven’t looked back yet. Well, I have, but only to give Eclipse that look you give an ex.
So now, for those of you who are into that sort of thing, you could download the grunt and git extensions for Brackets, and manage everything inside the IDE. This is not a requirement, but I’ll tell you, I myself have done that, and I am still thrilled to have the grunt tasks listed in a sparkly GUI. It’s just nice.
I recommend the above setup for a broad range of projects. Automation is generally very rewarding. There is a plethora of very practical grunt-init powered setups out there. I challenge you to search
grunt-init in GitHub. You’ll soon see what I mean.
This brings us to the end of this post. In the next one, we’ll create the to-do list. Thanks for reading!