Deploying a Ruby on Rails project with React components to Heroku

Question

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

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).

What do you mean nodejs front-end? Heroku allows one server listening per app, so you would need 2 apps, one for rails, one for node. — AJcodez
– AJcodez, Commented Jul 13, 2016 at 4:06
I mean that my project uses react. I thought that javascript runs in the front end by the browser. Clearly, I don't understand this well. — Wylliam Judd
– Wylliam Judd, Commented Jul 13, 2016 at 4:13
I see. I suspect the issue is Heroku is detecting the wrong buildpack. Can you run heroku buildpacks and tell me the output? — AJcodez
– AJcodez, Commented Jul 13, 2016 at 4:30
heroku/ruby and heroku/nodejs. I installed both of these myself. — Wylliam Judd
– Wylliam Judd, Commented Jul 13, 2016 at 4:32

Josiah · Accepted Answer · 2016-07-13 03:44:42Z

1

I've found that with Heroku, you need to include a favicon. The app will crash otherwise.

Include this in your <head>:

<link href="/images/favicon.png" rel="shortcut icon" type="image/png"/>

Adjust the path, filename, and type accordingly.

answered Jul 13, 2016 at 3:44

Josiah

606 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wylliam Judd Over a year ago

Added the favicon but it didn't fix my problem. Thanks for the tip.

AJcodez · Accepted Answer · 2016-07-13 13:28:29Z

0

The issue is Heroku is setup to serve either a Rails backend or a Node.js isomorphic frontend. You can't do both in the same app.

Use two apps. myapp-api.herokuapp.com is Rails and myapp-web.herokuapp.com is React isomorphic. I personally host the React frontend on netlify.com which is a static hosting service.
Build using webpack during the build and serve static files from Rails. webpack-rails looks promising.

Remove the nodejs buildpack, and decide how you want to serve your frontend. Separate app, or static build.

answered Jul 13, 2016 at 13:28

AJcodez

34.5k21 gold badges88 silver badges119 bronze badges

2 Comments

Wylliam Judd Over a year ago

I'm sure this is not true. I was dropped from appAcademy, but still have access to their curriculum. I can see dozens of Rails/React projects deployed to Heroku in a single app. So, I'm sure this isn't the fix, but unfortunately I can't get help from the TAs anymore, so I'm not sure exactly what the problem is. But I know it's not this.

Wylliam Judd Over a year ago

It just started working. I removed the nodejs buildpack from heroku and readded it with index 1, and apparently that solved the problem.

Wylliam Judd · Accepted Answer · 2016-07-13 17:06:05Z

0

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.

answered Jul 13, 2016 at 17:06

Wylliam Judd

11.2k3 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

Deploying a Ruby on Rails project with React components to Heroku

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related