Giter Club home page Giter Club logo

heroku-buildpack-nodejs-bower-gulp's Introduction

Heroku Buildpack for Node.js, Bower, and Gulp

Usage

  • Create a new app using heroku create --buildpack=https://github.com/robgraeber/heroku-buildpack-nodejs-bower-gulp.git. To be safe, you should fork this and use your fork's URL.
  • Add a Gulp task that builds your app. By default, the buildpack will call gulp build.
  • To specify your own task: Run heroku config:set GULP_TASK=build (Or any other name).
  • Add a bower.json/.bowerrc file that will be used with bower install. Packages not in bower.jsonare pruned each build.
  • And additionally, the buildpack has a few extra entry points. It will look for entry points in the following order:
  • Procfile: e.g. web: node server.js.
  • npm start script.
  • server.js file.
  • app.js file.

Note: It will only use bower/gulp if bower.json or gulpfile.js is found. Otherwise it's usable the same as other Node.js buildpacks, except with extra entry points.

Things That Will Happen

When the buildpack runs it will do many things similarly to the standard Heroku buildpack. In addition it will do the following things, in roughly this order.

  • If bower.json is found
    • Extract the directory key from .bowerrc if that is present
    • Run npm install bower to install bower locally
    • Run bower install to install bower_components.
    • Cache bower_components or whichever alternate directory was specified in .bowerrc
  • If gulpfile.js is found
    • Run npm install gulp to install gulp locally during the build
    • Run gulp build to build the app
  • If Procfile is not found
    • Looks for a npm start script
    • Then for a server.js file
    • And then for an app.js file

The bower component caching is very similar to the node_modules caching done for npm. The cache is restored before each build and bower prune is run to remove anything no longer needed before doing the bower install. This is the same way the standard buildpack handles caching.

Bonus: Also installs the latest npm + 'nasm' which is a dependency for imageMin.

Some Useful Aliases

I also like to create some useful aliases that help me deploy in 1-line. (Add the following to your .bash_profile):

heroku-push() {
  git push heroku master $1 $2 $3
  heroku open
}
heroku-delete() {
  heroku apps:destroy -a $1 --confirm $1
}
heroku-auto-create() {
  heroku create $1 $2 $3 --buildpack=https://github.com/robgraeber/heroku-buildpack-nodejs-bower-gulp.git
  heroku-push
}
alias heroku-create='heroku create --stack cedar-14 --buildpack=https://github.com/robgraeber/heroku-buildpack-nodejs-bower-gulp.git'
alias heroku-portal='open https://dashboard.heroku.com/apps'
alias heroku-set='heroku config:set'
alias heroku-rebuild='heroku repo:rebuild'
alias heroku-logs='heroku logs --tail'

Example: Type "heroku-auto-create myAppNameHere" to auto deploy in 1 line.

Credits

Forked from heroku-buildpack-nodejs-gulp.

Which was forked from heroku-buildpack-nodejs.

Heavily based on heroku-buildpack-nodejs-grunt.

heroku-buildpack-nodejs-bower-gulp's People

Contributors

btubbs avatar cbartlett avatar cleishm avatar davidjrice avatar ddollar avatar dzuelke avatar hone avatar jacobwgillespie avatar jclem avatar lackac avatar longseespace avatar mmcgrana avatar robgraeber avatar ryanbrainard avatar rykov avatar timdp avatar timshadel avatar tomseago avatar zbuc avatar zeke avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

heroku-buildpack-nodejs-bower-gulp's Issues

Clearing the npm node_modules caching temporarily

Hi,

I would like to drain npm cache, how can I do this ?
I update my dependencies and push to heroku but I got this error when i tried to access my app :

1 Nov 2015 17:48:36.114 2015-11-01 16:48:35.661403+00:00 app web.1 - - Error: Cannot find module 'ms' 
at Function.Module._resolveFilename (module.js:336:15) 
at Function.Module._load (module.js:278:25) 
at Module.require (module.js:365:17) 
at require (module.js:384:17) 
at Object.<anonymous> (/app/app.js:13:20) 
at Module._compile (module.js:460:26) 
at Object.Module._extensions..js (module.js:478:10) 
at Module.load (module.js:355:32) 
at Function.Module._load (module.js:310:12) 
at Function.Module.runMain (module.js:501:10) 
at startup (node.js:129:16) at node.js:814:3 Exception Contex

I got the same error locally, I had to remove the node_modules directory for it to work.
I think it's a cache issue.

http://stackoverflow.com/a/30436256/1525692
Similar problem : expressjs/morgan#55 (comment)

Package.json

