I have successfully deployed my app to production in Heroku in the past but this is the first time I have moved my rails assets to be delivered by webpack. Everything works great in development but when I try to deploy to Heroku I get the following error message:
remote: [4/4] Building fresh packages...
remote: Done in 39.56s.
remote: Compiling...
remote: Compilation failed:
remote: CLI for webpack must be installed.
remote: webpack-cli (https://github.com/webpack/webpack-cli)
remote:
remote: We will use "yarn" to install the CLI via "yarn add -D webpack-cli".
remote: Do you want to install 'webpack-cli' (yes/no):
remote:
remote: !
remote: ! Precompiling assets failed.
remote: !
remote: ! Push rejected, failed to compile Ruby app.
remote:
remote: ! Push failed
I have webpack-cli installed in my package so I am not sure why it is failing on the deployment to Heroku. I also have the nodejs heroku buildpack configured to build prior to the ruby heroku buildpack on the server.
I have ran yarn add -D webpack-cli on my local machine to ensure webpack-cli is installed.
Below is my package.json file:
{
"name": "appex",
"private": true,
"dependencies": {
"#popperjs/core": "^2.9.2",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.2.1",
"bootstrap": "^5.0.1",
"bootstrap-icons": "^1.5.0",
"file-loader": "^6.2.0",
"jquery": "^3.6.0",
"sass-loader": "^12.0.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/preset-env": "^7.14.2",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.6",
"resolve-url-loader": "^4.0.0",
"style-loader": "^2.0.0",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
Rails version 6.0.3.4 ruby version 2.6.3
Any help is appreciated!
Here is something maybe helpful
https://github.com/webpack/webpack/issues/7197
I am currently trying to deploy my angular 2 app with Rails 5 back end to heroku. In order to do this I have been following this tutorial: https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/#comment-39250 .
The tutorial has been going well expect for the last part when deploying to heroku using: git push heroku master. I get the following error:
Counting objects: 254, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (232/232), done.
Writing objects: 100% (254/254), 158.00 KiB | 0 bytes/s, done.
Total 254 (delta 8), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=true
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version (latest stable) via semver.io...
remote: Downloading and installing node 6.9.1...
remote: Using default npm version: 3.10.8
remote:
remote: -----> Restoring cache
remote: Skipping cache restore (new runtime signature)
remote:
remote: -----> Building dependencies
remote: Pruning any extraneous modules
remote: Installing node modules (package.json)
remote:
remote: > angular-seed#0.0.0 postinstall /tmp/build_924023d394206e157329026627746427/client
remote: > gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner
remote:
remote: sh: 1: gulp: not found
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_924023d394206e157329026627746427/client/.heroku/node/bin/node" "/tmp/build_924023d394206e157329026627746427/client/.heroku/node/bin/npm" "install" "--unsafe-perm" "--userconfig" "/tmp/build_924023d394206e157329026627746427/client/.npmrc"
remote: npm ERR! node v6.9.1
remote: npm ERR! npm v3.10.8
remote: npm ERR! file sh
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno ENOENT
remote: npm ERR! syscall spawn
remote: npm ERR! angular-seed#0.0.0 postinstall: `gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner`
remote: npm ERR! spawn ENOENT
remote: npm ERR!
remote: npm ERR! Failed at the angular-seed#0.0.0 postinstall script 'gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner'.
remote: npm ERR! Make sure you have the latest version of node.js and npm installed.
remote: npm ERR! If you do, this is most likely a problem with the angular-seed package,
remote: npm ERR! not with npm itself.
remote: npm ERR! Tell the author that this fails on your system:
remote: npm ERR! gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner
remote: npm ERR! You can get information on how to open an issue for this project with:
remote: npm ERR! npm bugs angular-seed
remote: npm ERR! Or if that isn't available, you can get their info via:
remote: npm ERR! npm owner ls angular-seed
remote: npm ERR! There is likely additional logging output above.
remote:
remote: npm ERR! Please include the following file with any support request:
remote: npm ERR! /tmp/build_924023d394206e157329026627746427/client/npm-debug.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: Some possible problems:
remote:
remote: - Node version not specified in package.json
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote: - Gulp may not be tracked in package.json
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: Verifying deploy....
remote:
remote: ! Push rejected to aqueous-castle-46289.
remote:
To https://git.heroku.com/aqueous-castle-46289.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/aqueous-castle- 46289.git'
Here too is my package.json as done in the tutorial:
{
"name": "angular2-seed",
"version": "0.0.0",
"description": "Seed for Angular 2 apps",
"repository": {
"url": "https://github.com/mgechev/angular2-seed"
},
"scripts": {
"build.dev": "gulp build.dev --color",
"build.dev.watch": "gulp build.dev.watch --color",
"build.e2e": "gulp build.e2e --color",
"build.prod": "gulp build.prod --color",
"build.test": "gulp build.test --color",
"build.test.watch": "gulp build.test.watch --color",
"docs": "npm run gulp -- build.docs --color && npm run gulp -- serve.docs --color",
"e2e": "protractor",
"e2e.live": "protractor --elementExplorer",
"gulp": "gulp",
"karma": "karma",
"karma.start": "karma start",
"postinstall": "typings install && gulp check.versions && npm prune && gulp build.prod",
"reinstall": "npm cache clean && npm install",
"serve.coverage": "remap-istanbul -b src/ -i coverage/coverage-final.json -o coverage -t html && npm run gulp -- serve.coverage --color",
"serve.dev": "gulp serve.dev --color",
"serve.e2e": "gulp serve.e2e --color",
"serve.prod": "gulp serve.prod --color",
"start": "gulp serve.dev --color",
"tasks.list": "gulp --tasks-simple --color",
"test": "gulp test --color",
"webdriver-start": "webdriver-manager start",
"webdriver-update": "webdriver-manager update"
},
"author": "Minko Gechev <mgechev>",
"license": "MIT",
"devDependencies": {
},
"dependencies": {
"angular2": "2.0.0-beta.15",
"es6-module-loader": "^0.17.8",
"es6-promise": "^3.1.2",
"es6-shim": "0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "~0.19.25",
"zone.js": "^0.6.10",
"async": "^1.4.2",
"autoprefixer": "^6.3.3",
"browser-sync": "^2.11.2",
"chalk": "^1.1.3",
"codelyzer": "0.0.12",
"colorguard": "^1.1.1",
"connect": "^3.4.1",
"connect-history-api-fallback": "^1.1.0",
"connect-livereload": "^0.5.3",
"cssnano": "^3.5.2",
"doiuse": "^2.3.0",
"event-stream": "^3.3.2",
"express": "~4.13.1",
"express-history-api-fallback": "^2.0.0",
"extend": "^3.0.0",
"gulp": "^3.9.1",
"gulp-cached": "^1.1.0",
"gulp-concat": "^2.6.0",
"gulp-filter": "^4.0.0",
"gulp-inject": "^4.0.0",
"gulp-inline-ng2-template": "^1.1.2",
"gulp-load-plugins": "^1.2.0",
"gulp-plumber": "~1.1.0",
"gulp-postcss": "^6.1.0",
"gulp-shell": "~0.5.2",
"gulp-sourcemaps": "git+https://github.com/floridoo/gulp-sourcemaps.git#master",
"gulp-template": "^3.1.0",
"gulp-tslint": "^4.3.3",
"gulp-typedoc": "^1.2.1",
"gulp-typescript": "~2.12.1",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"is-ci": "^1.0.8",
"isstream": "^0.1.2",
"jasmine-core": "~2.4.1",
"jasmine-spec-reporter": "^2.4.0",
"karma": "~0.13.22",
"karma-chrome-launcher": "~0.2.2",
"karma-coverage": "^0.5.5",
"karma-ie-launcher": "^0.2.0",
"karma-jasmine": "~0.3.8",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"merge-stream": "^1.0.0",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.1.4",
"postcss-reporter": "^1.3.3",
"protractor": "^3.0.0",
"remap-istanbul": "git+https://github.com/SitePen/remap-istanbul.git#master",
"rimraf": "^2.5.2",
"run-sequence": "^1.1.0",
"semver": "^5.1.0",
"serve-static": "^1.10.2",
"slash": "~1.0.0",
"stream-series": "^0.1.1",
"stylelint": "^5.3.0",
"stylelint-config-standard": "^5.0.0",
"systemjs-builder": "^0.15.14",
"tiny-lr": "^0.2.1",
"traceur": "^0.0.91",
"ts-node": "^0.7.1",
"tslint": "^3.7.0-dev.2",
"tslint-stylish": "2.1.0-beta",
"typedoc": "^0.3.12",
"typescript": "~1.8.10",
"typings": "^0.7.12",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"yargs": "^4.2.0"
}
}
I am sure the problem most likely resides with the package.json and its inability to find 'gulp'.
I have also tried to follow the instructions of the following person: https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/#comment-38286 as it appears that they had a similar problem - however their instructions dont appear to be very clear and whatever I've been able to infer from them hasnt worked. If you know what they mean let me know.
I would appreciate any help that I can get.
Thank you very much!
A bit late, but I've just encountered this error as well doing the same tutorial. If you check the log you see the following error:
Node version not specified in package.json
If you google that you'll find this page
Use the engines section of your package.json to specify the version of Node.js to use on Heroku.
{
"name": "myapp",
"description": "a really cool app",
"version": "1.0.0",
"engines": {
"node": "6.9.4"
}
}
This should get your installation going again.
I have this bower.json:
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"requirejs": "2.1.17",
}
}
When running bower install bower.json it installs it somewhere else. How do I get it to install in current folder bower_components?
I tried to install just the one from command line too but it's not installed locally.
bower install requirejs#2.1.17
For anyone having the same issue please note that it should always be bower install.
To run the local bower.json add config:
bower install --config.directory=mylocalfolder --config.cwd=drive:/..../folder
Available configs are described at Bower configuration
I have just installed font-awesome via bower:
bower install font-awesome --save
And it appears to not add the CSS at the bower build.
How can I install it?
When you use font-awesome via bower it does not include the CSS when you build it. Try using:
bower install components-font-awesome --save
It should work just fine.
In bower.json, add lines in dependencies ("components-font-awesome"):
{
"name": "example",
"version": "0.0.1",
"dependencies": {
"jquery": "~2.1.1",
"bootstrap-sass-official": ">=3.3.0",
"components-font-awesome": "^4.7.0"
}
}
Run bower install, You will get files in the bower_components folder.
check the latest or specific version of font awesome you want to install form following link
https://libraries.io/bower/Font-Awesome/tags?page=1
current latest version of fontaswesome is 5.15.3
https://libraries.io/bower/Font-Awesome/5.15.3
bower install Font-Awesome#5.15.3
people also like version 4 as well
https://libraries.io/bower/Font-Awesome/v4.7.0
bower install Font-Awesome#v4.7.0
bower install components-font-awesome --save
Use this command to install font-awesome via bower.
If the above command doesn't work that is it does not include the CSS when you build it.
Try using the following commands.
bower install components-font-awesome --save
bower install font-awesome --save
This should be following command:
bower install fontawesome --save
I am new to CI/bamboo and am trying to run a bamboo build job for a mean stack app (angular full-stack generator). I'm running bower via a bamboo script task.
Initially I used the command:
bower install
But this gave me an error message saying that the bower.json file is missing (sorry I don't have exact error message text on-hand). The bower file is definitely in the root of the project.
Next I changed the command to:
bower install bower.json
I believe this tells bower to use bower.json file in the project root.
This successfully kicks off the bower install, but it fails and in turn fails the bamboo build job. The following appears in the log:
07-Jan-2016 14:52:52 bower polymer#~0.5.4 invalid-meta polymer is missing "main" entry in bower.json
07-Jan-2016 14:52:52 bower polymer#~0.5.4 invalid-meta polymer is missing "ignore" entry in bower.json
07-Jan-2016 14:52:52 bower polymer#~0.5.4 resolved https://github.com/Polymer/polymer.git#0.5.6
07-Jan-2016 14:52:52 bower webcomponentsjs#^0.6.0 not-cached https://github.com/Polymer/webcomponentsjs.git#^0.6.0
07-Jan-2016 14:52:52 bower webcomponentsjs#^0.6.0 resolve https://github.com/Polymer/webcomponentsjs.git#^0.6.0
07-Jan-2016 14:52:52 bower core-component-page#^0.5 not-cached https://github.com/Polymer/core-component-page.git#^0.5
07-Jan-2016 14:52:52 bower core-component-page#^0.5 resolve https://github.com/Polymer/core-component-page.git#^0.5
07-Jan-2016 14:52:52 bower webcomponentsjs#^0.6.0 download https://github.com/Polymer/webcomponentsjs/archive/v0.6.3.tar.gz
07-Jan-2016 14:52:53 bower webcomponentsjs#~0.5.4 extract archive.tar.gz
07-Jan-2016 14:52:53 bower webcomponentsjs#~0.5.4 resolved https://github.com/Polymer/webcomponentsjs.git#0.5.5
07-Jan-2016 14:52:53 bower core-component-page#^0.5 download https://github.com/Polymer/core-component-page/archive/0.5.6.tar.gz
07-Jan-2016 14:52:56 bower core-component-page#^0.5 extract archive.tar.gz
07-Jan-2016 14:52:56 bower webcomponentsjs#^0.6.0 extract archive.tar.gz
07-Jan-2016 14:52:56 bower core-component-page#^0.5 invalid-meta core-component-page is missing "main" entry in bower.json
07-Jan-2016 14:52:56 bower core-component-page#^0.5 invalid-meta core-component-page is missing "ignore" entry in bower.json
07-Jan-2016 14:52:56 bower core-component-page#^0.5 resolved https://github.com/Polymer/core-component-page.git#0.5.6
07-Jan-2016 14:52:56 bower webcomponentsjs#^0.6.0 mismatch Version declared in the json (0.6.1) is different than the resolved one (0.6.3)
07-Jan-2016 14:52:56 bower webcomponentsjs#^0.6.0 resolved https://github.com/Polymer/webcomponentsjs.git#0.6.3
07-Jan-2016 14:52:56 bower ECONFLICT Unable to find suitable version for webcomponentsjs
The server is Ubuntu (sorry don't have version) and bower is version 1.7.1
Here is the bower.json file:
bower.json:
{
"name": "my-app",
"version": "0.0.0",
"dependencies": {
"angular": ">=1.2.*",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"bootstrap-sass-official": "~3.1.1",
"bootstrap": "~3.1.1",
"angular-resource": ">=1.2.*",
"angular-cookies": ">=1.2.*",
"angular-sanitize": ">=1.2.*",
"angular-route": ">=1.2.*",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"select2": "~4.0.1"
},
"devDependencies": {
"angular-mocks": ">=1.2.*",
"angular-scenario": ">=1.2.*"
}
}
The project has a .bowerrc file:
.bowerrc:
{
"directory": "client/bower_components"
}
I tried to simulate the bower task on my home pc (Ubuntu Ubuntu 14.04.3 LTS and bower 1.7.1) by running 'bower install' and it runs without issue. But if I specify the bower.json file in the command 'bower install bower.json' I get prompted for the following:
Unable to find a suitable version for webcomponentsjs, please choose one:
1) webcomponentsjs#~0.5.4 which resolved to 0.5.5 and is required by App States#0.6.9
2) webcomponentsjs#* which resolved to 0.5.5 and is required by core-component-page#0.5.6
3) webcomponentsjs#^0.6.0 which resolved to 0.6.3 and is required by polymer#0.5.6
Not sure if this behavior is related to the bamboo issue.
Any ideas?
Specify the version for the conflicting webcomponentsjs explicitely in your bower.json. While bower can ask you which dependency to use when running from an interactive shell, this is obviously not possible when running the task on Bamboo.