2

Prior to Polymer 1.0, I was using python simple http server and/or apache. When I came across the starter kit app, I started using the built in browsersync, through gulp serve.

Is that appropriate for hosting on Heroku?

I added:

"scripts": {
  "start": "gulp serve:dist"
},

to my package.json, and it attempts to run. When I try to load the page, I get:

heroku[router]: at=error code=H10 desc="App crashed" method=GET

Heroku's guides are based on traditional node apps, and the Procfile or "script" in package.json, is typically just node app.js.

I feel like I'm missing something trivial. Any help would be greatly appreciated!

Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
Adam
  • 53
  • 6

2 Answers2

2

I revisited this recently. I found a pretty simple solution. I added a "serve.js" (name not important) Contents: 

var express = require('express');
var app = express();
app.use(express.static("" + __dirname + "/dist"));
app.listen(process.env.PORT || 5000);

Then, within my package.json file I added:

"scripts": {
   "start": "node serve.js",
   "postinstall": "bower install && gulp"
},

The node serve.js could also be in the Procfile. Heroku should recognize and use it either way. postinstall is used to get bower components, and run the default gulp build task. https://devcenter.heroku.com/articles/nodejs-support

Adam
  • 53
  • 6
0

if you are running gulp.vulcanize like in the 'serve:dist' task in your sample app, and also are looking to host the ./dist folder then heroku is NOT a good idea. H has no buildpack to accept a flat folder like the vulcainzed ./dist and to simply host it with nginx / apache.

buildpack list has nothing 4 polymer, although using a node wrapper appears to be an option with Heroku/polymer. IMO this is not the best because the node layer is extra cruft when trying to simply push that ./dist folder to the web.

There are hacks to make it work on H (links below) or by using the Heroku API to simply push a folder, but IMO you could do alot better.

I would look hard at alts like AWS or to github pages B4 heroku. Note that i quickly tried github pages using the ./dist folder and using 

var ghpages = require('gh-pages');
...
gulp.task('deploy', ['default'], function(cb) {
    ghpages.publish(path.join(process.cwd(), 'dist'), cb);
});

on github and it FAILED due to some router issues with #! links. So i decided to just push an unvulcanized version to the web. ( not the best )

Be certain that you can host ./dist locally WITHOUT using the 'gulp.serve' task before deciding to push the ./dist folder somewhere on the web. You may see options for pushing 'gulp.serve' and npm with your project but it makes NO sense to me to include all that extra cruft when vulcanize is trying so hard to just produce that ./dist folder!

Be certain in stdout that the vulcanize task is actually finishing....

[15:59:59] Starting 'vulcanize'...
[16:00:00] 'vulcanize' all files 436.07 kB
[16:00:00] Finished 'vulcanize' after 1.14 s

Depending on how you extend the starter kit, 'vulcanize' can fail pretty silently so that you go on to other matters with hosting the ./dist folder without realizing that 'vulcanize' failed.

Is it possible to upload a simple html and javascript file structure to heroku?

https://www.npmjs.com/package/gulp-gh-pages

How to deploy node app that uses grunt to heroku

http://www.sitepoint.com/deploying-heroku-using-gulp-node-git/

Community
  • 1
  • 1
Robert Rowntree
  • 6,230
  • 2
  • 24
  • 43
  • Thank you! There was, in fact, an error running vulcanize. https://github.com/PolymerElements/polymer-starter-kit/issues/62 was also helpful finding the specific issue there. I'll probably revisit heroku for hosting it later, but for now I've taken your other piece of advice and moved to a simple (bitbucket) hosting. The 'micro-service' app pieces are deployed and running on heroku fine. Kinda frustrating that the simple part, is the hardest to get running there. – Adam Jun 30 '15 at 17:25
  • OOOPs . after this answer was accept by OP, i went back to look at heroku.... Heroku with PHP and nginx procfile pointing at ./dist works pretty well. web: vendor/bin/heroku-php-nginx dist/ Its easy. It will work with ./dist folder state either before or after the 'vulcanize' step is run in 'gulp.js'. Im still having issues with 'vulcanize' on routed apps so im pushing pre-vulcanized state of ./dist up to heroku using other stuff for minify/uglify. – Robert Rowntree Jul 01 '15 at 09:52
  • Good to know. Thanks again! I'll have to move away from the simple hosting before long anyway. Next step will be to add some authentication, etc. What issues are you having with vulcanize? Did the issue link help any? – Adam Jul 01 '15 at 18:04
  • in a routed app, i've been porting older elements from .5 to 1.0 and can get them to work in unvulcanized state. post-vulcanize, its NG – Robert Rowntree Jul 01 '15 at 19:55