Yeoman is great developer tool that will help you generate a project format that is easy to get up and running quickly. Out of the box, Yeoman only generates static sites. But, with a few small tweaks, you can get it running on an app server, Nodejs, and up on Heroku.
New Project With Yeoman
To install Yeoman, run:
Now navigate to your new project directory and generate the scaffolding by running:
There are other generators, specifically for angularjs or a handful of other frameworks. To see more options, run:
Add Node for Heroku
Since Yeoman creates a static site, it should be read to serve out of any old web server. But Heroku specifically wants an app server. Node is one of the options, and it’s a great option for a lightweight app server.
To get the node dependencies you need, create a
Then pull down the dependencies you’ll need:
Now create your app server,
web.coffee. It’s about as light as they come:
1 2 3 4 5 6 7
It’s going to be serving the static resources that you build w/ Yeoman/Grunt that end up in the
dist directory. In order for code to get to Heroku, it needs to be commited to your git repo. Thus, you need to remove the “dist” line from your
.gitignore file, and don’t forget to add and commit the files to git as you build them. You may also have to add more tasks to the
Gruntfile.js to copy over any other assets to
dist that your app needs to run.
Finally create a
Procfile file for Heroku in the root of your project that points to the
Now it’s time to push to Heroku. You should have the Heroku Toolbelt installed and create a heroku url by running:
To test your yeoman app as it will be run in production, first build it:
Then run the grunt server:
Or if you have foreman and want to run the app using your
It’s time. Commit your code, especially that
dist directory, and… deploy!
There are quite a few steps there. What did we miss? Or what needs more explanation? Perhaps we just need a
yo heroku target.