{
  "name": "mondedie-chat",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "bluebird": "^3.0.5",
    "body-parser": "~1.14.1",
    "compression": "^1.5.2",
    "connect-redis": "^3.0.1",
    "cookie-parser": "~1.4.0",
    "debug": "~2.2.0",
    "dotenv": "^1.2.0",
    "emojione": "^1.5.0",
    "express": "~4.13.1",
    "express-debug": "^1.1.1",
    "express-session": "^1.11.3",
    "express-validator": "^2.17.1",
    "highlight.js": "^8.8.0",
    "jade": "~1.11.0",
    "marked": "^0.3.5",
    "moment": "^2.10.6",
    "moment-timezone": "^0.4.0",
    "morgan": "~1.6.1",
    "ms": "^0.7.1",
    "redis": "^2.3.0",
    "request": "^2.61.0",
    "serve-favicon": "~2.3.0",
    "serve-static": "^1.10.0",
    "socket.io": "^1.3.6",
    "socket.io-express-session": "^0.1.2"
  },
  "devDependencies": {
    "del": "^2.0.2",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-bower": "0.0.10",
    "gulp-concat": "^2.6.0",
    "gulp-csscomb": "^3.0.6",
    "gulp-filter": "^3.0.1",
    "gulp-inject": "^3.0.0",
    "gulp-jshint": "^1.11.2",
    "gulp-minify-css": "^1.2.1",
    "gulp-rev": "^6.0.1",
    "gulp-sass": "^2.0.4",
    "gulp-size": "^2.0.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.4.1",
    "jshint-stylish": "^2.0.1",
    "run-sequence": "^1.1.4"
  },
  "engines": {
    "node": "0.12.x"
  }
}

Build log :

-----> Fetching custom buildpack https://github.com/robgraeber/heroku-buildpack-nodejs-bower-gulp... done
-----> Node.js/Bower/Gulp app detected
-----> Requested node range:  0.12.x
-----> Resolved node version: 0.12.7
-----> Downloading and installing node
-----> Downloading and installing npm
-----> Installing nasm from source
-----> Restoring node_modules directory from cache
-----> Pruning cached dependencies not specified in package.json
-----> Copying bower from cache
-----> Copying gulp from cache
-----> Found bower.json - Updating bower locally
-----> Restoring client/bower directory from cache
-----> Pruning cached dependencies not specified in bower.json
-----> Exporting config vars to environment
-----> Installing npm dependencies
       - [email protected] node_modules/body-parser/node_modules/depd
       - [email protected] node_modules/body-parser/node_modules/http-errors/node_modules/inherits
       - [email protected] node_modules/body-parser/node_modules/iconv-lite
       [email protected] node_modules/ms -> node_modules/body-parser/node_modules/ms
       [email protected] node_modules/debug -> node_modules/body-parser/node_modules/debug
       - [email protected] node_modules/body-parser/node_modules/qs
       [email protected] node_modules/body-parser/node_modules/bytes -> node_modules/bytes
       - [email protected] node_modules/connect-redis/node_modules/debug/node_modules/ms
       - [email protected] node_modules/connect-redis/node_modules/redis
       [email protected] node_modules/body-parser/node_modules/content-type -> node_modules/content-type
       - [email protected] node_modules/cookie-parser/node_modules/cookie
       [email protected] node_modules/cookie-parser/node_modules/cookie-signature -> node_modules/cookie-signature
       [email protected] node_modules/body-parser/node_modules/on-finished/node_modules/ee-first -> node_modules/ee-first
       [email protected] node_modules/body-parser/node_modules/raw-body/node_modules/iconv-lite -> node_modules/iconv-lite
       [email protected] node_modules/body-parser/node_modules/type-is/node_modules/media-typer -> node_modules/media-typer
       [email protected] node_modules/body-parser/node_modules/type-is/node_modules/mime-types/node_modules/mime-db -> node_modules/mime-db
       [email protected] node_modules/body-parser/node_modules/type-is/node_modules/mime-types -> node_modules/mime-types
       [email protected] node_modules/body-parser/node_modules/on-finished -> node_modules/on-finished
       [email protected] node_modules/body-parser/node_modules/http-errors/node_modules/statuses -> node_modules/statuses
       [email protected] node_modules/body-parser/node_modules/http-errors -> node_modules/http-errors
       [email protected] node_modules/body-parser/node_modules/type-is -> node_modules/type-is
       [email protected] node_modules/body-parser/node_modules/raw-body/node_modules/unpipe -> node_modules/unpipe
       [email protected] node_modules/body-parser/node_modules/raw-body -> node_modules/raw-body
       [email protected] /tmp/build_150460b5027d9d99b100ef50619616e2
       ├── [email protected] 
       ├─┬ [email protected] 
       │ ├─┬ [email protected] 
       │ │ └── [email protected] 
       │ ├── [email protected] 
       │ └── [email protected] 
       ├─┬ [email protected]
       │ └─┬ [email protected] 
       │   └── [email protected] 
       ├─┬ [email protected] 
       │ └─┬ [email protected] 
       │   └── [email protected] 
       ├─┬ [email protected] 
       │ └── [email protected] 
       ├─┬ [email protected]
       │ ├─┬ [email protected] 
       │ │ └── [email protected] 
       │ └─┬ [email protected]
       │   └── [email protected] 
       ├─┬ [email protected]
       │ └─┬ [email protected] 
       │   └── [email protected] 
       ├─┬ [email protected]
       │ └── [email protected] 
       ├─┬ [email protected]
       │ └─┬ [email protected]
       │   └─┬ [email protected]
       │     └─┬ [email protected]
       │       └─┬ [email protected]
       │         └─┬ [email protected] 
       │           └── [email protected] 
       ├─┬ [email protected]
       │ └─┬ [email protected] 
       │   └── [email protected] 
       ├─┬ [email protected] 
       │ └── [email protected] 
       ├─┬ [email protected]
       │ └── [email protected] 
       └─┬ [email protected]
         └─┬ [email protected]
           ├── [email protected] 
           └── [email protected] 

-----> Installing bower dependencies
-----> Building runtime environment
-----> Exporting config vars to environment
-----> Updating gulp locally
-----> Found gulpfile, running gulp default task
[16:48:06] Using gulpfile /tmp/build_150460b5027d9d99b100ef50619616e2/gulpfile.js
[16:48:06] Starting 'bower'...
[16:48:06] Using cwd:  /tmp/build_150460b5027d9d99b100ef50619616e2
[16:48:06] Using bower dir:  client/bower
[16:48:06] Starting 'lint'...
[16:48:07] Finished 'lint' after 1.04 s
[16:48:08] Finished 'bower' after 1.41 s
[16:48:08] Starting 'clean-css'...
[16:48:08] Starting 'clean-js'...
[16:48:08] Starting 'fonts'...
[16:48:08] Starting 'emojione-strategy'...
[16:48:08] Finished 'clean-css' after 10 ms
[16:48:08] Starting 'sass'...
[16:48:08] Finished 'clean-js' after 25 ms
[16:48:08] Starting 'js'...
[16:48:08] Finished 'emojione-strategy' after 139 ms
[16:48:10] fichier app.min.css all files 122.58 kB
[16:48:10] Finished 'sass' after 2.24 s
[16:48:10] Starting 'inject-css'...
[16:48:10] gulp-inject 1 files into css.jade.
[16:48:10] Finished 'inject-css' after 20 ms
[16:48:10] Finished 'fonts' after 2.35 s
[16:48:10] fichier app.min.js all files 403.93 kB
[16:48:10] Finished 'js' after 2.52 s
[16:48:10] Starting 'inject-js'...
[16:48:10] gulp-inject 1 files into javascript.jade.
[16:48:10] Finished 'inject-js' after 5.7 ms
[16:48:10] Starting 'default'...
[16:48:10] Finished 'default' after 25 μs
-----> Caching node_modules directory for future builds
-----> Caching client/bower directory for future builds
-----> Caching vendor directory for future builds
-----> Discovering process types
       Procfile declares types -> web
-----> Compressing... done, 41.0MB
-----> Launching... done, v195
       https://mondedie-chat.herokuapp.com/ deployed to Heroku

Module not found

Hi,

I have a bug with gulp-minify-css, I got this error :

Error: Cannot find module 'gulp-minify-css'

Here my package.json :

{
  "name": "mondedie-chat",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "async": "^1.4.2",
    "bluebird": "^2.10.1",
    "body-parser": "~1.13.2",
    "compression": "^1.5.2",
    "connect-redis": "^2.5.1",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "dotenv": "^1.2.0",
    "emojione": "^1.5.0",
    "express": "~4.13.1",
    "express-debug": "^1.1.1",
    "express-session": "^1.11.3",
    "express-validator": "^2.17.1",
    "highlight.js": "^8.8.0",
    "jade": "~1.11.0",
    "marked": "^0.3.5",
    "moment": "^2.10.6",
    "moment-timezone": "^0.4.0",
    "morgan": "~1.6.1",
    "ms": "^0.7.1",
    "redis": "^1.0.0",
    "request": "^2.61.0",
    "serve-favicon": "~2.3.0",
    "serve-static": "^1.10.0",
    "socket.io": "^1.3.6",
    "socket.io-express-session": "^0.1.2"
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-bower": "0.0.10",
    "gulp-concat": "^2.6.0",
    "gulp-filter": "^3.0.1",
    "gulp-jshint": "^1.11.2",
    "gulp-minify-css": "^1.2.1",
    "gulp-sass": "^2.0.4",
    "gulp-size": "^2.0.0",
    "gulp-uglify": "^1.4.1",
    "jshint-stylish": "^2.0.1"
  },
  "engines": {
    "node": "0.12.x"
  }
}

