Giter VIP home page Giter VIP logo

heroku-buildpack-yo-angular's Introduction

Heroku buildpack: Yo Angular

Parent Repository

Refer to the parent repo's readme First.

Additional Features

  • Installs bower apps from a bower.json file in the root directory
  • Installs compass
  • Deletes a few common files that are not need for production by Angular apps to reduce the slug size

Current files being deleted to reduce slug size:

  • .bowerrc
  • .editorconfig
  • .git/
  • .gitattributes
  • .gitignore
  • .jshintrc
  • .travis.yml
  • .tmp/
  • .sass-cache/
  • Gruntfile.js
  • app/
  • bower_components/
  • bower.json
  • karma-e2e.conf.js
  • karma.conf.js
  • package.json
  • test/

How to make your angular app work with this buildpack

This buildpack uses a task in your Gruntfile to build the contents of your app folder into an optimized dist folder. This is the same thing the command grunt does in your yo angular app. All of this takes place on the heroku server, so all you have to do is push your app's source code to heroku with the standard .gitignore file . There is no need for you to commit the dist folder or any other pre-built files like a lot of the other online guides suggest. This buildpack installs all the node_modules, bower_components and uses grunt to build your app.

4 Step Guide

Step 1: Set up your node.js web server and add a Procfile command

I use express, gzippo and morgan with the Procfile command web: node web.js. But you can use anything. Here is a sample of my web.js file:

'use strict';

var gzippo = require('gzippo');
var express = require('express');
var logger = require('morgan');
var nodeApp = express();

nodeApp.use(logger('dev'));
nodeApp.use(gzippo.staticGzip('' + __dirname + '/dist'));
nodeApp.listen(process.env.PORT || 5000);

Step 2: Add a heroku task to your Gruntfile

grunt.registerTask('heroku', ['build']);

This is the task that will be run by heroku on the heroku server. I have just included the build task here (referring to the standard build task created by the yo angular) but you could add the newer:jshint and the test task too.

You can also set the environment variable NODE_ENV on your heroku server if you want the buildpack to call a heroku:$NODE_ENV task. In that case, here is how the task will look like in your Gruntfile:

grunt.registerTask('heroku', function (target) {
  // use the target to do whatever, for example:
  grunt.task.run('build:' + target);
});

Step 3: Set this buildpack as your heroku app's buildpack

heroku config:set BUILDPACK_URL=https://github.com/nknj/heroku-buildpack-yo-angular.git

Step 4: Deploy

git push heroku master

heroku-buildpack-yo-angular's People

Contributors

bripkens avatar btubbs avatar cleishm avatar coreyjonoliver avatar davidjrice avatar ddollar avatar dzuelke avatar edo78 avatar ekryski avatar flyerhzm avatar gvelo avatar hone avatar jacobwgillespie avatar jagregory avatar jclem avatar lackac avatar mbuchetics avatar mmcgrana avatar nknj avatar ryanbrainard avatar rykov avatar skeller88 avatar timshadel avatar zbuc avatar zeke avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.