deploy to heroku, all image assets return 404 #1418

harrisrobin · 2015-11-09T05:24:27Z

Hi,

So for some reason after deploying to heroku all the images are returning a 404.

here is a gist of my gruntfile:
https://gist.github.com/HarrisRobin/02dd96241acd3ea51c20

Here is a live link to the website:
http://thingstodocity.herokuapp.com/

Anyone else having this issue?
Not sure if related to this:
#802

MarkPieszak · 2015-11-10T19:50:13Z

When you create your /dist folder during the yo angular-fullstack:heroku does the /Client folder contain /App and all your Assets/images etc?

I can't even deploy mine as far as you did, Heroku just keeps giving Application Error.
When looking at the Dist folder it's missing so many files, so I'm not surprised. Just wondering if you're experiencing the same issue.

harrisrobin · 2015-11-10T20:51:17Z

@mcpDESIGNS Looks like our problems are different. In my case, the /dist does contain everything, including the images that are returning 404 online!

My images are simply missing their versioning hash at the beginning of the filename. Still have not figured this out. Everything else works.

MarkPieszak · 2015-11-10T20:58:59Z

Hmmm did you try grunt build then grunt buildcontroler:heroku from your /dist folder ?

In your /app folder do you have your html files, etc? I'm missing everything. So bizarre....

harrisrobin · 2015-11-10T21:05:02Z

@mcpDESIGNS my issue turned out to be a silly mistake i forgot about. My paths were all absolute: '../../..' instead of simply starting from '/assets'. I've been using this generator for a while, you'd think I would remember haha.

As for your issue, can you please provide a Gist of the logs you get when you do 'grunt build'? I can only help you if i look at that.

Cheers

MarkPieszak · 2015-11-10T21:11:48Z

Ohh very nice! I wonder if I would have to change those as well.

The strangest thing is that it doesn't build any of the html / other files. The entire /components folder in Client is missing as well!

When i was trying to do grunt build from the dist folder I get this in the middle of it:

Running "copy:dist" (copy) task

Created 93 directories
, copied 551 files

jit-grunt: Plugin for the "babel" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings


Warning: Task "babel:server" failed. Use --force to continue.

Aborted due to warnings.

When I try to do a heroku open this happens:

Here's what the heroku logger is saying when I get Application Error

2015-11-10T21:04:06.714193+00:00 heroku[web.1]: Starting process with command `node server/app.js`
2015-11-10T21:04:08.395419+00:00 app[web.1]: /app/server/app.js:7
2015-11-10T21:04:08.395438+00:00 app[web.1]: import express from 'express';
2015-11-10T21:04:08.395439+00:00 app[web.1]: ^^^^^^
2015-11-10T21:04:08.395440+00:00 app[web.1]: 
2015-11-10T21:04:08.395441+00:00 app[web.1]: SyntaxError: Unexpected token import
2015-11-10T21:04:08.395441+00:00 app[web.1]:     at exports.runInThisContext (vm.js:53:16)
2015-11-10T21:04:08.395442+00:00 app[web.1]:     at Module._compile (module.js:404:25)
2015-11-10T21:04:08.395443+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:432:10)
2015-11-10T21:04:08.395444+00:00 app[web.1]:     at Module.load (module.js:356:32)
2015-11-10T21:04:08.395444+00:00 app[web.1]:     at Function.Module._load (module.js:311:12)
2015-11-10T21:04:08.395445+00:00 app[web.1]:     at Function.Module.runMain (module.js:457:10)
2015-11-10T21:04:08.395445+00:00 app[web.1]:     at startup (node.js:136:18)
2015-11-10T21:04:08.395446+00:00 app[web.1]:     at node.js:972:3
2015-11-10T21:04:08.954277+00:00 heroku[web.1]: State changed from starting to crashed
2015-11-10T21:04:08.955180+00:00 heroku[web.1]: State changed from crashed to starting
2015-11-10T21:04:08.940867+00:00 heroku[web.1]: Process exited with status 1
2015-11-10T21:04:10.972140+00:00 heroku[web.1]: Starting process with command `node server/app.js`
2015-11-10T21:04:13.534234+00:00 app[web.1]: /app/server/app.js:7

This stuff has been driving me insane for days, I'm kind of baffled why this is so confusing, shouldn't this process be straight forward?!

harrisrobin · 2015-11-10T21:13:28Z

