Problem: One MEAN Ionic 2 Todo App on Heroku

I’m trying to follow the blog tutorial beginning here:

I have reached the end of part 1 - and while the node server works fine on localhost:8080, I cannot load the app from heroku


http://localhost:8080/                             // works
http://localhost:8080/api/todos                    // works  // works

does NOT work:            // DOES NOT WORK

I am getting a HTTP404 Cannot GET / error. The curl statement from the tutorial returns a similar response. It seems that the node server in heroku is not serving express.static() correctly.

app.use(express.static("www")); // Our Ionic app build is in the www folder (kept up-to-date by the Ionic CLI using 'ionic serve')
// heroku logs
2016-08-30T05:24:49.600638+00:00 heroku[router]: at=info method=GET path="/" request_id=0ba26ee7-65d8-483c-8ee1-a58425469305 fwd="" dyno=web.1 connect=0ms service=13ms status=404 bytes=243

I even pushed the completed project to heroku and got a similar result.

Any ideas?

My first thought: did you remove www/build from your .gitignore file? If not, that would make sense why it’s having trouble with www on the server, but not locally - because git is not tracking the built ionic app and thus not pushing it to Heroku.

If you already did that - Do you have your code in a github repo where we could look at it?

Note that if you were creating a real mobile app that you’d deploy with cordova to an app store, you normally wouldn’t include www when hosting the backend on heroku, but because this is a simplified web-only tutorial, we are pushing up the built ionic app so you can view it in a browser!

Here are the repo links:

I did make the changes to ‘.gitignore’

+# www/build/

As I type this, I realize that I could just clone the heroku repo locally, which I did. I get the same result when I run node server.js. When I try to build locally with ionic serve I saw this:

/agile-gorge-78729[14]$ ionic serve

There is an error in your gulpfile: 
Error: Missing binding /agile-gorge-78729/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-47/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 5.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 4.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.
    at Object.<anonymous> (/agile-gorge-78729/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:15:11)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/agile-gorge-78729/node_modules/ionic-gulp-sass-build/node_modules/gulp-sass/index.js:187:21)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)

But I’m not sure how that translates when I deploy on heroku.

If I were deploying the same codebase as both an app on mobile and a SPA on web, then is this a legitimate approach?