Deploy: Ionic 2 App to Heroku

Launch an App with this Ionic 2 and Heroku Cheatsheet

Getting Started

Heroku can run your ionic app in a NodeJS environment. To do that we will need to install the Express web application framework which is a compatible server for Heroku:

    
        $ npm install express --save
    

Configure your Ionic App

Create an app.json file in the root of your project and paste in this code with your app's details:

    
    {
        "name": "AppName",
        "description": "App Description",
        "repository": "https://github.com/username/app-repo",
        "logo": "http://pereless360.com/img/SP/Ghost/360-logo-white.png",
        "keywords": ["ionic2", "heroku", "pereless360"]
    }
    

Configure your Express Server

Next, Create a server.js file in the root of your project and paste in this code as is:

    
    var express = require('express'),
    app = express();
    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'));
    });
    

Test your App

Now run your app with npm start and your app should be running at localhost:5000 in your browser:

    
    $ npm start
    

Create a Heroku App

Now that you have express.js configured on your app, you're ready to host it on Heroku! Just log on to your account and Create a New App:

Go to Deploy on Your Heroku App's Dashboard

After you created your Heroku App, you can then upload your Ionic 2 project by going to the Deploy tab for instructions, but for your convenience I have those below:

Login with Heroku CLI

If you don't have Heroku CLI installed, you need to do so first Heroku CLI

    
    $ heroku login
    

Create a new Git repository

Initialize a git repository in a new or existing directory

    
    $ cd my-project
    $ git init
    $ heroku git:remote -a todos360
    

Deploy your application

Commit your code to the repository and deploy it to Heroku using Git.

    
    $ git add .
    $ git commit -am "make a difference"
    $ git push heroku master
    

Updating you Heroku App

After you've made changes, (be sure to run ionic serve to save them). Then go into your project directory.

    
    $ heroku login
    $ git add .
    $ git commit -am "make it better"
    $ git push heroku master
    

Run your App

Check out this example application To Do List App by Pereless360

    
    $ heroku open
    

That's it, Congrats!

Subscribe to Newsletter for Upcoming Ionic 2 & Firebase App Posts.