Search code examples
ruby-on-railsnode.jsherokuthin

Deploying a Ruby on Rails project with React components to Heroku

I'm trying to deploy a Ruby on Rails application, with a Node.js front end to Heroku. I'm getting:

Enter image description here

Here's my Procfile:

web:bundle exec thin start -p $PORT

Here's my package.json:

{
  "name": "collectize",
  "version": "1.0.0",
  "description": "[Heroku link][heroku]",
  "main": "index.js",
  "directories": {
    "doc": "docs",
    "test": "test"
  },
  "engines": {
    "node": "4.1.1",
    "npm": "2.1.x"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "./node_modules/.bin/webpack"
    "start": "node ./app/assets/javascripts/bundle.js"

  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/winterblack/Collectize.git"
    "start": "web:bundle exec thin start -p $PORT"

  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/winterblack/Collectize/issues"
  },
  "homepage": "https://github.com/winterblack/Collectize#readme",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "flux": "^2.1.1",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-router": "^2.5.2",
    "webpack": "^1.13.1"
  },
  "devDependencies": {}
}

Here's my Heroku log:

2016-07-13T05:29:29.266840+00:00 heroku[api]: Release v28 created by [email protected]
2016-07-13T05:29:29.266840+00:00 heroku[api]: Deploy 7d61777 by [email protected]
2016-07-13T05:29:29.456774+00:00 heroku[slug-compiler]: Slug compilation started
2016-07-13T05:29:29.517376+00:00 heroku[web.1]: Restarting
2016-07-13T05:29:29.518479+00:00 heroku[web.1]: State changed from up to starting
2016-07-13T05:29:32.421302+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2016-07-13T05:29:33.846617+00:00 heroku[web.1]: Process exited with status 143
2016-07-13T05:29:41.586027+00:00 heroku[web.1]: Starting process with command `npm start`
2016-07-13T05:29:43.343250+00:00 app[web.1]:
2016-07-13T05:29:43.343268+00:00 app[web.1]: > [email protected] start /app
2016-07-13T05:29:43.343269+00:00 app[web.1]: > node ./app/assets/javascripts/bundle.js
2016-07-13T05:29:43.343269+00:00 app[web.1]:
2016-07-13T05:29:43.513547+00:00 app[web.1]:
2016-07-13T05:29:43.520060+00:00 app[web.1]:     at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:88:4)
2016-07-13T05:29:43.520063+00:00 app[web.1]:     at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:43:10)
2016-07-13T05:29:43.520063+00:00 app[web.1]:     at Module._compile (module.js:456:26)
2016-07-13T05:29:43.532480+00:00 app[web.1]: npm ERR! This is most likely a problem with the collectize package,
2016-07-13T05:29:43.535942+00:00 app[web.1]:
2016-07-13T05:29:44.242442+00:00 heroku[web.1]: Process exited with status 1
2016-07-13T05:29:44.280956+00:00 heroku[web.1]: State changed from starting to crashed
2016-07-13T05:29:44.282455+00:00 heroku[web.1]: State changed from crashed to starting
2016-07-13T05:29:57.352852+00:00 heroku[web.1]: Starting process with command `npm start`
2016-07-13T05:29:59.471893+00:00 app[web.1]:
2016-07-13T05:29:59.471938+00:00 app[web.1]: > [email protected] start /app
2016-07-13T05:29:59.471940+00:00 app[web.1]: > node ./app/assets/javascripts/bundle.js
2016-07-13T05:29:59.471943+00:00 app[web.1]:
2016-07-13T05:29:59.650297+00:00 app[web.1]:
2016-07-13T05:29:59.654711+00:00 app[web.1]: /app/app/assets/javascripts/bundle.js:88
2016-07-13T05:29:59.655117+00:00 app[web.1]:     $(document).ready(function () {
2016-07-13T05:29:59.659133+00:00 app[web.1]:     at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:88:4)
2016-07-13T05:29:59.659135+00:00 app[web.1]:     at __webpack_require__ (/app/app/assets/javascripts/bundle.js:20:30)
2016-07-13T05:29:59.659138+00:00 app[web.1]:     at Module.load (module.js:356:32)
2016-07-13T05:29:59.659139+00:00 app[web.1]:     at Function.Module._load (module.js:312:12)
2016-07-13T05:29:59.659140+00:00 app[web.1]:     at Function.Module.runMain (module.js:497:10)
2016-07-13T05:29:59.659141+00:00 app[web.1]:     at startup (node.js:119:16)
2016-07-13T05:29:59.672227+00:00 app[web.1]: npm ERR! node v0.10.30
2016-07-13T05:29:59.672464+00:00 app[web.1]: npm ERR! npm  v2.1.18
2016-07-13T05:29:59.672884+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2016-07-13T05:29:59.673045+00:00 app[web.1]: npm ERR! [email protected] start: `node ./app/assets/javascripts/bundle.js`
2016-07-13T05:29:59.673873+00:00 app[web.1]: npm ERR! This is most likely a problem with the collectize package,
2016-07-13T05:29:59.674006+00:00 app[web.1]: npm ERR! not with npm itself.
2016-07-13T05:29:59.674125+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2016-07-13T05:29:59.674412+00:00 app[web.1]: npm ERR! You can get their info via:
2016-07-13T05:29:59.674578+00:00 app[web.1]: npm ERR!     npm owner ls collectize
2016-07-13T05:29:59.674919+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2016-07-13T05:29:59.677307+00:00 app[web.1]:
2016-07-13T05:30:00.517992+00:00 heroku[web.1]: State changed from starting to crashed
2016-07-13T05:30:00.501781+00:00 heroku[web.1]: Process exited with status 1
2016-07-13T05:30:01.842475+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=collectize.herokuapp.com request_id=111967a3-b265-4447-8e7e-da8a723b5b48 fwd="24.176.249.167" dyno= connect= service= status=503 bytes=

On my local machine I need to run:

~$ bundle install
~$ npm install
~$ webpack
~$ thin start

Do I have to have Heroku run node bundle.js in order to get my React components? If so, why don't I have to do that on my machine? The difference between what happens on Heroku, and what happens on my local machine is the primary thing I need clarification on.

This line in the log seems important:

/app/app/assets/javascripts/bundle.js:88
$(document).ready(function () {

I've almost never run a JavaScript file with Node.js (aside from some debugging); I almost always work with JavaScript in a web application in HTML. I tried running node bundle.js locally, and got ReferenceError: $ is not defined. I tried changing it to document.addEventListener("DOMContentLoaded", ...but then I just got the same error for document is not defined.

I honestly have no idea where to go from here. I don't understand why Heroku needs to run node bundle.js, or whether it even does.

I did try deleting the Procfile and just putting "bundle exec thin start -p $PORT" as my start script in my package.json, and that actually got my website "up", but with no React components (and so completely blank).

Solution

  • Apparently all I had to do was delete my nodejs buildpack and readd it with index 1. My website immediately started working when I did that. Then I deleted the start script from my package.json, and the website still worked.Then I deleted my procfile and the website still works.

    So, the only issue was the order of the buildpacks, no procfile required, no start script required.