search

timoh / craftbeer

the Craft Beer finding app for Finland, written on Rails
1 stars 1 forks source link

Problem: Going to Heroku URL getbeer.herokuapp.com shows blank screen #21

Closed timoh closed 8 years ago

timoh commented 8 years ago

Let's investigate why this is, most likely due to Heroku & React related configuration things.

timoh commented 8 years ago

Some of these might be helpful:

  1. http://ditrospecta.com/javascript/react/es6/webpack/heroku/2015/08/08/deploying-react-webpack-heroku.html
  2. http://stackoverflow.com/questions/36223070/how-to-deploy-node-that-uses-webpack-to-heroku
  3. http://crypt.codemancers.com/posts/2016-03-18-rails-webpack-heroku/
timoh commented 8 years ago

Ran these commands:

heroku buildpacks:add --index 1 heroku/nodejs
heroku buildpacks:add --index 2 heroku/ruby

Buildpack added. Next release on getbeer will use:

  1. heroku/nodejs
  2. heroku/ruby
timoh commented 8 years ago

Package.json additions:

...
  "engines": {
    "node": "5.3.0"
  },
...
  "scripts": {
    "test": "ava -v",
    "start": "gulp watch",
    "heroku-postbuild": "gulp transpile"
  },
...
timoh commented 8 years ago

The root page has the following markup, but the https://getbeer.herokuapp.com/assets/bundle.js file is empty, so might be a bundling / filesystem issue with Heroku.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>craftbeer</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="styles/home.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>
<body class="index" id="page-top">

<div id="craftbeer-app"></div>

<script src="assets/bundle.js"></script>

</body>
</html>
timoh commented 8 years ago

Also, running command heroku logs shows the following:

2016-07-03T20:23:56.424600+00:00 heroku[router]: at=info method=GET path="/assets/bundle.js" host=getbeer.herokuapp.com request_id=621ee16e-4856-492d-a6d8-b4b4cfc7780d fwd="82.181.44.17" dyno=web.1 connect=1ms service=2ms status=200 bytes=141

.. so basically the file does exist (HTTP status code 200, aka success)

timoh commented 8 years ago

Also, checking to see here, it seems other assets aren't working either: http://getbeer.herokuapp.com/alco_drinks/

Resources on the Rails 4 asset pipeline:

techstalgist commented 8 years ago

I have not yet investigated what should be done in order to use the React & Redux code in production. public/assets is now included in .gitignore so its contents are not in Git version control.

Should the Babel build & transpile also be done on the Heroku production server? I.e. should the gulp task run also on Heroku server?

timoh commented 8 years ago

Perhaps should be precompiled and shipped to Heroku, and not run there.

techstalgist commented 8 years ago

Can we then simply remove public/assets/* from .gitignore? home.css should also be available on the production server, because the UI code uses CSS styles from that file.

timoh commented 8 years ago

We can try if it works. How about you try it?

techstalgist commented 8 years ago

I'll investigate this.

techstalgist commented 8 years ago

http://fredguest.com/2015/03/06/building-a-stateless-rails-api-with-react-and-twitter-oauth/

"For the sake of understanding how the production environment will work, you can run "npm run devbuild" and then instead of starting Webpack's dev-server, run "rails server" and visit http://localhost:3000 again instead of http://localhost:8080. When we deploy to production, we will give Heroku a similar script to create a static build of bundle.js that will live in the public directory, and then start up Rails to serve the JSON endpoints that React will consume from index.html. After trying that, you can delete the bundle.js file that was created because we won't use it."

Similar thing can be done in our case. We can simply run "rails server" and go to localhost:3000 --> the app works because the bundle.js -file is in the public/assets directory.

Apparently the JS code should be minified for production use for performance reasons. I suppose it's not recommended to minify the code in development environment. Minifying can be done with gulp-uglify, but now I'm trying to figure out how to configure the gulpfile so that Heroku would know how to run the correct script when deploying to production.

techstalgist commented 8 years ago

This works now, thanks to https://github.com/timoh/craftbeer/commit/b314c0d37b48db6f37768bb9780dc868aaae8a79. Now there's a problem with the API but that's another story.

I had to rename files that previously were called Root.js because apparently there was some issue with case-sensitivity / insensitivity.

These steps are just notes for myself. Apparently you need to use two different buildpacks if you want to build both Node.js and Ruby.

  1. install heroku toolpack or whatever it’s called
  2. run heroku login, enter Heroku credentials
  3. heroku git:clone -a [app_name]
  4. heroku git:remote -a [app_name]
  5. heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git
  6. touch .buildpacks -> add line "https://github.com/heroku/heroku-buildpack-nodejs.git https://github.com/heroku/heroku-buildpack-ruby.git"
  7. git push heroku master
  8. heroku open