generator-webapp-heroku

Scaffold out a front-end web app

Usage no npm install needed!

<script type="module">
  import generatorWebappHeroku from 'https://cdn.skypack.dev/generator-webapp-heroku';
</script>

README

Web app generator Build Status

Yeoman generator that scaffolds out a front-end web app, and provides an easy way to create and publish to Heroku.

Note: The only changes between this and generator-webapp (v 0.11.1) are some additional grunt commands that will create and provision a Heroku app, generate Heroku specific files, and commit to Heroku. For more information, check out Easily Deploy a Yeoman App to Heroku.

Features

  • CSS Autoprefixing
  • Built-in preview server with LiveReload
  • Automagically compile CoffeeScript & Sass
  • Automagically lint your scripts
  • Automagically wire up your Bower components with grunt-wiredep.
  • Awesome Image Optimization (via OptiPNG, pngquant, jpegtran and gifsicle)
  • Mocha Unit Testing with PhantomJS
  • Bootstrap for Sass (Optional)
  • Leaner Modernizr builds (Optional)
  • Creates and provision Heroku App (The name is based on the name in package.json. Any characters that are not alpha-numeric are removed.)
  • Commits to Heroku

For more information on what generator-webapp can do for you, take a look at the Grunt tasks used in our package.json.

Getting Started

  • Install: npm install -g generator-webapp-heroku
  • Run: yo webapp-heroku
  • Run grunt for building and grunt serve for preview*. --allow-remote option for remote access.

Heroku Integration

  • After running 'grunt', run 'grunt heroku:init' to create a Heroku web app and do an initial commit. This only needs to be run once.
  • For subsequent deploys to Heroku use 'grunt heroku:push --gitm="This is a git commit message"'
  • By default, the minified version will be deployed, but for the unminifed version, speficy using the --min argument. For example: grunt heroku:push --min=true --gitm="new update".
  • VERY IMPORTANT: Currently there is a bug related to CDNIFY on the core project that prevents the minimized source file references from being updated properly in the dist/index.html folder. Until this is fixed, there is a workaround. Open app/index.html and scroll to the bottom. You will notice that the indentation for scripts/main.js is not the same as the scripts/plugins.js above it. Ensure that all of these lines including the comments are on the same line. You can then run a grunt build from the command line before deploying again.

Third-Party Dependencies

(HTML/CSS/JS/Images/etc)

Third-party dependencies are managed with grunt-wiredep. Add new dependencies using Bower and then run the Grunt task to load them:

$ bower install --save jquery
$ grunt wiredep

This works if the package author has followed the Bower spec. If the files are not automatically added to your source code, check with the package's repo for support and/or file an issue with them to have it updated.

To manually add dependencies, bower install --save depName to get the files, then add a script or style tag to your index.html or another appropriate place.

The components are installed in the root of the project at /bower_components. To reference them from index.html, use src="bower_components" or src="/bower_components". Treat the bower_components directory as if it was a sibling to index.html.

Testing Note: a project checked into source control and later checked out needs to have bower install run from the test folder as well as from the project root.

Grunt Serve Note

Note: grunt server was used for previewing in earlier versions of the project, and has since been deprecated in favor of grunt serve.

Docs

We have recipes for integrating other popular technologies like Compass.

Options

  • --skip-install

    Skips the automatic execution of bower and npm after scaffolding has finished.

  • --test-framework=<framework>

    Defaults to mocha. Can be switched for another supported testing framework like jasmine.

  • --coffee

    Add support for CoffeeScript.

Contribute

See the contributing docs.

Note: We are regularly asked whether we can add or take away features. If a change is good enough to have a positive impact on all users, we are happy to consider it.

If not, generator-webapp-heroku is fork-friendly and you can always maintain a custom version which you npm install && npm link to continue using via yo webapp-heroku or a name of your choosing.

License

BSD license