Well, first of all you should not do 'grunt build' from the /dist folder. If that's the case, then it makes sense. The instructions in the documentation mentions to do it outside of the dist folder. Try that and let me know how that goes.

Edit: it does not mention to do it outside, but it only mentions to run 'heroku' commands in the /dist folder.
Also, once you did grunt build, you can confirm that the /dist is working by running grunt serve:dist from the /dist folder.

MarkPieszak · 2015-11-10T21:19:50Z

Let me try all of that, after doing a grunt build in the root folder. I got this strange issue:

Running "copy:dist" (copy) task
Created 93 directories, copied 551 files

jit-grunt: Plugin for the "babel" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings

Warning: Task "babel:server" failed. Use --force to continue.

Aborted due to warnings.

I really appreciate your help by the way, doing this alone (with no one else who knows heroku / grunt processes is quite difficult).

harrisrobin · 2015-11-10T21:24:52Z

Can you confirm that you properly ran npm install ? (and bower install).

MarkPieszak · 2015-11-10T21:29:07Z

Well well, npm install didn't work. Very strange!

I'm wondering what's changed... Think I've seen others talk about node-pre-gyp

1 warning generated.
  SOLINK_MODULE(target) Release/debug.node
ld: library not found for -lgcc_s.10.5
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [Release/debug.node] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:269:23)
gyp ERR! stack     at ChildProcess.emit (events.js:110:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:1074:12)
gyp ERR! System Darwin 14.3.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/build/debug/v0.4.6/node-v14-darwin-x64/debug.node" "--module_name=debug" "--module_path=/Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/build/debug/v0.4.6/node-v14-darwin-x64"
gyp ERR! cwd /Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug
gyp ERR! node -v v0.12.7
gyp ERR! node-gyp -v v2.0.1
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/build/debug/v0.4.6/node-v14-darwin-x64/debug.node --module_name=debug --module_path=/Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/build/debug/v0.4.6/node-v14-darwin-x64' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:110:17)
node-pre-gyp ERR! stack     at maybeClose (child_process.js:1015:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
node-pre-gyp ERR! System Darwin 14.3.0
node-pre-gyp ERR! command "node" "/Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug
node-pre-gyp ERR! node -v v0.12.7
node-pre-gyp ERR! node-pre-gyp -v v0.6.15
node-pre-gyp ERR! not ok 
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/build/debug/v0.4.6/node-v14-darwin-x64/debug.node --module_name=debug --module_path=/Users/Philly/Desktop/SportsTwits/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/build/debug/v0.4.6/node-v14-darwin-x64' (1)
npm ERR! Darwin 14.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.7
npm ERR! npm  v2.11.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node-pre-gyp install --fallback-to-build'.
npm ERR! This is most likely a problem with the v8-debug package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-pre-gyp install --fallback-to-build
npm ERR! You can get their info via:
npm ERR!     npm owner ls v8-debug
npm ERR! There is likely additional logging output above.

harrisrobin · 2015-11-10T21:30:58Z

it says your version of node is -v v0.12.7

Try changing it to v0.10.36 (downgrade) using n (this is what works for me).
If the above works, try going to node 4 and see if it still works for you.
https://www.npmjs.com/package/n

N will allow you to switch between node versions.

EDIT: node 4 actually works for me using angular-fullstack. It looks like it could be your version of node so simply upgrading to node 4 could solve the node-gyp issue.

MarkPieszak · 2015-11-10T21:42:35Z

Just now tried downgrading, and even 4 and same crap. Damn...

What version of node & npm are you using? Maybe that's the issue here

harrisrobin · 2015-11-10T21:52:16Z

I was using node v0.10.36 and npm 1.4.28 but node4 worked. are you on El Capitan? I remember reading about an issue related to node-gyp and El Capitan, try looking for that.

MarkPieszak · 2015-11-10T21:53:53Z

Not yet I'm still on Maverick or whatnot. What the hell is this babel nonsense, I'm not even using ES6!
Thanks for everything Harris, I'll keep plugging away hopefully I can figure this out, and we can try and figure out your issue as well...

harrisrobin · 2015-11-10T21:56:52Z

angular-fullstack is es6 ready, so your problem is actually that you are not able to install your node_modules from your packages.json. Once you solve that the rest should work.

MarkPieszak · 2015-11-10T22:03:44Z

So I actually got a grunt build to work by commenting out all the babel things within package.json and gruntfile.js. At least that part works, but everything is still all Fkd up, I might need to start an entire project from scratch.....

It just doesn't seem to create the dist folder correctly :( Missing all the files / etc

Same Import issue that Heroku gets after attempting grunt serve:dist when it opens the project

Starting background Express server
/Users/Philly/Desktop/SportsTwits/dist/server/app.js:7
import express from 'express';
^^^^^^
SyntaxError: Unexpected reserved word
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/Philly/Desktop/SportsTwits/dist/server/index.js:12:28)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
Stopping Express server

