Running an Express server with Grunt and Yeoman: Part 1
In this series, I’m going to explain how to instantly and easily start a custom back-end server based on Node.js and Express, and automatically see your incremental front-end and back-end changes applied both in your browser and on the server. Also, a bonus: how to debug your Node.js server in WebKit Inspector / Chrome Developer Tools. Excited yet? Let’s get started.
Intro
If you’re still reading this, you just might be a web engineer. If you’re using Node.js (which you totally should, it’s awesome!), your workflow probably goes something like this:
- Change a few JavaScript files.
- Refresh the page.
- Change a few Sass/LESS files.
- Recompile said Sass/LESS files.
- Refresh the page.
- Maybe you have some client-side templates. You change ’em.
- Maybe you precompile said templates. You recompile ’em.
- Refresh the page.
- Change a few files on the backend.
- Restart the web server.
- Refresh the page.
You see where I’m going with this. More than 50% of those are time-consuming tasks that are more time spent not writing code. And we love to write code, right? That’s why we do this thang.
What is Grunt?
Grunt is the engineer’s Tylenol, created to alleviate this pain felt by engineers the world over. It will watch the files in your project for changes and automatically send them to the right tool to be processed. Sass and templates compile themselves the moment they’re saved, and the page refreshes itself. Heck, if it’s CSS-related, the style changes are displayed immediately, no refresh needed. It’ll concatenate and minify your JavaScript and CSS. If you use RequireJS, it’ll even build out all of the modules in your project for production. And the list of Grunt’s awesome tasks just goes on like that.
All of this makes Grunt a powerful, time-saving tool that should be in every developer’s toolbox. Because we all know, a good developer is a lazy developer. But we’re not done yet, because Grunt will even run a web server for your front-end files right on the spot. No setting up and maintaining complicated web servers like Apache or Nginx. Just one command and your files are served and watched for changes. Ctrl+c or Cmd+c in the terminal and the server disappears into the ether.
What is Yeoman?
Yeoman is a command-line tool to scaffold out new apps. What this means is that if you’re starting a new webapp, no matter what technologies you’re using, yeoman can download and set up all the boilerplate files you need to start much further ahead than on a blank canvas. It’ll set up your project folder with JavaScript libraries, modules, styles, HTML5 Boilerplate, and much more with one command. Best practices are baked right in. It even includes an all-important starter Gruntfile.js file that Grunt will use to manage your tasks.
What is Express?
With Node.js you can create your own custom web/application server. No doubt about it, it’s awesome. But with Express, multiply that x1000. It bills itself as:
a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.
A layer over Node that abstracts away all the low-level work and makes development faster and easier. If you plan on making a web server with Node, use Express. It’s that simple.
What is Nodemon?
Nodemon is a command-line tool which will run any node-compatible JavaScript file through node, and when any files you specify in your project folder change, restart that node process. What this means is that if you run your main server.js or index.js file with nodemon, you’ll be testing against your latest server logic as you develop it. You can specify which files it should ignore as it watches your project directory for changes to restart your server.
Next Up
In part 2, we’ll explore how you can combine these technologies to achieve the ultimate front-end / back-end workflow.
Till next time!
Comments