Build log :

remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Fetching custom git buildpack... done
remote: -----> Node.js/Bower/Gulp app detected
remote: -----> Requested node range:  0.12.x
remote: -----> Resolved node version: 0.12.7
remote: -----> Downloading and installing node
remote: -----> Downloading and installing npm
remote: -----> Installing nasm from source
remote: -----> Restoring node_modules directory from cache
remote: -----> Pruning cached dependencies not specified in package.json
remote: -----> Found bower.json - Updating bower locally
remote:        [email protected] /tmp/build_cc6480202e8ba831abbb424e983d9b81
remote:        └── [email protected]  extraneous
remote:        
remote: -----> Exporting config vars to environment
remote: -----> Installing npm dependencies
remote: -----> Installing bower dependencies
remote:        bower bootstrap#v4.0.0-alpha       not-cached git://github.com/twbs/bootstrap.git#v4.0.0-alpha
remote:        bower bootstrap#v4.0.0-alpha          resolve git://github.com/twbs/bootstrap.git#v4.0.0-alpha
remote:        bower mithril#~0.2.0               not-cached git://github.com/lhorie/mithril.git#~0.2.0
remote:        bower mithril#~0.2.0                  resolve git://github.com/lhorie/mithril.git#~0.2.0
remote:        bower visibilityjs#~1.2.1          not-cached git://github.com/ai/visibility.js.git#~1.2.1
remote:        bower visibilityjs#~1.2.1             resolve git://github.com/ai/visibility.js.git#~1.2.1
remote:        bower HTML5-Desktop-Notifications#*       not-cached git://github.com/ttsvetko/HTML5-Desktop-Notifications.git#*
remote:        bower HTML5-Desktop-Notifications#*          resolve git://github.com/ttsvetko/HTML5-Desktop-Notifications.git#*
remote:        bower HTML5-Desktop-Notifications#*         checkout master
remote:        bower mithril#~0.2.0                        download https://github.com/lhorie/mithril/archive/v0.2.0.tar.gz
remote:        bower visibilityjs#~1.2.1                   download https://github.com/ai/visibility.js/archive/1.2.1.tar.gz
remote:        bower bootstrap#v4.0.0-alpha                download https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.tar.gz
remote:        bower visibilityjs#~1.2.1                    extract archive.tar.gz
remote:        bower HTML5-Desktop-Notifications#*         resolved git://github.com/ttsvetko/HTML5-Desktop-Notifications.git#1ad38f3041
remote:        bower visibilityjs#~1.2.1                   resolved git://github.com/ai/visibility.js.git#1.2.1
remote:        bower bootstrap#v4.0.0-alpha                 extract archive.tar.gz
remote:        bower mithril#~0.2.0                         extract archive.tar.gz
remote:        bower bootstrap#v4.0.0-alpha                resolved git://github.com/twbs/bootstrap.git#4.0.0-alpha
remote:        bower jquery#1.9.1 - 2                    not-cached git://github.com/jquery/jquery.git#1.9.1 - 2
remote:        bower jquery#1.9.1 - 2                       resolve git://github.com/jquery/jquery.git#1.9.1 - 2
remote:        bower jquery#1.9.1 - 2                      download https://github.com/jquery/jquery/archive/2.1.4.tar.gz
remote:        bower jquery#1.9.1 - 2                       extract archive.tar.gz
remote:        bower jquery#1.9.1 - 2                      resolved git://github.com/jquery/jquery.git#2.1.4
remote:        bower mithril#~0.2.0                        resolved git://github.com/lhorie/mithril.git#0.2.0
remote:        bower HTML5-Desktop-Notifications#*          install HTML5-Desktop-Notifications#1ad38f3041
remote:        bower visibilityjs#~1.2.1                    install visibilityjs#1.2.1
remote:        bower bootstrap#v4.0.0-alpha                 install bootstrap#4.0.0-alpha
remote:        bower jquery#1.9.1 - 2                       install jquery#2.1.4
remote:        bower mithril#~0.2.0                         install mithril#0.2.0
remote:        
remote:        HTML5-Desktop-Notifications#1ad38f3041 public/bower/HTML5-Desktop-Notifications
remote:        
remote:        visibilityjs#1.2.1 public/bower/visibilityjs
remote:        
remote:        bootstrap#4.0.0-alpha public/bower/bootstrap
remote:        └── jquery#2.1.4
remote:        
remote:        jquery#2.1.4 public/bower/jquery
remote:        
remote:        mithril#0.2.0 public/bower/mithril
remote: -----> Building runtime environment
remote: -----> Exporting config vars to environment
remote: -----> Updating gulp locally
remote:        [email protected] /tmp/build_cc6480202e8ba831abbb424e983d9b81
remote:        ├─┬ [email protected]
remote:        │ └─┬ [email protected]
remote:        │   └── [email protected] 
remote:        ├─┬ [email protected]
remote:        │ └─┬ [email protected]
remote:        │   └─┬ [email protected]
remote:        │     └── [email protected] 
remote:        ├─┬ [email protected]
remote:        │ └─┬ [email protected]
remote:        │   └─┬ [email protected]
remote:        │     └─┬ [email protected]
remote:        │       └─┬ [email protected] 
remote:        │         └─┬ [email protected] 
remote:        │           ├── [email protected] 
remote:        │           └── [email protected] 
remote:        ├─┬ [email protected]
remote:        │ ├─┬ [email protected] 
remote:        │ │ └── [email protected] 
remote:        │ └─┬ [email protected]
remote:        │   └─┬ [email protected]
remote:        │     └── [email protected] 
remote:        ├─┬ [email protected]
remote:        │ ├─┬ [email protected]
remote:        │ │ └─┬ [email protected] 
remote:        │ │   ├── [email protected] 
remote:        │ │   ├── [email protected] 
remote:        │ │   ├── [email protected] 
remote:        │ │   ├── [email protected] 
remote:        │ │   ├── [email protected] 
remote:        │ │   └── [email protected] 
remote:        │ └─┬ [email protected]
remote:        │   ├─┬ [email protected] 
remote:        │   │ ├── [email protected] 
remote:        │   │ ├── [email protected] 
remote:        │   │ ├─┬ [email protected] 
remote:        │   │ │ └── [email protected] 
remote:        │   │ ├─┬ [email protected] 
remote:        │   │ │ └── [email protected] 
remote:        │   │ └── [email protected] 
remote:        │   ├─┬ [email protected]
remote:        │   │ └── [email protected] 
remote:        │   └─┬ [email protected] 
remote:        │     └── [email protected] 
remote:        ├─┬ [email protected]
remote:        │ └─┬ [email protected]
remote:        │   └─┬ [email protected]
remote:        │     └── [email protected] 
remote:        └─┬ [email protected]
remote:          ├─┬ [email protected]
remote:          │ └─┬ [email protected]
remote:          │   └─┬ [email protected]
remote:          │     └── [email protected] 
remote:          ├─┬ [email protected]
remote:          │ └── [email protected] 
remote:          ├─┬ [email protected]
remote:          │ └─┬ [email protected]
remote:          │   └── [email protected] 
remote:          ├─┬ [email protected]
remote:          │ └─┬ [email protected]
remote:          │   └── [email protected] 
remote:          └─┬ [email protected]
remote:            └── [email protected] 
remote:        
remote: -----> Found gulpfile, running gulp default task
remote: module.js:338
remote:     throw err;
remote:           ^
remote: Error: Cannot find module 'gulp-minify-css'
remote:     at Function.Module._resolveFilename (module.js:336:15)
remote:     at Function.Module._load (module.js:278:25)
remote:     at Module.require (module.js:365:17)
remote:     at require (module.js:384:17)
remote:     at Object.<anonymous> (/tmp/build_cc6480202e8ba831abbb424e983d9b81/gulpfile.js:2:14)
remote:     at Module._compile (module.js:460:26)
remote:     at Object.Module._extensions..js (module.js:478:10)
remote:     at Module.load (module.js:355:32)
remote:     at Function.Module._load (module.js:310:12)
remote:     at Module.require (module.js:365:17)
remote:     at require (module.js:384:17)
remote: 
remote:  !     Push rejected, failed to compile Node.js/Bower/Gulp app
remote: 
remote: Verifying deploy...
remote: 
remote: !   Push rejected to mondedie-chat.
remote: 
To [email protected]:mondedie-chat.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to '[email protected]:mondedie-chat.git'

Any idea ?

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.