I'm trying to deploy a angular/rails app too Heroku and the build fails. Here are the steps I've took thus far, using ruby 2.3.0, rails 5, node v6.3.0, npm 3.10.3 and psql (PostgreSQL) 9.3.13:
$ rails new author_wizard --api -T -d postgresql
$ rails db:create
Then, added the angular cli:
$ npm install -g angular-cli
From the root of the rails project:
$ ng new author-wizard
$ mv author-wizard client
$ cd client
$ ng server
Now, navigating to http://localhost:4200, I get a page that says "app works!".
Setting up to deploy to Heroku.
I ran these commands from the root of rails app to create a symlink:
$ rm -rf public
$ ln -s client/dist public
Then,
$ heroku create
$ heroku buildpacks:add https://github.com/jasonswett/heroku-buildpack-nodejs
$ heroku buildpacks:add heroku/ruby
Buildpack added. Next release on damp-spire-94406 will use:
1. https://github.com/jasonswett/heroku-buildpack-nodejs
2. heroku/ruby
Run git push heroku master to create a new release using these buildpacks.
Before pushing to Heroku, I made this changes to the client/package.json
"postinstall": "typings install && ng build"
And then, I moved devDependencies to just dependencies so Heroku can pick them up.
Here's my package.json file:
{
"name": "author-wizard",
"description": "a cool app",
"version": "0.0.0",
"engines": {
"node": "6.3.0",
"npm": "3.10.3"
},
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install && ng build",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/router": "3.0.0-beta.2",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "0.6.12",
"angular-cli": "1.0.0-beta.10",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "1.3.1"
},
"devDependencies": {
}
}
When I push to heroku, I get this error:
$ git push heroku master
Counting objects: 103, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (87/87), done.
Writing objects: 100% (103/103), 27.47 KiB | 0 bytes/s, done.
Total 103 (delta 4), 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 5.11.1...
remote: Using default npm version: 3.8.6
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: > author-wizard#0.0.0 postinstall /tmp/build_62d8b6dd78169ce94281eaec1000a797/client
remote: > typings install && ng build
remote:
remote:
remote: └── es6-shim (global)
remote:
remote: Could not start watchman; falling back to NodeWatcher for file system events.
remote: Visit http://ember-cli.com/user-guide/#watchman for more info.
remote: Build failed.
remote: The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
remote: Error: Typescript found the following errors:
remote: /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/tmp/broccoli_type_script_compiler-input_base_path-D0TFBXoL.tmp/0/src/app/app.component.spec.ts (6, 1): Cannot find name 'describe'.
remote: /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/tmp/broccoli_type_script_compiler-input_base_path-D0TFBXoL.tmp/0/src/app/app.component.spec.ts (7, 3): Cannot find name 'beforeEach'.
remote: /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/tmp/broccoli_type_script_compiler-input_base_path-D0TFBXoL.tmp/0/src/app/app.component.spec.ts (11, 3): Cannot find name 'it'.
remote: /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/tmp/broccoli_type_script_compiler-input_base_path-D0TFBXoL.tmp/0/src/app/app.component.spec.ts (13, 7): Cannot find name 'expect'.
remote: /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/tmp/broccoli_type_script_compiler-input_base_path-D0TFBXoL.tmp/0/src/app/app.component.spec.ts (16, 3): Cannot find name 'it'.
remote: /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/tmp/broccoli_type_script_compiler-input_base_path-D0TFBXoL.tmp/0/src/app/app.component.spec.ts (18, 7): Cannot find name 'expect'.
remote: at BroccoliTypeScriptCompiler._doIncrementalBuild (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
remote: at BroccoliTypeScriptCompiler.build (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
remote: at /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
remote: at lib$rsvp$$internal$$tryCatch (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
remote: at lib$rsvp$$internal$$invokeCallback (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
remote: at lib$rsvp$$internal$$publish (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1019:11)
remote: at lib$rsvp$asap$$flush (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
remote: at _combinedTickCallback (internal/process/next_tick.js:67:7)
remote: at process._tickCallback (internal/process/next_tick.js:98:9)
remote:
remote: The broccoli plugin was instantiated at:
remote: at BroccoliTypeScriptCompiler.Plugin (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
remote: at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
remote: at BroccoliTypeScriptCompiler (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
remote: at Angular2App._getTsTree (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/lib/broccoli/angular2-app.js:331:18)
remote: at Angular2App._buildTree (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/lib/broccoli/angular2-app.js:124:23)
remote: at new Angular2App (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
remote: at module.exports (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/angular-cli-build.js:10:10)
remote: at Class.module.exports.Task.extend.setupBroccoliBuilder (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
remote: at Class.module.exports.Task.extend.init (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
remote: at new Class (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
remote: at Class.module.exports.Task.extend.run (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
remote: at /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
remote: at lib$rsvp$$internal$$tryCatch (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
remote: at lib$rsvp$$internal$$invokeCallback (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
remote: at /tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
remote: at lib$rsvp$asap$$flush (/tmp/build_62d8b6dd78169ce94281eaec1000a797/client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
remote:
remote:
remote:
remote:
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: 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 damp-spire-94406.
remote:
To https://git.heroku.com/damp-spire-94406.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/damp-spire-94406.git'
The desire result should be the same as navigating to localhost:4200, "app works!".
Any help is welcome. Thank you.
Related
I'm getting a parse error when I try to push to Heroku.
Heroku tells me exactly what is the cause of the error, but I couldn't find what is wrong...
How do I fix package.json file to overcome this error.
Thank you in advance.
After "git push heroku master"
Enumerating objects: 128, done.
Counting objects: 100% (128/128), done.
Delta compression using up to 8 threads
Compressing objects: 100% (111/111), done.
Writing objects: 100% (128/128), 162.25 KiB | 8.54 MiB/s, done.
Total 128 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpacks:
remote: 1. heroku/nodejs
remote: 2. heroku/ruby
remote: -----> Node.js app detected
remote: parse error: Expected separator between values at line 15, column 19
remote: ! Unable to parse package.json
remote:
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: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: b3c6397d182444e7dcae0a097773f19a122763b1
remote: !
remote: ! We have detected that you have triggered a build from source code with version b3c6397d182444e7dcae0a097773f19a122763b1
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote: !
remote: ! If you are developing on a branch and deploying via git you must run:
remote: !
remote: ! git push heroku <branchname>:main
remote: !
remote: ! This article goes into details on the behavior:
remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to t-bear0513.
remote:
To https://git.heroku.com/t-bear0513.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/t-bear0513.git'
{
"name": "heroku_deploy_app",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.3.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"engines": {
"node": "14.16.1"
},
"devDependencies": {
"webpack-dev-server": "^4.8.1"
},
}
Try to change the node version you are using, something like this:
"engines": {
"node": "14.x"
},
Also make sure it match the version you are using locally
👋
I'm getting "Module build failed: ReferenceError: Unknown plugin "inline-react-svg" while trying to Heroku after adding babel-plugin-inline-react-svg to the package.json. I wasn't able to reproduce it locally, but I'm consistently getting it in Heroku.
Any ideas on what it could be?
Error
remote: -----> Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
...
remote: Webpacker is installed 🎉 🍰
remote: Using /tmp/build_15fd574408d6d2198a86094007ac9832/config/webpacker.yml file for setting up webpack paths
remote: Compiling…
remote: Compilation failed:
remote: Hash: 7d0d7bb7df3a7fe42f08
remote: Version: webpack 3.6.0
remote: Time: 923ms
...
remote:
remote: ERROR in ./app/javascript/packs/orders.jsx
remote: Module build failed: ReferenceError: Unknown plugin "inline-react-svg" specified in "/tmp/build_15fd574408d6d2198a86094007ac9832/.babelrc" at 0, attempted to resolve relative to "/tmp/build_15fd574408d6d2198a86094007ac9832"
remote: at /tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
remote: at Array.map (<anonymous>)
remote: at Function.normalisePlugins (/tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
remote: at OptionManager.mergeOptions (/tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
remote: at OptionManager.init (/tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
remote: at File.initOptions (/tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-core/lib/transformation/file/index.js:212:65)
remote: at new File (/tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-core/lib/transformation/file/index.js:135:24)
remote: at Pipeline.transform (/tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
remote: at transpile (/tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-loader/lib/index.js:50:20)
remote: at /tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-loader/lib/fs-cache.js:118:18
remote: at ReadFileContext.callback (/tmp/build_15fd574408d6d2198a86094007ac9832/node_modules/babel-loader/lib/fs-cache.js:31:21)
.babelrc
"plugins": [
"inline-react-svg",
"syntax-dynamic-import",
"transform-object-rest-spread",
[
"transform-class-properties",
{
"spec": true
}
],
[
"transform-runtime",
{
"regenerator": true
}
]
],
package.json
"devDependencies": {
"babel-jest": "^22.0.6",
"babel-plugin-inline-react-svg": "^0.5.4",
I needed to move babel-plugin-inline-react-svg to dependencies since Heroku installs without devDependencies.
I am trying to update my Rails 5.2.1 app on Heroku and I've got this error.
remote: -----> Installing dependencies
remote: Installing node modules (yarn.lock)
remote: yarn install v1.17.2
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: error An unexpected error occurred: "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.2.tgz: Request failed \"404 Not Found\"".
remote: info If you think this is a bug, please open a bug report with the information provided in "/tmp/build_053b37334aad96876abbe953fb52fde5/yarn-error.log".
remote: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
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: 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 myapp-production.
remote:
To https://git.heroku.com/lapenderie-production.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/myapp-production.git'
Here is my package.json:
{
"name": "kamelot",
"private": true,
"dependencies": {
"#rails/webpacker": "3.5",
"babel-preset-react": "^6.24.1",
"flatpickr": "^4.5.7",
"highcharts": "^7.1.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-color": "^2.17.3",
"react-dom": "^16.8.6",
"react_ujs": "^2.5.0",
"webpack-cli": "^3.3.4"
},
"devDependencies": {
"webpack-dev-server": "2.11.2"
}
}
I tried adding the node version but that didn't resolve the issue.
This used to work. How can I fix it?
I can't find this file "/tmp/build_545b56879454d397f9a53d8826eeeffb/yarn-error.log"
I did the following
cd tmp
Nothing like build_
For some reason version 0.7.2 of websocket-driver is not published on NPM, though it does exist on GitHub.
I suggest you upgrade to 0.7.3 (or whatever the latest version is when you read this) and redeploy:
yarn upgrade websocket-driver
git add yarn.lock
git commit -m 'Update dependencies'
git push heroku master
Best way for me:
delete package-lock.json
npm i
I've recently tried integrating react into my preexisting rails app by using the webpacker gem. When I try to push to heroku, I see the an error message like
remote: [1/5] Validating package.json...
remote: [2/5] Resolving packages...
remote: [3/5] Fetching packages...
remote: [4/5] Linking dependencies...
remote: [5/5] Building fresh packages...
remote: success Saved lockfile.
remote: Done in 0.09s.
remote: Compiling…
remote: Compilation failed:
remote: error Command "webpack" not found.
remote:
remote: yarn run v1.12.3
remote: info Visit https://yarnpkg.com/en/docs/cli/run for
documentation about this command.
remote:
remote:
remote: !
remote: ! Precompiling assets failed.
remote: !
remote: ! Push rejected, failed to compile Ruby app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to spitball-production.
remote:
To https://git.heroku.com/spitball-production.git
! [remote rejected] master -> master (pre-receive hook declined)
My package.json looks like
{
"name": "Spitball",
"private": true,
"dependencies": {
},
"engines": {
"yarn": ">=0.25.2"
}
}
I've tried the solutions involving adding buildpacks and installing yarn and webpacker and so far nothing has helped. I'm expecting everything to push through no problem as all I've done is add the webpacker gem.
Did you try running
$ rails assets:precompile
in your terminal prior to pushing to Github then Heroku?
You have to compile all of your assets files prior to being built by Heroku.
I'm trying to deploy my app to heroku, but i can't find a way. I have in the root two folders, 'back' and 'front', the first is a rails api app and the second is a react app.
I think the react deploy is OK, but ruby is not.
I have the buildpacks needed:
heroku/nodejs
heroku/tuby
Please help me out! :)
/package.json
{
"name": "sophia",
"license": "MIT",
"engines": {
"node": "6.3.1"
},
"scripts": {
"build": "cd front && npm install && npm run build && cd ..",
"deploy": "cp -a front/build/. back/public/",
"postinstall": "npm run build && npm run deploy && echo 'Client built!'"
}
}
Procfile
web: cd front && PORT=3000 npm start
api: cd back PORT=3001 && bundle exec rails s
/front/package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Heroku error
remote: "homepage" :
remote:
remote: The build folder is ready to be deployed.
remote: You may serve it with a static server:
remote:
remote: yarn global add serve
remote: serve -s build
remote:
remote: Find out more about deployment here:
remote:
remote:
remote:
remote:
remote: -----> Caching build
remote: - node_modules
remote:
remote: -----> Pruning devDependencies
remote:
remote: -----> Build succeeded!
remote: ! Unmet dependencies don't fail npm install but may cause runtime issues
remote: github.com/npm/npm/issues/7494
remote:
remote:
remote: -----> Change to Node.js build process
remote: Heroku has begun executing the "build" script defined in package.json
remote: during Node.js builds.
remote:
remote: Read more: https://devcenter.heroku.com/changelog-items/1573
remote:
remote: -----> App not compatible with buildpack: buildpack-registry.s3.amazonaws.com/buildpacks/heroku/ruby.tgz
remote: More info: devcenter.heroku.com/articles/buildpacks#detection-failure
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to sophia-social-network.
remote:
To git.heroku.com/sophia-social-network.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'hgit.heroku.com/sophia-social-network.git'