在Heroku上部署Ionic2

Question

I am trying to deploy my ionic2 app on Heroku. I looked at these sites:

• http://blog.ionic.io/one-mean-ionic-2-todo-app-on-heroku-part-1/
• https://www.joshmorony.com/building-a-review-app-with-ionic-2-mongodb-node/
• https://devdactic.com/deploying-ionic-to-heroku/

and created a server.js file:

var express  = require('express');
var app      = express();                               // create our app w/ express
var morgan = require('morgan');             // log requests to the console (express4)
var bodyParser = require('body-parser');    // pull information from HTML POST (express4)
var cors = require('cors');

app.use(morgan('dev'));                                         // log every request to the console
app.use(bodyParser.urlencoded({'extended':'true'}));            // parse application/x-www-form-urlencoded
app.use(bodyParser.json());                                     // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
// app.use(methodOverride());
app.use(cors());

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'DELETE, PUT');
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(express.static('www'));
app.set('port', process.env.PORT || 5000);
app.listen(app.get('port'), function () {
  console.log('Express server listening on port ' + app.get('port'));
});

Since I have no models and no DB at this time, I excluded mongo and mongoose.

The server runs fine when I run it on my local machine via npm start but when I run it on heroku, I get:

Cannot GET /

on the page. Heroku Logs shows:

2017-01-04T19:56:59.385666+00:00 heroku[web.1]: State changed from starting to up
2017-01-04T19:57:00.546815+00:00 heroku[router]: at=info method=GET path="/" host=hrmghp-companion.herokuapp.com request_id=4c010120-3dce-4f99-b31c-99dc0883f314 fwd="108.44.230.178" dyno=web.1 connect=1ms service=49ms status=404 bytes=364
2017-01-04T19:57:00.549928+00:00 app[web.1]: GET / 404 19.924 ms - 13

Am I missing something in my server.js file?

Edit: I found the issue. I had www/ in my .gitignore file. I assumed that it would rebuild the app when deploying to heroku? Is this not how it works?

Answer 1

Don't add www to your repository. You don't want to keep track of all those files. Instead, include "postinstall": "ionic-app-scripts build" in the scripts section of your package.json. This will rebuild the app and regenerate the www folder for you on Heroku.

Answer 2

Just want to add something on to Alex's answer. Make sure you either add ionic-app-scripts as a dependency (as opposed to devDependency), OR disable production mode in heroku via heroku config:set NPM_CONFIG_PRODUCTION=false

So, adding "postinstall": "ionic-app-scripts build" in the scripts section of package.json, and disabling production mode worked for me.