Damn this is brutal

harrisrobin · 2015-11-10T22:09:58Z

My only advice at this point is Look into the node-gyp issue and try to get
just that part to install properly before anything.
On Tue, Nov 10, 2015 at 5:03 PM Mark Pieszak [email protected]
wrote:

So I actually got a grunt build to work by commenting out all the babel
things within package.json and gruntfile.js. At least that part works,
but everything is still all Fkd up, I might need to start an entire project
from scratch.....

It just doesn't seem to create the dist folder correctly :( Missing all
the files / etc

Starting background Express server
/Users/Philly/Desktop/SportsTwits/dist/server/app.js:7
import express from 'express';
^^^^^^
SyntaxError: Unexpected reserved word
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/Philly/Desktop/SportsTwits/dist/server/index.js:12:28)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
Stopping Express server

Damn this is brutal

—
Reply to this email directly or view it on GitHub
#1418 (comment)
.

MarkPieszak · 2015-11-11T01:47:23Z

Thanks Harris, you've been a great help! I'll hopefully figure it out sooner than later.
Hey, maybe next I'll run into your 404 issue once I get it going haha. Talk to you later

harrisrobin · 2015-11-11T15:07:12Z

Np! Good luck.

MarkPieszak · 2015-11-25T23:48:39Z

Hey @harrisrobin any luck on this one??

I ended up getting alllll of my crazy issues fixed, but now I'm in the same boat as you with the Images returning 404 for Heroku haha

You ever figure this one out?

harrisrobin · 2015-11-26T17:42:58Z

Hey,

Make sure you are using relative paths for your assets and not absolute /../../

MarkPieszak · 2015-11-27T00:57:17Z

So right now, I have /assets/blah.jpg what should it be instead? @harrisrobin You the man
Happy turkey day

harrisrobin · 2015-11-27T04:41:01Z

@mcpDESIGNS try /assets/images/blah.jpg. Otherwise, starting with /assets/ looks good.

Happy thanksgiving!

ashishbajaj99 · 2015-11-27T05:10:31Z

BTW just a performance related suggestion: doing file io and asset serving
through your application on heroku can limit the performance. Recommend
looking at Amazon's CloudFront CDN service. Here are some links for further
reading.

Cheers.

https://devcenter.heroku.com/articles/using-amazon-cloudfront-cdn
http://www.slideshare.net/SimonBagreev/improving-your-heroku-app-performance-with-asset-cdn-and-unicorn

On Fri, Nov 27, 2015 at 10:11 AM, Harris Robin Kalash <
[email protected]> wrote:

@mcpDESIGNS https://github.com/mcpDESIGNS try /assets/images/blah.jpg.
Otherwise, starting with /assets/ looks good.

—
Reply to this email directly or view it on GitHub
#1418 (comment)
.

harrisrobin closed this as completed Nov 11, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

deploy to heroku, all image assets return 404 #1418

deploy to heroku, all image assets return 404 #1418

harrisrobin commented Nov 9, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 11, 2015

harrisrobin commented Nov 11, 2015

MarkPieszak commented Nov 25, 2015

harrisrobin commented Nov 26, 2015

MarkPieszak commented Nov 27, 2015

harrisrobin commented Nov 27, 2015

ashishbajaj99 commented Nov 27, 2015

deploy to heroku, all image assets return 404 #1418

deploy to heroku, all image assets return 404 #1418

Comments

harrisrobin commented Nov 9, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 10, 2015

harrisrobin commented Nov 10, 2015

MarkPieszak commented Nov 11, 2015

harrisrobin commented Nov 11, 2015

MarkPieszak commented Nov 25, 2015

harrisrobin commented Nov 26, 2015

MarkPieszak commented Nov 27, 2015

harrisrobin commented Nov 27, 2015

ashishbajaj99 commented Nov 27, 2015