Deploying Ionic1 as a webapp to Heroku

I needed a place to host a Ionic1 app as a webapp.

Some suggested places could be

  • Heroku
  • Gihub Pages
  • Surge.sh
  • Firebase

I chose Heroku.

What I needed to do was

Copy to root

  • app.json
  • server.js

Edit

  • package.json //Add express

from https://github.com/ionic-team/ionic-heroku-button

Now you have an express webserver to host your Ionic1 app. Next you want it to be autobuild and deployed to Heroku.

You can create your app in Heroku with Heroku Cli or you can configure it by hand.

With the Heroku Cli you do

heroku create
git push heroku master
heroku open

If you configure by hand it should look something like this:

You need a free Web Dyno

HerokuFreeDyno.PNG

You need to connect your git repo to be autodeployed, when you push

HerokuAutoDeploy.PNG

You need to set buildpack to nodejs

HerokuSettings.PNG

Now each time you push to github then Heroku will notice and do a new build

git add .
git commit . -m'Some images added'
git push

Or using Git Gui

GitGui.PNG
Here is the hosted ionic app
https://angularattack2017-crawling.herokuapp.com
and also is linked to from here
http://crawling.2017.angularattack.io/

More info
https://devcenter.heroku.com/articles/github-integration#automatic-deploys

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

Content from ionic-heroku-button:

app.json

{
 "name": "Ionic Starter",
 "description": "A simple Ionic app for Heroku",
 "repository": "https://github.com/driftyco/ionic-heroku-button",
 "logo": "http://ionicframework.com/img/ionic-logo-blog.png",
 "keywords": ["ionic", "static"]
 }

server.js

var express = require('express'),
 app = express();

app.use(express.static('www'));

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests
app.all('*', function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 next();
});
// API Routes
// app.get('/blah', routeHandler);

app.set('port', process.env.PORT || 5000);

app.listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});

package.json

  "dependencies": {
    "express": "~4.4.3"
  },

The End.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: