Has anyone deployed an Ionic app to Heroku?

I’m trying to do that now, unsuccessfully. It recognizes it as a node.js app and doesn’t output any errors. However, the launch page doesn’t show up. I’ll continue to work on it; just wondering if others have some experience. Thanks!

Check out this article, using ionic and node on heroku

http://coenraets.org/blog/2014/08/employee-directory-sample-app-with-ionic-and-node-js/

Thanks M. That article just says “click the Deploy to Heroku button”, but it does confirm that it can be done. I actually think it’s as simple as creating a Procfile which says:

web: ionic serve

but I’m having other problems at the moment.

Ahh alright, maybe you should check out this article

Since it’s straight angular, it will be pretty relevant.

2 Likes

Success! With a combination of those articles, plus simply [Serving static content from node][1] and Heroku’s [Getting started with nodejs][2], success.

  1. Add a dependency to express in package.json:
"dependencies": {
    "express": "4.8.4",
```

2. Create a web.js file like this:

var express = require(‘express’);
var app = express();

app.use(express.static(__dirname + “/www”));
app.listen(process.env.PORT || 5000);


3. Create a `Procfile` to launch this:
web: node web.js

Now you should be able to launch the server using [Foreman][3] by typing:

foreman start


Push it to github, ensure there's one dynamo running by typing:

heroku ps:scale web=1

and should be good to go. Thanks for the tips!

  [1]: http://blog.modulus.io/nodejs-and-express-static-content
  [2]: https://devcenter.heroku.com/articles/getting-started-with-nodejs
  [3]: http://blog.daviddollar.org/2011/05/06/introducing-foreman.html
4 Likes

Awesome! glad to know to hear you got it to work now :smile:

@shawnlauzon I am very curious as to why you are deploying an ionic app to Heroku? For demo purposes ?

Yes, just demo purposes, and to demonstrate functionality to people without having to generate a real app.

3 Likes

Great tip! Just click on the “Deploy to Heroku” button on the page above. Then simply run:

heroku git:clone -a <app-name>
cd <app-name>
rm -r www
cp -r ~/my_ionic_app/www
git add --ignore-removal .
git commit . -m'initial commit'
git push

Now just replace the contents of the www folder with the contents of a a new one, do a git push and you’re basically good to go. :smile:

2 Likes

A clear and step-by-step explanation of deploying an Ionic app to Heroku:

http://devdactic.com/deploying-ionic-to-heroku/

Check out http://blog.ionic.io/heroku-ionic/
From that project:

Copy

  • app.json
  • server.js
    Copy from
  • package.json
    – Add depency express